phase2-brand-stylekit

    1.2.1 • Public • Published

    Phase2 Brand Stylekit

    This has two main use cases:

    1. To be installed as a npm dependency in other projects and used in scss files via @import() to be able to use Phase2 brand colors, typography, etc.
    2. 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).

    Use as npm dependency

    Install

    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:

    @import "../node_modules/phase2-brand-stylekit/scss/core";

    Usage

    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

    QuickStart

    After cloning the repo and cd-ing into it:

    npm install
    npm run setup
    npm start
    

    Orientation

    • 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/icons in Pattern Lab.

    Commands

    Compile everything:

    npm run compile

    Start up watches and local server after compiling:

    npm run start # or `npm start` 

    Deploying

    Simply pushing to master will compile and deploy the site to http://brand.phase2technology.com/patternlab/public/

    Install

    npm i phase2-brand-stylekit

    DownloadsWeekly Downloads

    23

    Version

    1.2.1

    License

    none

    Last publish

    Collaborators

    • evanlovely