Added the "What is Gulp" section, including .feature2 and highlightjs

[ansballard]

Threw together the "What is Gulp" section from the "Getting Started" mockup (https://github.com/gulpjs/gulpjs.github.io/issues/38). The existing page didn't include the headers on each section, so I didn't add it to this one either. I also added highlightjs, since that's what was used on the previous version of the site. Tried my best to follow the styles already in index.html and main.css, but I'm happy to change anything that doesn't fit. And if you all would like all the sections implemented for the issue I'll tack onto this pull request for the other two. Just ran out of time today.

[yocontra]

Can you provide a screenshot of the page before and after these changes?

[phated]

Hmmm, I think highlightjs is overkill. Could you copy the styling out of the page and just add it directly into the page?

[yocontra]

Also seems like a lot of this copy overlaps with stuff already on the page. If it seems like we already conveyed the info then maybe there is no need to add this section.

Also, needs a diff code example - the one given isn't too great.

[ansballard]

1. Will add before/after screenshots when I get home (added)

   • Before
   • After

2. Will do, I actually tried that first but I didn't want to reimplement something that might get used somewhere else (highlightjs removed, screenshots are identical)

3. I agree, most of it's pretty generic. I do like the contrast and the opportunity to show a simple example of a gulpfile/tasks though. Maybe it just needs different points, or maybe it should focus on something else entirely?

Will update when 1 and 2 are changed.

[ansballard]

Swapped the code example for an example jade build task based on API.md. Also added gulpfile.js in the header of the example code box, in case it's not 100% clear that this is a gulpfile instead of using the API from a node script or something like that. Kept the commits separate in case you all don't like that though.

[yocontra]

How about this for a code sample?

var gulp = require('gulp');
var jade = require('gulp-jade');
var less = require('gulp-less');
var minifyCSS = require('gulp-csso');

gulp.task('html', function(){
  return gulp.src('client/templates/*.jade')
    .pipe(jade())
    .pipe(gulp.dest('build/html'))
});

gulp.task('css', function(){
  return gulp.src('client/templates/*.less')
    .pipe(less())
    .pipe(minifyCSS())
    .pipe(gulp.dest('build/css'))
});

gulp.task('default', [ 'html', 'css' ]);

I'd be okay losing the copy entirely and just doing a big code sample IMO, I think we have enough copy on the page.

[ansballard]

Removed the copy, along with the css I added for it (.list and .listitem). Also removed feature2, since the code example is a single .col-12. Also moved the section to .container-sml since it doesn't take up very much horizontal space, and didn't do anything extra for small screens since it seems to shrink down fine. Also fixed a couple tabs from the last couple commits where I didn't double-indent.

[ansballard]

Oof, sorry for the dirty merging. I replaced the CLI example at the top of the page with <pre><code> and used the same class as the code example so it should scale the same, have a similar feel, etc. Also added breakpoints to the code example on small screens, and scaled the font size down from 14pt to 13pt so it fits a little better. As far as I can tell all the comments above are addressed, I'll list them to be sure.

1. Highlightjs font issue: Fixed, needed more specific css for those spans
2. Replace cli.svg with <pre><code> and add breakpoints to code example: done
3. Font sizes have fit the page fairly well
4. Code function indented
5. Indentation looks like it matches the rest of the file to me
6. Switched the code example to a large container, which looks fine with the larger font

[yocontra]

@ansballard Screenshots?

[ansballard]

Sorry about that, totally forgot.

CLI Fullscreen

CLI Small Screen

Code Example Fullscreen

Code Example Small Screen

[yocontra]

Thanks!