Dokumentation av designmall

CSS/HTML crashcourse

Alla hemsidor är, i grunden, uppbyggda i HTML (HyperText Markup Language). Det är HTML:en som bildar strukturen/skelettet av en hemsida. Detta skelett får sen sin design med hjälp av CSS (Cascading Style Sheets).

Element i HTML är uppbyggda av “taggar”. Det finns oftast en starttagg och en sluttagg:

Rubrik
<h2>Välkommen till oss</h2>

Brödtext
<p>Här har vi en paragraf som innehåller lite text</p>

“Lådor” som byger upp sklettet om omringar olika element
<div>
<p>Paragraf som ligger i en div</p>
</div>

<p class=”text”>Detta är en viktig text!</p>

.text {
color: red;
font-size: 17px;
}

I klassen .text skapar vi design som appliceras på alla de element som har klassen .text. I detta fall kommer texten bli röd (color: red;) och vara 17px (font-size: 17px;) stor.

Ett HTML-element kan ha hur många klasser som helst.
Div-elementet nedan har klassen .cards-wrapper, .w-50 & .card-1.

<div class=”cards-wrapper w-50 card-1″>
<p class=”text”>Detta är en viktig text!</p>
</div>

display: flex; aktiverar Flexbox som gör det enkelt att justera och placera element i en kontainer/div.
flex-wrap: wrap; gör så att alla element alltid har samma höjd.
.cards-wrapper{
display: flex;
flex-wrap: wrap;
}

.w-50, står i sin korthet för “width 50%” vilket innebär att alla kolumner/kort som ligger innan för denna klassen blir 50%. Senare kan vi även se .w-33, w.25 osv. som representerar andra bredder.
.w50 {
width: calc((100% / 2) – 20px);
}

.card-1 är en klass som representerar en individuell design. I koden nedan ger vi en h3:a textstorleken 21px. Alla h3:ord som ligger innanför en div med denna klass kommer få samma textstorlek.
.card-1 h3 {
font-size: 21px;
}

När man namnger en klass är det bra att tänka på att de ska kunna återanvändas så mycket så möjligt. I exemplet ovan kan vi se att namnen ofta beskriver vad dom gör och att de inte är bundna till ett visst innehåll som tjänster/medarbetare/kontakt osv. 

Det är för att jag inte ska döpa en klass till .cards-services som sen även används under kontakt.

<div class=”cards-wrapper w-50 card-1″>
<p class=”text”>Detta är en viktig text!</p>
</div>

När ett element har flera klasser kan man också “para ihop” klasserna i css:en likt nedan:

Som vi kan se står det .cards-wrapper.w-50 vilket i princip innebär att w.50 inte dungerar utan .cards-wrapper. Cards-wrapper gör det möjligt att positionera elementen och .w-50 berättar hur dom ska vara positionernade

För elementet .et_pb_column som har ett mellanrum efter .w-50 så innebär det att detta element ligger innanför elementet med klassen .w-50. Det behöver inte ligga som nästa direkta element men det ligger fortfarande innanför.

Nedan kan vi se hur det ser ut i Divi:

<div class=”et_pb_row et_pb_row_20 cards-wrapper w-50 et_pb_equal_columns”>

Kolumn 1
<div class=”et_pb_column_1_2 et_pb_column et_pb_column_39 et_pb_css_mix_blend_mode_passthrough”>

Textmodul
<div class=”et_pb_module et_pb_text et_pb_text_49 et_pb_text_align_left et_pb_bg_layout_light”>
<div class=”et_pb_text_inner”>

Text = paragraf tagg
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
</div>
</div>

<div class=”et_pb_module et_pb_text et_pb_text_50 et_pb_text_align_left et_pb_bg_layout_light”>
</div>
</div>

Kolumn 2
<div class=”et_pb_column_1_2 et_pb_column et_pb_column_39 et_pb_css_mix_blend_mode_passthrough”>

Textmodul
<div class=”et_pb_module et_pb_text et_pb_text_51 et_pb_text_align_left et_pb_bg_layout_light”>
<div class=”et_pb_text_inner”>

Text = paragraf tagg
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
</div>
</div>

<div class=”et_pb_module et_pb_text et_pb_text_52 et_pb_text_align_left et_pb_bg_layout_light”>
</div>
</div>
</div>

Top-section

På alla top-section sektioner kan man enkelt ställa höjd och bakgrundsbild/video själv.
Det som behövs ställas in är textstorlek, typsnitt och eventuellt max-bredden på brödtexten.

Top-section-1

Innehållet är placerat med CSS för att ligga längst ner till vänster.
För att ändra storleken på h1:

.top-section-1 h1 {
font-size: 50px !important;
line-height: 1.1;
font-weight: 700;
}

För att placera innehållet centrerat till vänster:

.top-section-1 {
display: flex;
flex-wrap: wrap;
align-content: flex-end; byt till align-content: center;
}

.top-section-1 p {
max-width: 550px;
}

Top-section-2

Innehållet är placerat med CSS för att ligga centrerat
För att ändra storleken på h1:

.top-section-2 h1 {
font-size: 80px !important;
line-height: 1.1;
font-weight: 700;
}

.top-section-2 p {
max-width: 800px;
margin: 0 auto;
}

Split-section

Enkel sektion med två kolumner, bild i ena och text i andra. Bilden agerar som en bakgrundsbild men är inlagd som en vanlig bild för att man ska kunna ge en alt-tagg vilket är bra när det kommer till SEO. Det enda man behöver korrigera här är vissa marginaler och eventuellt en bakgrundsfärg.

Standardklasser för Split-section

I grunden används 2 klasser på en split-section:

.split-section – all design för en split-section
.split-content-align-center – gör så att texten ligger centrerat till bilden

Flera klasser som är användbara och ofta paras med split-section:

.reverse – om bilden ligger i första kolumnen (vänster) ska denna klassen alltid finnas med. Den gör så att texten alltid hamnar först när kolumnerna blir 100%.

Korrgera marginalerna på text-kolumnen (standard är padding: 50px)
.pr-0 – padidng-right: 0px
.pl-0 – padding-left: 0px
.pt-0 – padding-top: 0px
.pb-0 – padding-bottom: 0px

Om texten ligger i höger kolumn bör man ha som standard att lägga på klassen pr-0 som gör så att texten sträcker sig hela vägen ut i den gröna sektionen. Annars blir det off-set. Detsamma gäller när texten ligger till vänster, då bör man ha pl-0

pt-0 och pb-0 kan användas när man känner att det är väldigt mycket text och man behöver ta bort de undre och övre marginalerna för att bilden inte ska bli för hög.

Man kan säga att standardklasser förr en split sektion är:
Bild vänster:
split-section split-content-align-center reverse pr-0

Bild höger:
split-section split-content-align-center pl-0

Split med bakgrundsfärg

För en split-setion med bakgrundsfärg behöver man bara ge den gröna sektionen en bakgrundsfärg. Bakgrundsfärgen ska endast vara aktiv på desktop så se till att anpassa responsiviteten på den.
Man behöver inte korrigera några marginaler på en split med bakgrundsfärg (pr-0, pl-0)

Split-alt