New Platform Design System. The styleguide is hosted here: https://citizensadvice.github.io/design-system-testing/
For any dev related information, including contributing and building locally see the contribution guide.
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 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"