Welcome to the styleguide.
It provides base styles and all the HTML (HBS) / CSS (SCSS) components used in the website.
A styleguide fosters and offers many advantages :
The styles use a customised Bootstrap4 theme to do most of the heavy lifting. The Bootstrap4 CSS is then cascaded through further style rules to enhance and increase the amount of elements, as well as bring them further inline with the brand
Links to the examples of all interactive Pages, Blocks, and Widgets can be found the Sidebar.
Use the technique of Mobile First to create the components/widgets and pages.
Always start with the classes relates do the smaller screens, Example
Incorrect: .col-md-6.col-xs-12 .col-xs-12.col-lg-6.col-md-4
Avoid mixing elements with grid classes and other component classes
Start using elements already created on bootstrap instead create new ones
Use the grid classes to orders and change the orders of the elements, but avoid too many changes in the same page.
This project uses SUIT CSS with camelCased naming pattern.
SUIT CSS relies on structured class names and meaningful hyphens (i.e., not using hyphens merely to separate words).
This helps to work around the current limits of applying CSS to the DOM (i.e., the lack of style encapsulation), and to better communicate the relationships between classes.
One of the simplest ways of writing readable and maintainable code is using proper, consistent formatting. For all CSS, use:
This results in our code appearing identical across platforms.
Add CSS through external files, minimizing the number of files, if possible. It should always be in the "head" of the document. Use the "link" tag to include, never the @import. Don’t include styles inline in the document, either in a style tag or on the elements. It’s harder to track down style rules.
The general rule for !important tags is that they should never be used, unless for utility classes where the rule will never change. Don’t use !important tags to trump specificity. If needed for hot-fixes, include all CSS in the _shame.scss partial and refactor the right way when time permits.
Typography and font styles used in the project
This project uses Google Fonts
This project uses Google Fonts. Default font is Open Sans. Here are some examples on how to use it:
Heading styles responsive
This icons are generated using Icomoon app.
SVG files are stored within "
Here are some examples:
Form, input elements, radio buttons, checkboxes, and validation styles
Validation classes will be added using a js validation library. Add .has-error to the form-group or form-check The error message appears before the .form-group or .form-check closing tag in a div with .error-message
This styleguide is powered by node-kss along with custom property names when parsing KSS comments.
The scss comments are processed via node-kss and parsed into a json file - ./src/models/cssStyleGuide.json, which is then injected into the styleguide page and used as modal to feed the handlebars template.
It currently doesn't support OOTB node-kss templating thus needs to be used carefully.
There are custom handlebars helpers('./src/helpers/sg*.js') in place to support the custom KSS properties.