Styleguide

Gridsystem

Den här komponenten är inaktuell men finns kvar på grund av att alla team ännu inte hunnit gå över till att använda styleguidens egna layout. Jobbar du med ett nytt projekt ska du använda layoutmodulerna som finns på sidan Layout. Styleguides layout

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/18.6.1/package/dist/release/assets/bootstrap-grid.css"
      integrity="sha256-eoVPzZnqP5OLfBmnGNDvG+6C+L8wLmo5qrK/DreNRoE="
      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.

@import url("~@sjv/component-library/dist/release/assets/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