Layout

Styleguidens layoutsystem består av flera färdiga moduler som fungerar tillsammans. Det finns moduler för de vanligaste layouterna. Eftersom modulerna passar ihop och behåller mellanrummet mellan sig blir layouten enhetlig och responsiv.

Innehållet i layoutsystemet

• Containerklasser används för att definiera huvudlayouten och sektionerna i en layout.
• Flexboxklasser används för att definiera container- eller innehållsstruktur med hjälp av css-flexboxsystemet.
• Gridklasser används för att definiera container- eller innehållsstruktur med hjälp av css-gridsystemet.
• Gapklasser används för att definiera avståndet mellan layoutblocks.
• Justeringsklasserna används för att justera innehållet horisontellt eller vertikalt.

Det finns också flera färdiga mönster du kan använda för en responsiv layout.

Hur du använder layoutsystemet

Med layoutsystemet kan du bygga upp innehållet på din sida genom att kombinera olika moduler. Du kan till exempel dela upp utrymmet i ett antal kolumner med hjälp av en gridlayout och sedan kan du använda inlinelayout och innehållslayout för att påverka placeringen av innehållet i respektive kolumn. Du kan kombinera de olika moduler så att de placeras bredvid, under, över eller i varandra.

Det ska vara enkelt att använda layoutsystemet. Vad behöver du för information för att kunna använda layoutsystemet? Hör av dig till styleguideteamet och berätta för oss!