Install

1. Install with npm

npm i minimis --save-dev

2. Copy starter kit

mkdir -p resources/assets/sass/
rsync -avz node_modules/minimis/starter-kit/ resources/assets/sass/

3. Build with gulp

npm i gulp gulp-autoprefixer gulp-clean-css gulp-sass gulp-sourcemaps npm-sass --save-dev

Sample gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass');
const sassImporter = { importer: require('npm-sass').importer };
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');

// Sass
const SASS_SRC = ['./resources/assets/sass/*.scss'];
const SASS_DEST = './public/css';

gulp.task('styles', function() {
  return gulp.src(SASS_SRC)
    .pipe(sass(sassImporter))
    .pipe(sourcemaps.init())
    .pipe(autoprefixer())
    .on('error', sass.logError)
    .pipe(cleanCSS({ inline: ['none'], keepSpecialComments: 0 }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(SASS_DEST));
});

// Default
gulp.task('default', ['styles']);

// Watch
gulp.task('watch', function() {
  gulp.watch(SASS_SRC, ['styles']);
});

4. Optional Keep clean code with EditorConfig and stylelint

npm i -g stylelint
npm i stylelint-config-property-sort-order-smacss --save-dev
cp node_modules/minimis/.editorconfig .editorconfig
cp node_modules/minimis/.stylelintrc .stylelintrc

Upgrade

Migrating from mode-front-end 2.11.1 to minimis 0.1.x

Replace css-normalize() mixin

Remove all @include css-normalize(); references.

To replace it, either:

• Copy Normalize.css v3.0.3 and include it in your app styles.
• Install with npm and include it directly from node_modules/:
  • npm i normalize.css@3.0.3 --save-dev
  • `@include 'node_modules/normalize.css/normalize.css'

Replace css-reset() mixin

Remove all @include css-reset(); references.

To replace it, mode-front-end v2.11.1’s _reset.scss and include it in your app styles.

Added directional aliases to o-grid--gutters():

Update all o-grid--gutters() references so they include a horizontal- prefix:

For example, @o-grid--gutters('sm'); becomes @o-grid--gutters('horizontal-sm');.