Blockintroduktion

Demosida för block

Exempel och förklaringar på hur blocken kan användas i Litium.

Sektionsblocket

Sektionsblocket ska alltid ligga ytterst, som det första/yttre blocket, och används för att styra sidans grundlayout.

I sektionsblocket väljer du om innehållet ska: ta hela skärmens bredd (fullbredd), eller ligga inom sidans innehållscontainer (dvs. följa samma maxbredd som övrigt innehåll).

Visning på olika enheter

I sektionsblocket kan du också välja om innehållet ska visas: i både mobil och desktop (standard), endast i desktop (döljs i mobil), eller endast i mobil (döljs i desktop).

Innehåll i sektionsblocket

I sektionsblocket placerar du sedan andra block:

Vissa färdigdesignade block kan läggas direkt i sektionsblocket. Om du vill bygga en friare layout krävs oftast några extra steg, som vi går igenom längre ner.

Sektionsblocket

läggs alltid ytterst för att bestämma om blocket ska ta fulla bredden av skärmen, eller följa sidans "Innehållscontainer"

Här använder vi sektion bred

Sektionsblocket

läggs alltid ytterst för att bestämma om blocket ska ta fulla bredden av skärmen, eller följa sidans "Innehållscontainer"

Här använder vi sektion fullbredd

Grid block

Det här blocket används för att dela upp innehåll i flera kolumner och bygga egna layouter.
Layouten för gridet anges genom att skriva en kommaseparerad serie siffror i ett fält.

Exempel:
Om du vill ha 3 kolumner där den tredje är dubbelt så bred som de två första, skriver du:

1,1,2

Antalet siffror = hur många kolumner som skapas på raden.
Siffrornas värden = kolumnernas relativa bredd i förhållande till varandra.

Det kan sammanfattas med följande formel:

Bredd = Siffra Summan av alla siffror × 100%

Det betyder att 1,1,2 och 2,2,4 ger exakt samma layout, eftersom proportionerna är desamma.

Första kolumnen

Andra kolumnen

Tredje kolumnen

Med detta system har du frihet att skapa ett kolumn-grid precis hur du vill:
Här har vi t.ex: 3,3,2,4,1

Första kolumnen

Andra kolumnen

Tredje kolumnen

Fjärde kolumnen

Femte kolumnen

Innehållscontainer

Blockets syfte är att distribuera mindre komponentet på önskat sätt. Detta block har i sig inte heller något innehållsfält direkt i sig.

Utan ligger oftast som direkt förälder till komponentblocken som vi listar lite längre ner på sidan.

Exempel på saker vi ställer in i innehållscontainern är:

-Horisontell och vertikal placering av innehåll.
-Mellanrum mellan objekt
-Bakgrundsfärg/Bakgrundsbild
-Om innehållet ska vara länkat och vart det ska länka.
-Hur mycket luft innehållet ska ha runt sig.
- Om du vill ha ett fast format på "kolumnen"

Heading block i ett innehållsblock

Nu är vi på nivå 4 – det är här vi faktiskt lägger in vårt innehåll. Alla blocken ovanför har haft som syfte att sätta upp struktur, layout och ramar för hur innehållet ska visas.

För att skapa just den här layouten har vi först lagt till en sektion. I sektionsblocket har vi ställt in att innehållet ska följa sidans innehållscontainer i bredd. Det är också i sektionsblocket vi har satt bakgrundsfärgen, så att bakgrunden går hela vägen ut till kanterna på skärmen, även om själva innehållet är centrerat och begränsat i bredd.

Inuti sektionen har vi därefter lagt till ett gridblock för att få två kolumner: i den ena kolumnen ligger texten du läser nu, och i den andra kolumnen visas bilden.

I den kolumn där du ser texten har vi placerat en innehållscontainer. Den fungerar som en behållare för rubriksblocket ovanför och det här textblocket. Innehållscontainern gör att de hör ihop och att vi kan styra placering, avstånd och inbördes layout för allt innehåll här. I det här fallet har vi valt att centrera innehållet vertikalt i kolumnen och justerat hur mycket luft det ska vara mellan rubriken och brödtexten. Eftersom kolumnen är vertikalt centrerad kommer innehållet här att linjera i höjd med innehållet i den andra kolumnen – förutsatt att även den kolumnen är inställd på vertikal centrering.

