@pickra/css-components

A CSS library and styleguide using SASS, BEM AND Flexbox

Preview the styleguide

Install

npm install @pickra/css-components --save-dev

Usage

Import the css.

@import 'node_modules/@pickra/css-components/dist/css-components';

Import the color variables to use in your app.

@import 'node_modules/@pickra/css-components/src/colors/colors';

The icons are svgs in a javascript module.

Import the svgs.

import 'node_modules/@pickra/css-components/dist/css-components.js';

<!-- OR -->

require('node_modules/@pickra/css-components/dist/css-components');

View the Styleguide via Package

Navigate to the index.html in your node_modules...

node_modules/@pickra/css-components/styleguide/html/index.html

...and open it in the browser; no server needed.

Credit

• svg icons from evil icons
• The styleguide is built with kss-node
• nightwatch is the testing framework
• Accessibility testing via axe-core

Development

Requirements: node 6.0.0 or higher, npm 3.8.6 or higher

• npm run styleguide: Prod build and open the styleguide in the browser
• npm run build: Prod build
• npm run dev: Development mode, watch/rebuild on save

To run the tests

• npm start, serves the HTML
• be sure a build exists, npm run build, before running the tests
• in a different terminal, npm test runs the tests

To run 1 test file, prepend -- -t tests/theTestFileName.js

npm test -- -t tests/index.js

To run 1 testcase, prepend --testcase "name of testcase"

npm test -- -t tests/index.js --testcase "Index sidebar hovered link color-contrast"