timwis / design-system

New Platform Design System

Home Page:https://citizensadvice.github.io/design-system

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Design system

New Platform Design System. The styleguide is hosted here: https://citizensadvice.github.io/design-system-testing/

Build & contributing

For any dev related information, including contributing and building locally see the contribution guide.

Using the library

CSS

The distributed package includes both the compiled CSS in dist/lib.css and the SCSS under scss. If you only need the CSS and do not intend to build custom components and layouts using the SCSS variables and mixins then just add lib.css to the <HEAD> of your page.

If you need the variables and mixins then import the top level SCSS file scss/lib.scss. Do not import individual files as you will very quickly run into dependency problems. The styleguide documents that available classes, vars, mixins and functions available.

Haml

Haml partials are also available, import the npm package in your build and reference them as

@citizensadvice/design-system/haml/<partial-name>

You will need to add a lookup path for node_modules, for example add

prepend_view_path(Rails.root.join("node_modules"))

to your ApplicationController. You can then reference the partials in your haml like this

= render partial: "@citizensadvice/design-system/haml/breadcrumb"

About

New Platform Design System

https://citizensadvice.github.io/design-system


Languages

Language:JavaScript 46.1%Language:CSS 44.0%Language:HTML 8.3%Language:Ruby 1.6%