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

Merged
merged 8 commits into from Jan 11, 2017

Projects

None yet

3 participants

@ansballard
Contributor

Threw together the "What is Gulp" section from the "Getting Started" mockup (#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.

@contra
Member
contra commented Jan 4, 2017

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

@phated
Member
phated commented Jan 4, 2017

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

@contra
Member
contra commented Jan 4, 2017 edited

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
Contributor
ansballard commented Jan 4, 2017 edited
  1. Will add before/after screenshots when I get home (added)
  • Before gulp-old
  • After
    gulp-new
  1. 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)
  2. 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
Contributor

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.

gulp-replacedexamplecode

@contra
Member
contra commented Jan 8, 2017

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
Contributor

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.

gulp-nocopy

@contra

Looks great - couple of tweaks and I'll merge ASAP.

css/main.css
+ color: rgba(255,255,255,0.9);
+}
+.whatisgulp .listitem-heading {
+ color: rgba(255,255,255,0.9);
@contra
contra Jan 8, 2017 Member

2 space padding is the format

css/main.css
+}
+.editor-window code {
+ background-color: #141414;
+ font: normal 10pt monospace;
@contra
contra Jan 8, 2017 Member

Use the font family and font-size from the CLI example above.

@ansballard
ansballard Jan 8, 2017 edited Contributor

so I copied out the font family (Menlo, etc...) and the font-size (40px) but since it doesn't scale like the svg, it doesn't really look right. Starting to wonder if either this section should be switched to an svg, or if the header should be switched to <pre><code> so they match each other a little better. Also gulpfile.js and the rest of the header look way too small in comparison now, should they be scaled up as well?

gulp-clifonts

@ansballard
ansballard Jan 8, 2017 Contributor

Example of how cli.svg could look using <pre><code.

Examples with resizing, ~20mb gifs

@contra
contra Jan 8, 2017 edited Member

@ansballard It looks like highlightjs is doing something weird with the font-family on strings - doesn't seem to be monospace.

Your call on svg vs. pre, btw. Can also use breakpoints to adjust font size so it looks alright on mobile and desktop.

For font sizes, adjust until you think it looks right. Might make sense to make the code a little smaller.

Also the code in the function should be indented.

index.html
@@ -79,6 +79,42 @@ <h3 class="subheading center">Quality Ecosystem</h3>
</div>
</div>
+ <div class="whatisgulp">
+ <div class="container-sml">
@contra
contra Jan 8, 2017 Member

Larger container - theres too much empty space around the editor so it looks a little funky

@bdougie bdougie referenced this pull request Jan 9, 2017
Merged

adds contribute section #47

ansballard added some commits Jan 10, 2017
@ansballard ansballard Replaced cli.svg, sized up "whatisgulp", changed code example
The logo at the top of the page now uses `.editor-window`, so it's a regular `<pre><code>` block. This means it will scale the same as the code example, and it will be copy-paste-able. Also added breakpoints to the code example, so it is fully visible at all screen widths without scrolling. Both the logo and code example scale from font-size: 14pt to 13pt on small screens since the code example was just a bit too big at 14pt.
132662f
@ansballard ansballard Merge branch 'master' into getting-started 9d29100
@ansballard ansballard Made a syntax error when merging into master.
Will pull down and confirm everything works before commenting.
d517ce0
@ansballard
Contributor
ansballard commented Jan 11, 2017 edited

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
@contra
Member
contra commented Jan 11, 2017

@ansballard Screenshots?

@ansballard
Contributor

Sorry about that, totally forgot.

CLI Fullscreen

gulp-clilarge

CLI Small Screen

gulp-clismall

Code Example Fullscreen

gulp-codeexamplelarge

Code Example Small Screen

gulp-codeexamplesmall

@contra contra merged commit 6a2cea7 into gulpjs:master Jan 11, 2017
@contra
Member
contra commented Jan 11, 2017

Thanks!

@ansballard ansballard deleted the ansballard:getting-started branch Jan 18, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment