Running Locally

npm install
npm run dev --workspace layr-documentation

Layr is not currently intended for npm republishing. The documentation site imports the local layr.css workspace package so teams can inspect a live ITCSS implementation and decide what to adapt.

Using in Build

Recommended you use PostCSS and postcss-import.

Example using Gulp.js:

const gulp = require('gulp');
const postcss = require('gulp-postcss');
const atImport = require('postcss-import');
const env = require('postcss-preset-env');

const processors = [
  atImport,
  env
];

gulp.task('styles', ()=> {
  return gulp.src('path/to/stylesheet')
    .pipe(postcss(processors))
    // Probably other tasks
    .pipe(gulp.dest('path/to/destination'));
})

In a downstream build, import the local package or copy the layer you want to adapt:

@import 'layr.css/src/settings';
@import 'layr.css/src/generic';
@import 'layr.css/src/elements';

@import 'layr.css/src/objects/layr.grid-columns';

@import 'layr.css';

:root {
  --headlines: 'Proxima Nova Condensed', Lucida Grande, sans-serif;
  --body-text: 'Meta Serif Pro', Charter, serif;
}

And things should compile the way you’d expect.

npm install
npm run dev --workspace layr-documentation