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.

Använda layoutsystemet

Först väljer du container och därefter kan du 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 moduler så att de placeras bredvid varandra men de kan också placeras i varandra.

Välj container först

Containern är den grundläggande layoutmodulen. Den bestämmer maximala bredden på inneållet och ser till att avståndet är konsekvent mellan det övriga innehållet.

Container

Modulen har marginaler på sidorna.

Fullbreddscontainer

Modulen täcker hela sidans bredd.

Gridlayout

Du kan dela upp utrymmet i containern i flera kolumner. Du kan också lägga flera rader med kolumner under varandra så att du delar upp utrymmet i ett tvådimensionellt rutnät. Den vänstra kolumnen ligger alltid i linje men containerns vänstermarginal och den högra kolumnen ligger alltid i linje med containerns högermarginal. Bredden på på varje kolumn beror på hur många kolumner du väljer. Alla kolumner är lika breda och avståndet mellan varje kolumn är lika stort.

Antalet kolumner som visar på användarens skärm beror på brytpunkten.

Två kolumner

Tre kolumner

Fyra kolumner

Här ska vi lägga till info om hur man bestämmer inbakat beteende för brytpunkter