ausybenelux / jacket Goto Github PK

We should include:
Because when we do this, it is easyer to meet customers requirements,
when they want to resize all the fonts and rhythms.

html {
  font-size: 100%;
}

• Uncomment components inclusion:

// Components styles
@import "components/**/*";

• Change "media" to "width" in _shortcuts.scss:

@function med($breakpoint, $breakpoints: $breakpoints) {
  @return mdg($breakpoints, $breakpoint, "width");
}

• (already fixed) Disable minCSS task in SASS task for easier debugging.

return gulp.src(config.path.scss)
    .pipe(sourcemaps.init())
    .pipe(sassGlob())
    .pipe(sass({
      includePaths: [
        require("node-bourbon").includePaths,
        require("node-neat").includePaths[1],
        require("node-normalize-scss").includePaths,
        config.path.bower + config.path.fontAwesome
      ],
      //importer: jsonImporter,
      outputStyle: config.sass.style,
      errLogToConsole: true
    }))
    .pipe(prefix(config.autoprefixer))
    //.pipe(mincss())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(config.path.css))
    .pipe(browserSync.stream());

in _neat.scss
$max-width: em(1170);
should be in pixels, because you do not want to adjust the width of your site based on your body font-size
This is an edge case.
should be:
$max-width: 1170px;

present in mixins _shapes.scss

This file still holds a compass mixin

These files lead to confusion or bad practice.

Jacket tasks:

// -----------------------------------------------------------------------------
// DEFAULT TASK
// -----------------------------------------------------------------------------

gulp.task("default", gulpSequence(
    "help",
    "sass",
   // "css-minify",
    "scss-lint",
    "jade",
    "watch",
    "browser-sync"
  )
);

Ocelot tasks:

// -----------------------------------------------------------------------------
// DEFAULT TASK
// -----------------------------------------------------------------------------

gulp.task("default", gulpSequence(
    "install",
    "compile",
    "lint",
    "improve",
    "serve"
  )
);

gulp.task("install", [
  "help"
  //here should be an install task
]);

gulp.task("compile", [
  "sass",
  "browserify"
]);

gulp.task("lint", [
  "scss-lint",
  "jshint"
]);

gulp.task("improve", [
  "uglify"
]);

gulp.task("serve", [
  "watch",
  "browser-sync"
]);

The generator branch should be created to be a replica of the master branch. But this branch contains the yeoman ejs templates to be used in the generator in ausybenelux/Powerplant#1

Css should be ignored because it conflicts sometimes.
Compilation for ocelot projects should be done on the server.

see if the packages are up to date

Due to ie11 bug we should provide a way we can enlarge an icon based on px values.
this can be the second parrameter for the mixin. The lineheight should also be set to important.
@include fontello-icon("code", 23);
@include fa-icon("code", 32);

Current:

• blocks/ <= remove
• drupal/ <= remove
• menus/
• misc/
• views/ <= remove

add:

• form/
• buttons/
• teasers/
• identity/

Result, also singularized:

