Space Shuttle Atlantis takes flight on the STS-27 mission in December 2, 1988 — © NASA Image Archive

Taking PatternLab modularity to the next level

Matteo Pescarin
Jun 28, 2017 · 12 min read

TL;DR: PatternLab modularity system

Pattern Lab Edition diagram

Understanding StarterKits

$ gulp patternlab:loadstarterkit --kit=@buildit/starterkit-global-rulesLoading engines from the core...
Loading engines from the edition or test directory...
mustache: good to goDone loading engines.====[ Pattern Lab / Node - v2.9.3 ]====[13:53:21] Using gulpfile ~/repos/patternlab-base-toolkit/gulpfile.js
[13:53:21] Starting 'patternlab:loadstarterkit'...
Attempting to load starterkit from /Users/peach/repos/patternlab-base-toolkit/node_modules/@buildit/starterkit-global-rules/dist
Overwriting contents of ./source/ during starterkit load.
starterkit @buildit/starterkit-global-rules loaded successfully.
[13:53:21] Finished 'patternlab:loadstarterkit' after 16 ms

Dependencies and requirements

Making StarterKits useful

The structure of a Design System, broken down into Building Blocks, UI Patterns, and Rules. — credit goes to UXPin.

I want to be able to have different StarterKits that I can mix and match according to what I need to build.

The final architecture organisation of PatternLab in conjunction with 3 different StarterKits

How to make PatternLab truly interoperable

Adding SASS compilation

$ npm install -s gulp-sass
// gulpfile.jsconst sass = require('gulp-sass');
// patternlab-config.json{
"paths": {
"source": {
// ...
"sass": "./source/sass/"
},
// ...
},
// ...
}
// gulpfile.jsgulp.task('pl-sass', function () {
const sassOptions = {
includePaths: [paths().source.sass]
};
return gulp.src(path.resolve(paths().source.sass, '**/*.scss'))
.pipe(sass(sassOptions).on('error', sass.logError))
.pipe(gulp.dest(path.resolve(paths().source.css)))
})
function watch() {
const watchers = [
// ...
{
name: 'SASS',
paths: [normalizePath(paths().source.sass, '**', '*.scss')],
config: { awaitWriteFinish: true },
tasks: gulp.series('pl-sass')
},
// ...
];
// ...
}
// gulpfile.jsgulp.task('pl-assets', gulp.series(
'pl-copy:js',
'pl-copy:img',
'pl-copy:favicon',
'pl-copy:font',
'pl-sass',
'pl-copy:css',
'pl-copy:styleguide',
'pl-copy:styleguide-css'
),
function (done) {
done();
}
);
// .gitignore
/source/css/style.css
$ git rm --cached source/css/style.css
$ git add source/css/style.css
$ git commit "removed style.css from tracking"

Avoiding pattern scaffolding clashes

$ npm install -s gulp-concat
// gulpfile.jsconst concat = require('gulp-concat');
// gulpfile.js// CSS Copy base style
gulp.task('pl-copy:css:style', function () {
return gulp.src(normalizePath(paths().source.css) + '/style.css')
.pipe(gulp.dest(normalizePath(paths().public.css)))
.pipe(browserSync.stream());
});
// CSS Concat and copy pattern-scaffolding
gulp.task('pl-copy:css:scaffolding', function () {
return gulp.src(normalizePath(paths().source.css) + '/*pattern-scaffolding*.css')
.pipe(concat('pattern-scaffolding.css'))
.pipe(gulp.dest(normalizePath(paths().public.css)))
.pipe(browserSync.stream());
});
// gulpfile.jsgulp.task('pl-assets', gulp.series(
'pl-copy:js',
'pl-copy:img',
'pl-copy:favicon',
'pl-copy:font',
'pl-sass',
'pl-copy:css:style',
'pl-copy:css:scaffolding',
'pl-copy:styleguide',
'pl-copy:styleguide-css'
),
function (done) {
done();
}
);
// gulpfile.jsfunction watch() {
const watchers = [
// ...
{
name: 'CSS',
paths: [normalizePath(paths().source.css, '**', '*.css')],
config: { awaitWriteFinish: true },
tasks: gulp.series(['pl-copy:css:style', 'pl-copy:css:scaffolding'], reloadCSS)
},
// ...
],
// ...
}

SASS libraries and last few bits

@include "foundation";
@include "ui-patterns";

Validating the workflow and final notes

Developing the system

Developing the actual Design System

Buildit @ Wipro Digital

We build software. We build teams. We build new ways of working. We build better organisations.

Matteo Pescarin

Written by

Empowering teams. Crafting websites with Web Standards.

Buildit @ Wipro Digital

We build software. We build teams. We build new ways of working. We build better organisations.