Till sist har vi i innehållscontainern lagt in två komponentblock: ett headingblock, där vi styr rubriknivå och utseende, samt ett rich text-block där vi har skrivit all den text du läser just nu.

Komponentblock - Sista nivån

Här nedan ser vi en listning av alla komponentblock som finns att välja mellan. Dessa är själva innehållet i våra "egen designade" blockytor.

När vi kombinerar yttre sektionsblocket med ett grid-block, och innehållscontainers som håller våra komponentblock så kan vi väldigt fritt designa egna layouter för att presentera vårt innehåll.

Vi vet att det blir några steg att sätta sig in i. Men varje blocksteg har ett syfte, och slutmålet med detta är att ge möjlighet att kunna designa sidor på ett friare sätt än att bara arbeta med "färdiga block".

Detta är alltså ett komplement till de färdiga blocken, som i sig är perfekta när vi vill ha ett specifikt utseende på ett block och bara vill fylla i informationen snabbt. Så se detta som ett komplement när vi vill skapa lite friare layouts!

Det som inte syns i exemplen nedan är "spacer blocket". Det är de tomma ytorna mellan blocken nedan och används för att just ge e tom yta av luft. Detta skrivs in med ett pixelvärde som sätter höjden på "mellanrummet" i höjdled mellan blocken.

Tänk också på att det går att nästla Grid -> Innehållscontanier -> Grid -> innehållscontainer också om man vill göra än mer avancerade layouts!

Rubriksblocket

I rubriksblocket styr du vilket semantiskt html element som ska skrivas ut för rubriken, och vilket utseende rubriken ska ha. Detta för att kunna hålla en god rubriksstruktur på sidan.
Här kan du välja om du vill ha H1, H2, H3, H4, H5 eller H6.

Ofta kan det vara så att den semantiska nivån, inte behöver matcha med den designstilen som önskas på rubriken. Därför kan vi även välja vilket utseende rubriken ska ha separat.
Detta gör att vi kan kombinera att skriva ut ett H2 element, men välja stilen av en header-1 till exempel.

Det finns även ett fritextfält för att ställa in färg på rubrik. Detta skrivs som en hexkod. T.ex "#FFFFFF".

Jag är en rubrik från rubriksblocket

Jag är en annan från rubriksblocket

Rich text block

En richtext är egentligen en helt vanlig text editor med möjlighet att formattera text i. Exempel nedan på inställningar

Rubrik i richtext går att sätta i olika nivåer

En editor där texten går att formatera hur man vill. Här kan man t.ex sätta:

vanlig länk

Vänsterställd text

Centrerad text

Högerställd text

Bild block

Blockets enda syfte är att användas om du vill peka ut och visa en bild från mediebiblioteket.

Knapp block

Knappblocket skriver ut en utpekad knappstil från designsystemet. Används som länkar i olika designs där vi vill ha en tydligare klickpunkt än en vanlig textlänk.

I knappblocket kan ni fritt välja mellan alla stilar som används i designsystemet. Förutom de olika knappstilarna vi har, så finns även ett antal olika storlekar att välja mellan. Här nedan ser ni en listning av alla knappar som finns implementerade i designsystemet tillsammans med de olika storlekarna vi kan välja mellan.

Förutom stil väljs även vart knappen ska länka i blocket.

Färdiga block som finns i lösningen

Här nedan visar vi de färdiga block som finns i lösningen.

Tänk på att variationer går att göra genom att lägga till exempel bannerblocket i en fullbredscontainer, i en vanlig container, eller till och med 3 bredvid varandra i ett grid.

Kicker text

En fullbreddsbanner

Här kommer textinnehållet. Denna banner är fullbredd på grund av att den ligger i ett sektionsblock där vi stängt av padding och satt bredden till fullbredd

Kicker text

En fullbreddsbanner

Här kommer textinnehållet. Denna banner är fullbredd på grund av att den ligger i ett sektionsblock där vi stängt av padding och satt bredden till fullbredd