• menu/
• misc/
• form/
• button/
• identity/ (logo's and identity related things)
• teaser/ (mostly cards with image title descr or something like that)

Remove the last ruby dep! 👍

This is related to ausybenelux/Ocelot#50
We now have a piece of compass in our project, but this must be reviewed to something better and something that works better with bourbon.

Add the $modular-scale-ratio & $modular-scale-base variables to the repo, so they can easily be adapted for each project.
The default scale for the ratio is $perfect-fourth(1.333), but you can globally override this with this variable.
We use these variables in the heading mixin (to calculate the line-height).

http://bourbon.io/docs/#modular-scale

#203 in https://github.com/Crosscheck/Ocelot: added shortcut for color in color-map + updated scss-files to use this shortcut

Original issue:

1 sqndr

Since the colors and timings are now sass maps, let's include some functions to get the colors and timings.

Example:

@function get-color($color) {
  @if map-has-key($color-scheme, $color) {
    @return map-get($color-scheme, $color);
  } @else {
    @error "ERROR: The color is not availible.";
  }
}

Based in this, we could add simple helpers mixins:

/// Mixin to set the background color.
///
/// @group utils
///
/// @param {color} $color - The background color. Note: This can only be a
/// variable from the color schema.
@mixin bg-color($color) {
  background-color: get-color($color);
};

/// Mixin to set the text color.
///
/// @group utils
///
/// @param {color} $color - The text color. Note: This can only be a
/// variable from the color schema.
@mixin text-color($color) {
  color: get-color($color);
};

2 robbar

Yeah that is a good idea, only the syntax should be as short as possible.
get-color should be color() and it can be placed as a shortcut in shortcuts.scss.
In shortcuts that color function should use the mg shortcut and the check
@if map-has-key($color-scheme, $color) { should be in the mg function
👍 for color shortcut
👎 for the text-color bg-color because there is no added value here, correct me if there is an advantage. With this we introduce 3 lines of code in the baserepo to output one-line of css. This feels like overkill.

a background color or color can just be.

background-color: color(name);
color: color(name);

3 sqndr

👍

Let's leave the mixins out. Valid reasoning!

The config file still holds the settings for favicon and modernizr, these gulp tasks can be transfered from ocelot to jacket. This is not drupal 7 related.

We use the gulp-css-min plugin which uses clean-css.
https://github.com/jakubpawlowicz/clean-css
This clean css comes out of the box with some advanced cleanup settings turned on.

These advance settings do more than just minify your code, they do property merges and selector merges. When you have bad css that is a good thing LoL.

But this is actually a very bad thing,
these advance settings introduces differences in your css cross env when you only run this minification on prod envs!

When your css is written in the correct way you should not need these advance settings anymore.
We also have our scss linter to back us up here.
With this peace of code we deactivate this advanced cleaning:

.pipe minifyCss(advanced: false)

I created an issue in their repo for this: clean-css/clean-css#717

Should be:

-@import "../../../../breakpoints.json";
+@import "breakpoints.json";

And then we should provide a path from the include paths for this that is bound to the root.

The generator branch already tackles this issue, mainly this is an issue when the config files are stored at the root en the theme files somewhere deeper in the project structure.
This is the includespath array in the gulpfile in the generator.

@@ -67,7 +67,8 @@ gulp.task("sass", "Compiles your SCSS files to CSS", function () {
         require("node-bourbon").includePaths,
         require("node-neat").includePaths[1],
         require("node-normalize-scss").includePaths,
-        config.path.bower + config.path.fontAwesome
+        "<%= dest %>/" + config.path.bower + config.path.fontAwesome,
+        "<%= dest %>"
       ],

in _grid.scss

$grids: (1, 2, 3, 4, 5, 6);
@each $i in $grids {
  .grid-#{$i} {
    &.mobile {
      @include media(med(mobile)) {
        @include grid($i);
      }
    }

    &.tablet {
      @include media(med(tablet)) {
        @include grid($i);
      }
    }

    &.desktop {
      @include media(med(desktop)) {
        @include grid($i);
      }
    }
  }
}

to something like this:

$grids: (1, 2, 3, 4, 5, 6);
@each $i in $grids {
  .grid-#{$i} {
    //for that loops over the keys in the breakpoints sass-map
  }
}

svg/png minification with: https://github.com/sindresorhus/gulp-imagemin

A good way would be to use .l-grid-4 or .l-container
Or if there are other options please post this in the ticket.
This should be reworked right now.
Most of these classes are in _grid.scss

/// Set to true to add a px fallback when using rems
//// @group Typography
//// @type Boolean
$rem-with-px-fallback: true;

Should be set to false. This is legacy.

Because of the usage of node-sass-json-importer only nodejs 5.x is supported.

Could we look into an alternative package (e.g. https://github.com/acdlite/json-sass) or submit a PR to node-sass-json-importer with a working version?

There should be a index.htm file that is being served with the browsersync server.
This should be a jade file in the source folder that compiles to the dist into html.

This is already in progress together with the update of the node modules.
It's a matter of changing the variables to the neads of the neat 2 lib

Add the generator and add a link to the gh pages in the readme.
Also add the generator in the index.html

Provide .hide and .show classes.
And in conjunction with that provide .hide@breakpoint and show@breakpoint classes.
Then you can do something like:

<div class="hide show@tablet">
or
<div class="show hide@desktop">

It would be handy to get an error message if there is an error during the watch task in OSX. You get a clear error message in terminal now, but if you terminal window is hidden this might be handy.

Check: https://www.npmjs.com/package/gulp-notify

Add kss-node to document all the created components.

/// Rembase variable
//// @group Typography
//// @type Value
$rembase: 16;

/// Base font size in px
//// @group Typography
//// @type Value
$base-font-size: 15px;

/// Base line height in px
//// @group Typography
//// @type Value
$base-line-height: 25px;

the $base-font-size is the only one that should be used.
Als this should be set to 16px.

$rembase: 16; should be removed
and

/// Set the font-size with a px fallback
//// @group Typography
/// @param {value} $size [none] - font-size
/// @param {unit} $unit [rem] - unit used for font-size
@mixin font-size($size, $unit: rem) {
  @if $rem-with-px-fallback == true {
    font-size: $size + px;
  }

  font-size: $size / $rembase + $unit;
}

/// Set the line-height with a px fallback
//// @group Typography
/// @param {value} $line-height [none] - line-height
/// @param {unit} $unit [rem] - unit used for line-height
@mixin line-height($line-height, $unit: rem) {
  @if $rem-with-px-fallback == true {
    line-height: $line-height + px;
  }

  line-height: $line-height / $rembase + $unit;
}

Should use $base-font-size instead of rembase.

for example:

// ====================================================================================================== //
// BASE-STYLES.SCSS //
// Uses the imports file and imports the base styles in the right order
// ====================================================================================================== //

Is not really actual(no more imports file) and should contain some tekst to explain base styles

• options should not be as a var.
• change the path to use the config /assets does not exist anymore.
  And make sure scss is scr/scss in config.path and that it gets appended with the right string "/**/*" in the gulp file

BEVM: Block__element--modifier -variation

The helper styles we now have like bgc-#{color} for example is thus a variation.
They should be prefixed with a - sign so the variation is -bgc-red for example.
It's more clear we are talking about helper/variations with the - sign.

But! We should agree that the -variation applies on everything, so -dib (display: inline-block) can go on every component/tag for example.

A problem I have encountered with this decoupled variation approach is that it needs a important statement to override the component styles. No really big issue, but we should keep that in mind, the component style selector will be stronger then the -variation one.

With tags and base styling this is no problem at all, for example
<h1 class="-c-red">test</h1>

h1 {
  color: grey;
}
.-c-red {
  color: red;
}
/* the h1 will be red without important */

Another problem is that there should still be modifiers attached to the component.
I understand that class="btn btn--green btn--large btn--underlined" is too much btn :)

But there should be a difference between variation and modifier so my suggestion is to still use,
something like this class="btn --green --large --underlined -dib -c-red"

--class applies to this component only
-class applies to all tags

With this approach we get the whole shebang :D
No component name clutter, -variation for all tags, --modifiers for components.
👍

either path or proxy input...
so :

gulp --path ./dist
or
gulp --proxy local.dev.project

The sass task now minifies the css .pipe(mincss())
but this should be bundled in the improve task and made separate.

It is more consistent,
and it can be easier to inspect the plain css code to spot errors.
If you do want the css to be expanded you can just run gulp compile (the grouped task without the improve this will expand the css).

There can also be a difference in output css on dev/stage and prod.
Easier to debug and view the raw css files when bugs appear.

I know sourcemapping got us covered, but there are edge cases where you do want to look at the compiled css expanded. Debuggers like the ie9 debugger do not cover sourcemapping, I see an advantage there as well. Do not get me wrong, the standard gulp task will still minify the css, but it will be done in another separated step. Maybe we'll lose some milliseconds, but that is a minor issue since we win on flexibility.

// Components styles
@import "components/**/*";
should be
// Components styles
@import "components/*";