Sample is a pattern library. A pattern lays out the design and layout conventions for a brand or group of sites (if you're interested, there's a really good description here). This is Bela's design pattern guide for web, print and visual assets that codifies standards for design and interactive behaviour, as well as demonstrating the style and conventions in which these should be written.
To look at the contents of this pattern library you can click here to launch it in your browser. You can also view it locally by doing the following:
- Fork this repo.
- Open
src/index.htmlin a browser
Web standards, dependencies and libraries change all the time. If you notice something wrong or out of date, please log an issue.
If you would like to develop this library and make a pull request, do the following:
- Clone this repo.
- On the command line, navigate to the root of this repo and run
npm install. This installs all the dependencies needed to compile the sass workflow and give you access to thegulpfunctionality. - Design, write and test your components. Use
gulp watchon the command line to automatically build the site as you go and reload your browser. - Make a pull request for review.
Sample uses gulp, a program that automates the mashing together of the scss components. At the root of the repo is the gulpfile.js file that tells gulp what to do. As of September 2019 this is Gulp 4.0 compliant.
At the root of this repo is a src/ file. This is where the library lives.
gulp takes the scss files from src/scss, mashes them into a single css file (called bela-sample.css), and places this file in src/css.
Gulp workflow; file structure; scss components; base js.
Updated components; added accent colours
Gulp 4.0 workflow; rolled in scss from IDE upgrade; added product logos; updated components; updated layout to reflect current useage.