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

Sidpanel

Modulen sidpanel delar upp utrymmet i två delar där den mindre delens bredd är fast medan den stora delen upptar det återstående utrymmet.

Media

Modulen media används när olika typer av innehåll som hör ihop behöver placeras tillsammans. Det kan till exempel vara en bild och bildtext eller rubrik, text och film.

Ikon

Modulen ikon används för att kombinera en text med en ikon. Därför är avståndet mellan de två delarna litet. Det går inte heller att stapla innehåll vertikalt.

Viktad layout

Modulen delar in utrymmet i två delar, där en del består av en tredjedel av utrymmet och en del består av två tredjedelar av utrymmet.

Centrerad

Modulen centrerar innehållet och begränsar bredden till 80 tecken. Det är den bredd som rekommenderas utifrån tillgänglighet.

Inlinelayout

Inlinelayout delar in utrymmet i olika stora delar. Modulen är dynamisk och låter bredden på modulen påverkas av delarnas bredd på det innehåll du placerar i modulen.

Vertikal

Modulen placerar alla delar i utrymmet vertikalt, det vill säga ovanpå varandra. Avståndet mellan alla delar är konsekvent.

Horisontell

Modulen placerar alla delar i utrymmet horisontellt, det vill säga bredvid varandra. Avståndet mellan alla delar är konsekvent.

Senast publicerad

Sidansvarig för sidan är Styleguide