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)
title color
hsl()
#
rgb()
title color
hsl()
#
rgb()
title color
hsl()
#
rgb()
title color
hsl()
#
rgb()
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 (long to install with npm install
) 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")
.
You can also use it with a background-image with mixin in _sprites.scss
.
But first of all, you have to put under here the name of the pages you want to parse.
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
Tags
As buttons, put additionnals classes to .tag
class: .radius
.outlined
.rounded
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
Textareas
Selects
Checkboxes
Radios
Switches
Range
images
Call any jpg, png or webp images like this in your pug files: require(PATH_IMGS+"image.ext").src
If you want to use a data-uri image, just call it this way: require(PATH_IMGS+"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](assets/images/image.jpg)
png
![image png](assets/images/image.png)
gif
![image gif](assets/images/image.gif)
svg
webp
![image webp](assets/images/image.webp)
uri
css
jpg
png
gif
svg
webp
uri
srcset
img
![example img implementation](https://via.placeholder.com/912x200.jpg/F4F6FA/bec8db)
picture
![example picture implementation](https://via.placeholder.com/1600x200.jpg/F4F6FA/bec8db)