colors

In variables.scss, pick your main color in hsl values and play with the lightness and the saturation to get your palette color. You can after play with that color with these three sass functions: lightness(var(--$color), $multiplier) saturation(var(--$color), $multiplier) alpha(var(--$color), $opacity)

primary

hsl()

dark

hsl()

neutral

hsl()

light

hsl()

Typography

You can use a google font fontFamilyName or a local custom font fontCustomName on your main project. Params it in default.pug

google fonts example

Inter

used fonts

Light 300 Italic

regular 400 Italic

Medium 500 Italic

Semi-bold 600 Italic

Bold 700 Italic

unused fonts

Thin 100

Extra-light 200

Extra-bold 800

Black 900

custom fonts example

Raleway

used fonts

Extra-light Italic

Light Italic

Medium Italic

Bold Italic

Extra-bold Italic

Black Italic

Titles

In titles.scss, you can style titles h1, h2, h3, h4, h5, h6 or use class .style-h#{nbr} on it.

H1 title

H2 title

H3 title

H4 title

H5 title
H6 title

Icons

Find here all icons used into your project.
Icons are automatically generate in styleguide.js.
font-awesome material-icons and glyphicon librairies are already included and you can use it with this pug mixin: +icon("nameIcon","nameLibrary").
You can also use a custom svg icon in assets/icons/nameIcon.svg. That will create a sprite.svg that you can call into your pug pages simply this way: +icon("nameIcon").
But first of all, you have to put under here the name of the pages you want to parse.

custom

svg use

No Icons

material-icons

font face

No Icons

font-awesome

font face

No Icons

svg unicode

No Icons

glyphicon

font face

No Icons

svg unicode

No Icons

Breakpoints

In breakpoints.scss, find differents mixins: breakpoints-min($breakpoint) breakpoints-max($breakpoint) breakpoints-between($breakpoint) to play with differents devices points.

Grid

Find in grid.scss, a simple grid system which work with class .grid as a container. Add an additionnal class to it to put the number of wanted columns .col--$numberCol. Inside it, put other children with the class .col. You can nested this system.

columns grid

nested grid

Buttons

The class .btn can be use on a link or a button. Put additionnals classes to style it: .radius .outlined .rounded

button

default

outlined

Tags

As buttons, put additionnals classes to .tag class: .radius .outlined .rounded

default

radius

rounded

icon left

icon right

outlined

radius

rounded

icon left

icon right

Tooltip

Base on the script van11y-accessible-simple-tooltip-aria, you can add any tooltip with the class .js-simple-tooltip. Add an additionnal class to set the position of your tooltip: .tooltip--top .tooltip--right .tooltip--bottom .tooltip--left .tooltip--top-left .tooltip--top-right .tooltip--bottom-left .tooltip--bottom-right. All tooltips are accessible and visible on focus.

Forms

All the forms elements are styled with css only in forms.scss at the exception of input="file" (simple javascript script) and select dropdown. Last ones work with Jquery, and the plugin select2.js. That make those selects entirely accessibles (keyboard navigation, focus...)

Inputs

Success !
Error !

Textareas

Selects

Checkboxes

Radios

Switches

Range

images

Call any jpg, png or webp images like this in your pug files: require(imgDir+"image.ext").src If you want to use a data-uri image, just call it this way: require(imgDir+"image.ext").placeholder Thanks to responsive-loader package in webpack.config.js, we automatically generate the differents images in the good srcset dimensions.
You can also params the quality of your images with ImageminPlugin.

If you add the class .lazyload and replace src attribute by data-src to any images or elements with a background-image in css, you can lazyload those images by using lazysizes script.

html

jpg

image jpg

png

image png

gif

image gif

svg

image svg

webp

image webp

uri

image data-uri

css

jpg

png

gif

svg

webp

uri

srcset

img

example img implementation

picture

example picture implementation

background-image