Phase2 Brand Stylekit
This has two main use cases:
- To be installed as a
npmdependency in other projects and used in scss files via
@import()to be able to use Phase2 brand colors, typography, etc.
- Clone this repo, and work on the styles for others to use in option 1. The best way to demonstrate the design system that is available via CSS is with Pattern Lab in our opinion, so that is included here (though not in option 1).
npm install --save phase2-brand-stylekit
Assuming you have a
scss/ folder next to
node_modules; in the
scss/style.scss file you would include:
After importing it into your scss, you'll have access to variables and mixins that you can use. This will not generate any CSS by simply including; you still need to use the mixins and variables in your desired CSS selectors.
Documentation for use can be found in these two places:
Using this repo's Pattern Lab
After cloning the repo and
cd-ing into it:
npm install npm run setup npm start
pattern-lanb/source/_patterns/- contains all Pattern Lab templates and the majority of the Sass files.
scss/- Sass files that aren't really tied to a component, so not in the above location.
images/icons/src/- all SVGs here are combined into font icons and have classes and Sass mixins made for each based on file name. See
atoms/images/iconsin Pattern Lab.
npm run compile
Start up watches and local server after compiling:
npm run start # or `npm start`
Simply pushing to
master will compile and deploy the site to http://brand.phase2technology.com/patternlab/public/