Global usages
Pre procesor : SCSS
Framework : Bulma
Font-size unit : HTML base : 16px, then units in REM, eventually EM.
Code formatter: Prettier
To anticipate your front structure, you need the XD files for screens width below :
- 1400px : each pages of the website
- 1920px : one page and any specials blocks
- 1024px : one page and any specials blocks
- Mobile : each pages of the website
NB : The XD font size need to be the reals font-size used on the final website.
Before designers send template to the customer, developers need to check and give contraints.
Default zoom on system :
A user system with a default zoom do no must be forced to small width or lower font-size.
We need to let the user in his configuration to keep accessibilie.
The case is different when we talk about Retina Screen.
Full width / header menu top
| Website center full width |
Technical informations :
- Standard content max width : 1400px
- Menu can have a width of 100% or can be fit to the content to 1400px
- Keep the posibilitie to give a width of 100% for certain blocks (bests practicies is using negative margins)
Sample https://avada.theme-fusion.com/digital-agency/
Full width / left or right header menu
| Menu width 280px | Parent width : 100%;
|
Technical informations :
With this menu type you need to change it position an behviour.
The menu need to be sticky and scrollable.
Sample : https://avada.theme-fusion.com/cleaning-services
Organize your CSS
CSS architecture
Mixin
Extends
A compléter