Grunndesign 2.0 CSS variabler

Nedenfor en liten forklaring på hvordan CSS-variabler defineres i kundens ulike stilsett for å gi dem deres eget design.
Se lenger ned for en mer komplett oversikt over alle variablene og en ca-beskrivelse av hva de gjør..

Skroll ned til oversikt over variablene

Variablene fordeler vi normalt i 2 ulike filer pr. nettsted / konsolidering for ordens skyld.

I det ene ligger alt av "designinnstillinger" og i det andre ligger alle "skins" (farger). Side-temaer (som det vanligvis ikke er så mange av, kan enten legges i egen fil, eller i en av de to andre. Merk at disse også må importeres.

Nedenfor ser man noen enkle eksempler på hvordan disse to filene kan se ut:

kundenavn.settings.css

 /*Importer aller først de fonter som skal brukes, f.eks:*/
@import url('https://fonts.googleapis.com/css2?familyNoto+Serif'); 
@import url('https://fonts.googleapis.com/css2?family=Overpass')

:root {

   --font-content: "Noto Serif"; /*font for siden som helhet*/
   --font-heading: "Overpass"; /*font for overskrifter/titler*/

   --site-background-color: "#efefef"; /*standard er #fff (hvit)*/

   /*
      Merk at det er en haug med ulike variabler som kan settes,
      men altså kun om man ønsker avvik fra normalen. Se oversikt
      lenger ned.
   */

    --button-radius : 50px;

    /*Eks knappefarge*/
    --skin-bg-button: black;
    --skin-txt-button: white;
    --skin-border-button: black;

}


/* Dersom f.eks et "sidetema" skal ha egne farger, fonter eller annet
 som avviker fra nettstedets innstillinger (eller m24 default innstillinger) 
så hektes disse på css-klasse som  brukes av temaet: */

.theme-red-page {
  --site-background-color: "red";
  --site-font-color: "white";
}

/* NB! temaer må i tillegg importeres via kommentarer */

/* THEME: Red Page
    title: Red Page
    class: theme-overlayheader
    rgb: rgb(255,0,0)
    hex: #ff0000;
    txt: #fff
*/

kundenavn.skins.css

Her defineres et lite sett av css-variabler pr. skin (fargetema som kan påføres bannere, kort, tekstbokser ol.). I tillegg ligger det en kommentar-tag knyttet til hvert skin. Kommentartaggen sørger for at skin kan importeres i Musuem24 admin.


/* X antall skins på denne formen: */


/* SKIN: Black
    title: Black
    class: skin-black
    scope: card,grid
    rgb:  rgb(0, 0, 0);
    hex: #000
    txt: #fff
*/

.skin-black {
    --skin-bg : #000; /*bakgrunn som hex*/
    --skin-rgb: 0 0 0; /*bakgrunn som rgb*/
    --skin-txt : #fff; /*teksfarge*/

    /*Knapper får egne verdier i kontekst av dette skin:*/
    --skin-bg-button : #fff;
    --skin-border-button : #000;
    --skin-txt-button : #000;
}

Overordnede for nettstedet

Bakgrunn og fontfarge for siden:

--site-background-color
--site-font-color
//--site-width: 1440px; //Usikker på om denne kan justeres..

Font-typer på ulike nivåer:

--font-content

Alle andre bruker samme om ikke annet angitt

--font-heading
[--font-banner-title (bug)] (hvis egen fonttype på bannertitler)

Denne bruker font-heading om ikke annet angitt

--font-section:
--font-banner-links:
--font-menu:
--font-megamenu (gjelder kun nivå 1)

Standard luft i rutenett-seksjoner: (kan overstyre med luftinnstilinger pr. seksjon redaksonelt):

--grid-gap-auto:clamp(8px,1.5vw,30px);

Luft mellom kort (kan ikke overstyres redaksjonelt)

--cards-gap: 1em (standard.. clamp?)

FONTSIZES BASE:

//--body-font-size: clamp(16px,1.527vw,20px);
//--card-font-size: clamp(14px, 2vw, 16px);

Ikke sjekket om disse fremdeles unker:

//--site-border-color: #fff; //linjer under bylines etc.

Header/Footer

Farger i site-header i "Lukket" og åpen tilstand (når hamburgermeny åpnes)

Lukket header:

--site-header-background-color: (def:#fff)
--site-header-text-color: (def:#000)

Åpen header (hamburgermeny) (samme som åpen om ikke annet angitt)

--site-header-expanded-color: /*--> --site-header-expanded-text-color: */
--site-header-expanded-background-color:

Hovedlogo (SVG eller evnt img) i header:

--site-header-logo:none | block;
--site-header-logo-width: 160px | auto;
--site-header-logo-margin-top: 0 | verdi;
--site-header-logo-height: auto | verdi;

Fargesetting av logo må i ulke tilstander (f.eks på ulike header-farger) må ses an litt fra case til case da det er ulike måter å fargesette SVG'er på (fill / stroke), og det er heller ikke sikkert logo skal endre farge selv om omgivelse gjør det.

Tekstbasert logo / nettstedsnavn:

--site-logo-fontfamily:
--site-header-name: block | none
--site-header-name-transform: none | uppercase

Ekstra logo (konsolidert) i header:

--header__secondary_logo_height :

FOOTER

--site-footer-background: (farge)
--site-footer-text: (farge)
--site-footer-alignment : left | center

Fokusmeny + Megameny

--focusmenu-background:
--focusmenu-border-radius:
--focusmenu-border:

Disse innstillingene er f.eks akuelle dersom man vil legge en gjennomstiktig bakgrunn bak fokusmeny-området (inkl språkicon,søkeicon og hamburger-icon) i de tilfeller der menyen f.eks havner over media. Typiske på "headeroverlay"-temaer.

.theme-overlay {
--focusmenu-background: rgba(0,0,0,.5);
}

På små skjermer vil denne bakgrunnen da kun omslutte hamburger-iconet da dette da antageligvis vil være det eneste gjenværende iconet i fokusmenyområdet..

Megamenyen er den menyen som åpner seg når man klikker på hamburgersymbolet i en fokusmeny. Den er svært lik vanlig "mobilmeny" men har litt andre innstillinger og litt annerledes plassdisposisjon.

--megamenu-fontsize:
--font-megamenu: (level-1)
--megamenu-fontsize-level-1:

Standard desktopmeny + Mobilmeny

Her er det kun snakk om en og samme meny som vises på helt ulike måter avhengig av skjermstørrelsen.

Fonttype i menyen (dersom noe annet enn standard font for siten)

--font-menu:
--desktop_menu_width (rename!): (med denne kan man f.eks få desktopmenyen mer sentrert..)

TODO: Instillingsbehov for nivå 1 av desktopmeny?

Når menyen vises som "Deskopmeny" (fra 1024px eller 1240px (valgfritt)):

Farger i nivå2 dropdown:
--site-header-submenu-text-color:
--site-header-submenu-background-color:

Mouseover-farger:
--site-header-submenu-text-hover-color:
--site-header-submenu-background-hover-color:

Mobilmeny:

Fargen på den i åpen/synlig tilstand vil være samme som headerens farge i åpen tilstand:

--site-header-expanded-color: /*--> --site-header-expanded-text-color: */
--site-header-expanded-background-color:

Man kan gi nivå2 i mobilmeny en litt annen bakgrunnsfarge om ønskelig:

--menu-mobile-sub-background:

(som standard vil denne være en hvitfarge med 10% opacitet, slik at headerfarge vil få et lysere preg i bak meny nivå 2)

Konsolidert logo / konsolidert linje / Utstillingslogo

Det er mulig å plassere en ekstra logo i headeren. Dette kan være en utstillingslogo eller konsolidert logo, men kun en av delene. Den vises alltid helt lengst til høyre i header helt til den smetter ned i mobil/megameny. Man kan justere størrelsen på logoen:

--header__secondary_logo_height: clamp(60px,9vw,70px)

Dersom behov for bakgrunnsfarge bak slik logo:

--header__secondary_logo_background
--focusmenu-border-radius (todo fikse denne)

Hamburgermeny-knapp

Dersom man f.eks kun har hamburger-meny-knapp i header og det er ønskelig at det står "meny" eller liknede til venstre eller under denne så er det mulig med disse variablene satt f.eks slik:

--menu_toggle: flex;
--menu_toggle_border: 1px solid;
--menu_toggle_border_radius: 40px;
--menu_toggle_padding: 4px 20px;

Knapper

//Buttons:

--button-radius : 0px;
--button-arrow:block; //set to none if no arrow
--button-transform: normal;
--button-font-size:0.85em;
--button-weight:500;

Farger (disse er også ofte angitt i "skins" for å tilpasse knappfarge til skinfarge)

--skin-bg-button : #000;
--skin-border-button : #000;
--skin-txt-button : #fff;

Skins

.skin-klassenavn {

--skin-bg : #ff0000;
--skin-rgb: 255 0 0;
--skin-txt : #fff;
--skin-bg-button : #fff;
--skin-txt-button : #000;
--skin-border-button : #000;

}

Dersom ulike elementer skal ha ulike default-farger (eller faste farger for de

.skin.skin-banner { --variabler }
.skin.skin-card{ --variabler }
.skin.skin-contentbox { --variabler }

Ting som angis her kan ikke overstyres redaksjonelt da det ikke er noe "skin"-velger på disse modulene:

.skin-employee { --variabler }
.skin-digitaltmuseum { --variabler }
.skin-kulturpunkt { --variabler }
.skin-person { --variabler }

Bannere: utseende og default innstillinger

En del av disse innstillingene vil også påvirke sideliste-elementer når de vises som "bannere".

--banner-radius: (graden av avrunde hjørner)

/*HVis man ønsker å gjøre veldig mye rart med bannere:*/

--banner-border:
--banner-box-shadow: (skygge)
--banner-drop-shadow: (skygge)
--banner-padding: (hvis polarioid marg i bannere)

Fonttype, fontvekt (auto) og plassering av tekst (auto)

--banner-title-font (eller font-banner-title?):
--banner-title-weight: (auto tykkelse f.eks 500)

Overstyring av spennet for de ulike bannerstørrelsenes default-fontstørrelser:

//--banner-title-small: clamp(20px, 1.805vw, 26px);
//--banner-title-medium: clamp(22px, 2.222vw, 32px);
//--banner-title-medium-large: clamp(22px, 2.64vw, 42px);
//--banner-title-large: clamp(32px,4.31vw, 62px);
//--banner-title-xlarge: clamp(32px, 5.54vw, 82px);

Alle default størrelser kan økes med 20% eller minskes med 10% redaksjonelt.

Gjennomsiktighet ved "box" i banner:

--special-opacity:

Nettsted inni en container

// INNER (content): (designvarant)
Med disse variblene er det mulig å ramme inn nettstedet:

Ytre bakgrunn:
--site-background-color: black;

Indre:
--site-content-width: 1440px;
--site-content-margin: 0 auto;
--site-content-background: white
--site-content-box-shadow : 0 3px 12px rgb(0 0 0 / 32%), 0 3px 38px rgb(0 0 0 / 43%);
--site-content-border : 1px solid #000;

Kort (arrangementskort)

//CARDS

--cards-gap: 1em; (Luft mellom kort)

Divers muligheter til å påvirke kortenes visuelle uttrykk:

--card-border-padding: 0px;
--card-content-padding: 1em 0.75em .5em .75em;
--card-border-radius: 5px;
--card-border-radius-media: 3; //radius - padding
--card-box-shadow: 0 1.5px 4px rgb(0 0 0 / 12%), 0 1.5px 3px rgb(0 0 0 / 6%);
--card-border: none; //eks. 4px solid;
--card-border-color: none; //eks #333;

// Faste bildeformater i kort?:

--cards-media-aspect-ratio: 3/2;
--cards-media-position : center;
--cards-media-object-fit: contain;
--cards-media-object-contain-position : center; //TODO: remove this
--cards-media-object-contain-background: rgba(0,0,0,0.5);

Mediamodul / bilder

Store bilder:

--media-border-radius:5px;

--media-bg-default : #21262f;

Galleri - AUTO:

--media-autogrid-gap: 1px;

--media-autogrid-background: black;

--media-autogrid-radius: 8px;

--media-autogrid-padding: 8px;

Rutenett:

--media-grid-border-radius:10px ;

--media-grid-background:black;

--media-grid-gap:1em;

--media-grid-item-radius:10px;

Artikkeltitler, seksjonstittel mm.

Seksjonstitler:

--font-section: (bruker font-heading eller font-content hvis ikke satt) (fontfamilie)
--section-title-size: 2.25em
--section-title-mobile-size: 1.75em;
--section-title-weight: 500;
--section-title-transform; unset;

Artikkeltitler og ingress: mm.:

//should be minimum 1px to avoid collapsing margins
//--article__body-padding : 1em;

//ARTICLE (Content)
//--article-h1-margin-top : .75em;
//--article-h1-margin-top : .75em;
//--article-h1-margin-bottom : .5em;

--article-h1-weight : 600;
--article-h1-size: 3em;
--article-h1-mobile-size: 2em;

--article-h2-weight : 500;
--article-h2-size : 1.5em;

//--article-h2-margin-top : 2em;
//--article-h2-margin-bottom : .5em;

//--article-lead-size : 1.1875em;
//--article-lead-margin-bottom : 1em;

//--article-li-links-margin-bottom : 1em;
//--article-li-margin-bottom : .75em;

Ekultur: Kulturpunkt / DigitaltMuseum

Formatet på "kulturpunkt-kort"

--kulturpunkt-ratio : 4/5;

Bakgrunn og tekstfarge på kortene:

.skin-kulturpunkt {

--skin-bg: red;
--skin-txt: #000;

}

.skin-digitaltmuseum {

...

}