ACT.md's web pattern library, building on Bootstrap 4 and inspired by Brad Frost's Atomic Design
Our pattern library is organized by target device, and compiled into three outputs:
actstrap-common.css
, used by all devicesactstrap-desktop.css
, used by desktop (i.e. large-screened) devicesactstrap-mobile.css
, used by mobile (i.e. smartphone and tablet) devices
Make sure you're using version 10 of node. Use NVM (https://github.com/nvm-sh/nvm) or the tool of your choice to make that happen
$ npm install --global gulp-cli
$ npm ci install
$ gulp
$ open out/index.html
$ gulp
$ cp out/actstrap-common.css ../act-heka/vendor/assets/stylesheets/
$ gulp watch
$ gulp new-snippet --kind=common --type=molecules --name=fooBarBaz
- Creates empty
scss/common/molecules/_fooBarBaz.scss
- Adds import for above to
scss/common/style.scss
- Creates
snippets/common/molecules/fooBarBaz.html
with starter code (containing instructions)
Options for --kind
:
common
desktop
mobile
Options for --type
:
atoms
molecules
organisms