Hvordan sette opp nettstedet ditt med CSS-variabler

CSS tilpassede egenskaper, kjent som CSS-variabler, støttes nå av alle store moderne nettlesere. Dette betyr at for prosjekter som ikke er belastet ved å måtte støtte Legacy-nettlesere som Internet Explorer, kan CSS-variabler vurderes - for alle hensikt og formål - trygt å bruke.

Mange utviklere bruker allerede variabler med preprocessorer som Sass eller Mindre som et middel til å redusere koden repetisjon. Native CSS-variabler fungerer i stor grad på samme måte, men krever ikke noe ekstra byggetrinn, kaskade som en vanlig CSS-eiendom, og viktigst, er tilgjengelige på runtime. (For å holde nettstedet ditt kjørt jevnt, vær sikker på at du har valgt riktig Web Hosting. service.)

• Hva er Sass?

Disse fordelene gir innfødte CSS-variabler en kant over sine preprocessor søsken, og åpner døren for utviklere å gjøre mange interessante ting med mye mindre kode. Interessert i null-kodealternativer for nettstedet ditt? Her er vår guide til toppen Nettstedbygger .

I denne opplæringen skal vi utforske hvordan vi kan bruke CSS-variabler for å implementere nettstedet til en mock web app kalt NotaPP. Dette vil innebære å skrive CSS. og Javascript. For å tillate brukeren å endre fargevalget og bytte mengden kolonner som vises. Vi vil da utnytte nettoppringet API for å sikre at eventuelle endringer lagres for fremtidige økter.

Få opplæringsfilene

Første ting først, last ned prosjektfilene fra Webdesignerens filsilo (utgave 264). Merk: Første gangs brukere må registrere deg for å bruke filsilo.

01. Sett opp arbeidsområdet

I den / Nettsted-mal Katalog Du finner den statiske NoteAPP-nettsiden der vi skal implementere Website Theming ved hjelp av CSS-variabler og Web Storage API. Åpne katalogen i din foretrukne tekstredigeringsprogram.

02. Sett opp våre CSS-variabler

I Main.css , du finner mye av prosjektets CSS. På toppen, opprett en blokk rettet mot rot pseudo-klasse. Innenfor det definerer variabler som i snippeten nedenfor. Denne rotblokken inneholder globale variabler som vil kaskade ned gjennom vår stilark som en hvilken som helst vanlig CSS-eiendom.

: Root {
  - Beskrivelse: # 2f353e;
  --Secondary: # 2B9BCA;
  --Triary: # F3583F;
  - Nedsatt: # E0E1E2;
  - Konkurransen: #FFFFFF;
} 

03. Bytt farger med variabler

Gå gjennom stilarkene, enten manuelt eller ved å finne / erstatte, og bytt eventuelle statiske fargeheksskoder med deres tilsvarende variabel fra rotblokken. For å gjøre dette, bruk var Funksjon og pass variabelens navn. Dette forteller at nettleseren refererer til den variable verdien. For eksempel:

 .c-header {
  bakgrunnsfarge: var (- primær);
  farge: var (- quinary);
} 

04. Finn inline SVG for ikoner

Åpen index.html. Og en av de første tingene du merker er et stort SVG-element. Dette inneholder stiene for alle sidens ikoner, hver innpakket i et symbolelement, og gitt en unik ID. Disse symbolene refereres deretter når det er nødvendig med bruk Element, som gir mulighet for gjenbruk av ikoner uten duplisering av SVG-kode.

05. Legg til CSS-variabler til SVG

