I finally started making an effort with my styling. Previously I have thought of it just as a necessity and fought the browser all the way.

By taking advantage of some amazing plugins I have found myself actually enjoying writing CSS.

Plugins

• Node Sass
  • Compiles SASS at lightening speed.
• Node Bourbon
  • Node version of Bourbon for clean mixins to help dry up SASS.
• Neat
  • Node version of Neat for grid layout.
• Pleeese
  • Handles vendor prefixes, fallbacks and more.

Configure these with gulp like so:

gulpfile.js

var gulp = require('gulp');
var browserSync = require('browser-sync');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var settings = {
    src: src + "/sass/*.{sass,scss}",
    dest: dest,
    settings: {
      indentedSyntax: true, // Enable .sass syntax!
      imagePath: 'images', // Used by the image-url helper
      includePaths: require('node-bourbon').includePaths,
      includePaths: require('node-neat').includePaths
    }
  },
};

gulp.task('sass', function() {
  return gulp.src('...')
    .pipe(sourcemaps.init())
    .pipe(sass(settings))
    .pipe(sourcemaps.write())
    .pipe(autoprefixer({
      browsers: ['last 2 version']
    }))
    .pipe(gulp.dest('...'))
    .pipe(browserSync.reload({
      stream: true
    }));
});

By using mixin libraries rather than Bootstrap we can move the layout into the CSS. This makes the views much more legible and maintainable. They can also be reused more easily.

From this Bootstrap HTML:

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <h2 class="text-center">
        Lots of extra
      </h2>
    </div>
  </div>
</div>

To this type of SASS:

.some-text {
  @include outer-container;
  @include clearfix();
  @include padding(50px);
}

Mixins provide shorthands so the CSS is easier to refactor. The HTML is cleaner and more focused on content.

This made working on Aidan’s website much easier.