Heading styles

Dit is een h1

Dit is een h2

Dit is een h3

Dit is een h4

Dit is een h5

Dit is een h6

Paragraph styles

text/regular/medium We maken dingen die beter werken en langer meegaan. Onze producten lossen echte problemen op met een strak ontwerp en eerlijke materialen.

text/small/normal We maken dingen die beter werken en langer meegaan. Onze producten lossen echte problemen op met een strak ontwerp en eerlijke materialen.

Breakpoint regels

We werken mobile first! Het Shopify Horizon thema is grotendeels mobile first gebouwd. Dit wil zeggen dat je standaard op mobiel begint met het bouwen van je componenten/secties. Vervolgens ga je dus door het gebruik van @media(min-width....) je styling aanpassen waar nodig voor de grotere schermen.

Let op! @media(max-width: 749px) gebruiken we alleen voor uitzonderingen: dingen die alleen op mobiel anders moeten zijn.

Tablet breakpoint: @media(min-width: 750px)

Desktop breakpoint: @media(min-width: 1024px)

Container regels

In horizon zijn de containers al geregeld in de sections. Je kan hiervoor kiezen voor "Page" of "Full". Bij "Page" wordt dus de juiste breedte gebruikt en dus een container toegepast en bij "Full" wordt de hele breedte gebruikt. Zie bijvoorbeeld de thema instellingen van deze custom section ;)

Border radius en spacing

We hebben 2 variabelen om een border-radius of om een spacing mee te bepalen. Dit zijn:
--sm-border-radius
--spacing

Beide staan gelijk aan 16px. Om dit goed te gebruiken gaan we rems in css toepassen. (Zie documentatie). Het komt erop neer dat als je een spacing van 24px nodig hebt dat we gaan rekenen vanuit 16px. Dus in dit geval is 24px gelijk aan 1.5rem. Hetzelfde geldt voor de border-radius.

Kleur variabelen

De onderstaande kleur variabelen kunnen gebruikt worden in de CSS. (Bij voorkeur eerst de color schemes checken).

Algemene kleuren

Background: --color-background
Text: --color-foreground
Headings: --color-foreground-heading
Links: --color-primary
Hover links: --color-primary-hover
Borders: --color-border
Shadow: --color-shadow

Primary button

Background: --color-primary-button-background
Text: --color-primary-button-text
Border: --color-primary-button-border
Hover background: --color-primary-button-hover-background
Hover text: --color-primary-button-hover-text
Hover border: --color-primary-button-hover-border

Secondary button

Background: --color-secondary-button-background
Text: --color-secondary-button-text
Border: --color-secondary-button-border
Hover background: --color-secondary-button-hover-background
Hover text: --color-secondary-button-hover-text
Hover border: --color-secondary-button-hover-border

Input velden

Background: --color-input-background
Text: --color-input-text
Border: --color-input-border
Hover background: --color-input-hover-background

Variant picker (default state)

Background: --color-variant-background
Text: --color-variant-text
Border: --color-variant-border
Hover background: --color-variant-hover-background
Hover text: --color-variant-hover-text
Hover border: --color-variant-hover-border

Variant picker (geselecteerde state)

Background: --color-selected-variant-background
Text: --color-selected-variant-text
Border: --color-selected-variant-border
Hover background: --color-selected-variant-hover-background
Hover text: --color-selected-variant-hover-text
Hover border: --color-selected-variant-hover-border

Kleur schema's

Hieronder de meest gebruikte kleur schema's

Dit is schema 1

We maken dingen die beter werken en langer meegaan. Onze producten lossen echte problemen op met een strak ontwerp en eerlijke materialen.

Shop nu Shop nu Shop nu

Dit is schema 2