En fordel ved å bruke inline SVG i stedet for en .svg-fil er at CSS kan få tilgang til sin interne struktur. Dette betyr at så kan våre CSS-variabler (sjekk nettleserstøtte her ). I index.html. , Bytt SVGs stilblokk med koden nedenfor. Nå er hver av SVGs farger knyttet til verdiene til våre CSS-variabler.

 & lt; Style & gt;
  .hoved {
  fyll: var (-primary, # 2f353e);
  }
  .secondary {
  fyll: var (-secondary, # 2b9bca);
  }
& lt; / style & gt; 

06. Opprett en kolonn variabel

Vi kan også bruke CSS-variabler for andre egenskaper enn farge. Opprett en ny variabel i rotblokken, ring den kolonner , og gi den en verdi på 3. Dette bør samsvare med standardverdien til Kolonner UI-komponent på siden. Når funksjonell, vil denne komponenten bytte antall kolonner.

: Root {
  - Beskrivelse: # 2f353e;
  --Secondary: # 2B9BCA;
  --Triary: # F3583F;
  - Nedsatt: # E0E1E2;
  - Konkurransen: #FFFFFF;
  --Columns: 3;
} 

07. Implementer en kolonner veksle

Bruke vår nye kolonnervariabel og Calc () Funksjon, vi vil nå beregne hvor bredt hver notatkomponent skal være for å skape riktig antall kolonner. For eksempel, hvis kolonner er satt til 4, bør hvert notat ha en bredde på 25%.

 .c-notat {
  Bredde: Calc (100% / Var (- Kolonner));
} 

08. Legg til JS-klasser og datakiltributter

Når du bruker JS-oppførsel til et DOM-element, krok inn i den via en klasse med et JS-prefiks. Dette dekker de funksjonelle aspektene av et element fra CSS-ene. La oss legge til en JS-oppdateringsvariabel klasse til alle farge- og radioinnganger, så vel som a Data-Attributt referer til den tilsvarende variabelen for å oppdatere.

 & lt; input type = "farge" verdi = "# 2f353e"
klasse = "js-update-variabel U-skjult-visuelt"
Data-variabel = "Primær" & GT; 

09. Legg til JS for å oppdatere CSS-variabler

Åpen main.js. og legg til koden nedenfor. Disse løkkene gjennom alle våre JS-oppdateringsvariabel Inngang og legger til logikk, så på endring, er variabelen som er referert til i sin datariabel-attributt oppdatert med inngangsverdien. Fargeprøven og kolonneskiftet skal nå fungere!

 var vartrig = dokument
.QuerySalgicesAlle (". JS-oppdateringsvariabel");
for (var I = 0; i & lt; vartrig.length; i ++) {
Vartrig [i]
.Addeventlistener ("Endre", funksjon () {
Document.documentselement.Style.
.SetProperty ("-" + this.dataset.Variable,
this.value);
});
} 

10. Fest en JS-klasse til Lagre-knappen

Det er fornuftig å bare lagre brukerens fargevalg når de klikker på Lagre-knappen, da det tillater dem å eksperimentere med temaer så mye som de vil uten å automatisk overskride den nåværende. For å starte, legg til .js-lagringsfarger til Lagre knappen for å fungere som vår JS krok.

 & lt; knappeklasse = "C-knapp js-lagringsfarger"
Data-modal = "JS-modal" data-modal
-Content = "JS-farger-modalinnhold" & gt;
Lagre & lt; / button & gt; 

11. Lag farger array

Tilbake i main.js. , erklære en ny variabel kalt farger Og tilordne det en ny matrise som inneholder alle fargevariablene vi vil lagres når lagringsknappen er klikket.

 var farger = [
  "hoved",
  "Sekundær",
  "Tertiary",
  "Kvaternær",
  "quinary"
]; 

12. Bygg Save Button Event Listener

Under farger array, opprett en klikk hendelse lytter for JS-Save-Colors klasse som vi tidligere har lagt til Lagre-knappen. Inne i det skaper en ny variabel kalt htmlstyles. og tilordne det de beregnede egenskapene til Root HTML-elementet. Vi vil bruke dette til å få tilgang til våre CSS-variabler.

 Dokument.QuerySelector (". JS-Save-Colors")
.Addeventlistener ("klikk", funksjon () {
var htmlstyles = vindu
.getComputedstyle (dokument
.QuerySelector ("HTML")),
}), 

13. Opptak CSS-fargevariabler

Deretter, i hendelseslisten, opprett en ny variabel kalt Colourstosave. og tilordne det et tomt objekt. Deretter lager du en TIL Loop med den farger array fra trinn 11. Innenfor det vil vi legge til en komplett nøkkel / verdi oversikt over variablene som er nevnt i farger array til den Colourstosave. gjenstand.

 Array til "ColourStosave" -objektet.
Colourstosave = Nytt objekt;
for (var i = 0; i & lt; colours.length; i ++) {
Colourstosave [farger [i]] = htmlstyles
.getpropertyValue ("-" + farger [i]);
} 

14. Send Colourstosave til LocalStorage

Nå har vi alle fargevariablene som er lagret i Colourstosave. , Vi sender den til en komponent i nettoppringet API som heter LocalStorage. Dette er i hovedsak et objekt som fortsetter over økter. Vi kan lagre andre objekter i den med sin Setitem () metode. La oss sende den vår Colourstosave. gjenstand.

 LocalStorage.Setitem ("farger",
JSON.Stringify (Colourstosave)); 

15. Legg til en JS-klasse i kolonner

I tillegg til farger, vil vi også sørge for at vårt valgte kolonner nummer også vedvarer på tvers av økter. Det første skrittet mot dette ville være å legge til js-oppdateringskolonner til alle radioinnganger i kolonnekomponenten.

 & lt; input type = "radio" navn = "kolonner" klasse
= "JS-Update-Variable JS-Update-kolonner
U-skjult-visuelt "verdi =" 1 "
Data-variabel = "kolonner" & gt; 

16. Send kolonner til lokalhandelse

For hver js-oppdateringskolonner , Vi vil neste tilordne hendelseslyttere for å se etter endringer. På deteksjon sender vi da den nåværende verdien av kolonner variabel til lokal lagring , igjen med det Setitem () metode. I motsetning til farger, trenger vi ikke å stryke denne verdien, da det ikke er et objekt.

 var colinputs = dokument
.QuerySalgicesAlle (". JS-Update-Columns");
for (var i = 0; i & lt; colinputs; i ++) {
Colinputs [i] .Addeventlistener ("Change",
Funksjon () {VAR HTMLSTYLES = Vindu
.getComputedstyle (dokument
.QuerySelector ("HTML"));
LocalStorage.Setitem ("kolonner",
htmlstyles.getpropertyValue ("- kolonner"));
});} 

17. Håndter nye økter

Hvis brukeren returnerer etter at vi tidligere har valgt en farge- og kolonne-preferanse, må vi bygge logikk, slik at denne lagrede data vender tilbake til CSS-variabler. Det første trinnet er å definere en Domcontentloaded. Event Listener, og deretter en hvis uttalelse for å sjekke for eventuelle lagrede data i lokalhandlingen ved hjelp av sin getitem () metode.

 Document.AddeventListener
("Domcontentloaded", funksjon () {
hvis (lokalstorage.getitem ("farger")) {
}
hvis (lokalstorage.getitem ("kolonner")) {
}
}); 

18. Endring av fargevariabler

I fargene hvis uttalelse, opprett en ny variabel kalt SavedColours. og tilordne det verdien av et analysert fargerobjekt fra lokal lagring . Bruker en FOR I Loop med. SavedColours. , Ta tak i hver farge nøkkel / verdi par og legg den til Root HTML-elementet som en CSS-variabel.

 var savedcolours = json.parse
(lokalstorage.getitem ("farger"));
for (farge i savedcolours) {
Document.documentselement.Style.SetProperty
("-" + farge, savedcolours [farge]); } 

19. Samle kolonnevariabler data

Før vi kan endre kolonnens variabel, må vi først gripe referanser til de lagrede dataene i lokal lagring og også radioinngangene i Kolonner komponent. Sistnevnte er slik at vi kan oppdatere sin tilstand for å sikre at riktig nummer er forhåndsvalgt.

 var kolonner = lokalstorage
.getitem ("kolonner"),
kolonneTriggers = dokument.
QuerySelectorAll (". JS-oppdateringskolonner"); 

20. Endre variabel og stat

Endelig oppdaterer vi kolonnene CSS-variabelen med sin lagrede lokal lagring motpart og angi den kontrollerte attributtet til den aktuelle radioinngangen i Kolonner komponent til sant. De Kolonner - 1 er å kompensere for det faktum at kolonnene Nodelist er null-basert.

 Document.documentselement.Style
.SetProperty ("- kolonner", kolonner);
kolonneTriggers [kolonner - 1] .Kontrollert = sant; 

21. Test det ferdige produktet

Det er det! Alt på Mock NoSeApp-siden skal nå fungere. Du kan lage ditt eget fargevalg ved å klikke på fargene og deretter forplikte det til lokal lagring via Lagre-knappen. Hvis du vil bytte mengden kolonner som vises, klikker du på riktig nummer i kolonnekomponenten.

Og husk, det er alltid verdt å oppgradere din skylagring foran et nytt prosjekt, så det kan håndtere filene du kaster på den.

Denne artikkelen opprinnelig dukket opp i Web Designer Magazine Issue 264. Abonner her .

Les mer:

• 15 Virkelig nyttig Responsive Web Design Tutorials
• Hvordan komme i gang med Sass
• 7 tips for å administrere farge bedre på nettet