THE ELEMENTS AND THE HIERAKI

The Base Style System er et hieraki. Et hieraki for hvilke styles der arves ned gennem systemet. Base style systemet består af en række tekst styles, button styles, form-element styles, spacings (Margin + Padding) etc. Disse base styles bliver brugt i alle modules og module groups, i header og footer, i checkout sider til shoppen etc. Systemet gør, at man kan rette en række styles på en gang når man designer en template eller laver et website til en kunde.

Vi gennemgår på denne side alle elementerne i base styles. Alle base styles redigeres i GLOBAL STYLING i toolet.

indsæt illu med base styles der peger over på de tre forskellige base templates

TEXT STYLES

Hierakiet for text styles starter i LAYOUT SETTINGS i BODY-menuen. Her ændre man font-family og font color for ALLE text styles på sitet. 
Font-størrelser og linieafstand på de forskellige text styles er pre-defineret i menuen TEXT under MODULE DESIGNS i Global Styling. Disse pre-definerede størrelser er optimeret i forhold til hinanden OG de er optimeret til hver af de tre view ports. Så tilret kun de størrelser der er defineret i THE DOGME RULES for hver BASE TEMPLATE.

Herunder er der vist et skema med de forskellige text styles og de pre-definerede størrelser i hver viewport.Type text here

BUTTON STYLES

Hierakiet for Button styles starter ligeledes i BODY. Knap-designet arver automatisk den font der er valgt i BODY. Knappens baggrund styles i BUTTON under MODULES. Submit Button i FORM, også under MODULES, arver automatisk stylingen fra BUTTON. Alle moduler og pages med button-designs (e-commerce modules, checkout flow opages etc. arver som udgangspunkt styling fra BUTTON. I nogle af modulerne er spacing dog ændret, hvilket vil sige, at knappen er gjort en smule mindre.

FORM ELEMENT STYLES

I hierakiet i FORMS (under MODULE DESIGN) gælder det samme som for BUTTONS. Teksterne i FORMS arves som udgangspunkt fra styles i BODY. Disse kan så overskrives i styles under de forskellige tekst-stylings i FORMS. Tekst felter, check boxe, radiobuttons og dropdown menuer styles i FORMS. Disse styles arves automatisk alle andre steder hvor der indgår forms, feks i check out flows i e-commerce.

I Mono Base Styles er alle tekstfelter, check boxe, radio buttons og dropdown menuer pre-designet i hvide og lysegrå farver der passer til de fleste designs. Disse indgår derfor ikke i stylingen i The Dogme Rules.

SPACING FOR ROWS, COLUMNS AND MODULES

For at sikre at alle moduler, columns og Rows skallerer og stacker på de rigtige måder i alle viewports, har vi pre-defineret al spacing. Denne spacing er defineret i LAYOUT SETTINGS under ROWS og COLUMNS. Disse settings indgår IKKE i The Dogme Rules. Vær opmæksom på, at hvis du ændre disse settings har det indflydelse på alle Module Groups samt alle de page templates der indgår i Base Templates. 

Ønsker man at ændre i spacing, så gør det lokalt (på selve siden) og husk at teste i alle viewports!