Gridsystem
För att komponenterna ska få ett enhetligt beteende måste du följa styleguidens brytpunkter. Du kan därför välja vilket gridsystem du vill men vi rekommenderar att du använder Bootstrap grid.
Bootstrap inte en del av Styleguiden
Tidigare låg version 4.0.0 av Bootstrap grid som en del av styleguidens CSS, detta har vi tagit bort eftersom vi inte vill tvinga våra användare att använda Bootstrap grid utan vill överlåta det valet till utvecklarna i respektive projekt.
Du kan alltså välja vilket gridsystem du vill under förutsättning att du använder styleguidens brytpunkter.
Om du vill fortsätta använda Bootstrap grid går det bra och vi rekommenderar att du går till deras hemsida för hämta ner deras grid till ditt system. Version 4.0.0 finns fortfarande kvar i styleguiden om du vill fortsätta använda det.
Hämta Bootstrap grid version 4.0.0 från styleguiden
<link rel="stylesheet" href="https://cdn.jordbruksverket.se/designsystem/21.0.23/package/dist/assets/bootstrap-grid.css" integrity="sha512-dx7b/5x4u6cAMkBd64rABpsnV1MgqxaJ3bJGlo+x9PaeqTcvBEGdzkkEq/HEy/mtZ9L3ER2Qxme/i2ZITQeKfg==" crossorigin="anonymous">Installera Bootstrap grid 4.0.0 via NPM
Version 4.0.0 av Bootstrap grid ligger även med i styleguidens npm paket och kan läggas in i ditt system med en SCSS import.
styles: [
{
"input": "./node_modules/@sjv/komponentbibliotek/dist/assets/bootstrap-grid.css",
"bundleName": "sjv-bootstrap-grid-css"
},
...Brytpunkter som du bör använda
Extra small | Small | Medium | Large | Extra large | |
Max container bredd | <576px | ≤576px | ≥768px | ≥992px | ≥1200px |
Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
Passar för | Stående mobil | Liggande mobil | Platta | Laptop | Laptop och desktop |
- Antalet kolumner är 12.
- Avståndet mellan kolumnerna är 30px (15px på var sida av kolumnen).
- De går att nästla.
- Det går att bestämma ordningen.
Läs Bootstraps egna information om hur gridsystemet kan användas.
Länk till annan webbplats.
Senast publicerad
Sidansvarig för sidan är Styleguide