Instellen van site-thema met CSS-variabelen

CSS Custom Eigenschappen, algemeen bekend als CSS-variabelen, worden nu ondersteund door alle grote moderne browsers. Dit betekent dat voor projecten die niet belast zijn door oudere browsers zoals Internet Explorer te halen, zoals Internet Explorer, CSS-variabelen, kunnen worden overwogen - voor alle intenties en doeleinden - veilig te gebruiken.

Veel ontwikkelaars gebruiken al variabelen met preprocessors zoals Sass of Minder als een middel om codeherhaling te verminderen. Native CSS-variabelen werken in grotendeels op dezelfde manier, maar vereisen geen extra build stap, cascade zoals een reguliere CSS-eigenschap, en het belangrijkste, zijn beschikbaar op runtime. (Om uw site soepel te laten werken, zorg er dan voor dat u het recht hebt gekozen web hosting onderhoud.)

• Wat is sass?

Deze voordelen geven native CSS-variabelen een voorsprong op hun preprocessor-broers en zussen en opent de deur voor ontwikkelaars om veel interessante dingen met een stuk minder code te doen. Geïnteresseerd in Nero-Code-opties voor uw site? Hier is onze gids naar de top website bouwer ​

In deze tutorial zullen we onderzoeken hoe we CSS-variabelen kunnen gebruiken om website-thema te implementeren in een Mock Web-app genaamd NOTAPP. Dit zal schrijven met schrijven CSS en JavaScript Om de gebruiker in staat te stellen het kleurenschema te wijzigen en de hoeveelheid getoonde kolommen te schakelen. We zullen vervolgens de Web Storage API gebruiken om ervoor te zorgen dat eventuele wijzigingen worden opgeslagen voor toekomstige sessies.

Download de tutorial-bestanden

Eerste dingen eerst, download de projectbestanden van Web Designer's Filesilo (uitgifte 264). Opmerking: de gebruikers van de eerste keer moeten zich registreren om Filesilo te gebruiken.

01. Stel de werkruimte in

In de / Website-sjabloon Directory vindt u de statische NOTAPP-webpagina waarin we website-thema implementeren met behulp van CSS-variabelen en de webopslag-API. Open de map in uw favoriete teksteditor.

02. Stel onze CSS-variabelen in

In main.css , je vindt veel van de CSS van het project. Maak bovenaan een blok gericht op de wortel pseudo-klasse. Binnen het definieert variabelen zoals in het onderstaande fragment. Dit rootblok bevat globale variabelen die door onze stylesheet worden gecascadeerd, zoals elke gewone CSS-eigenschap.

: Root {
  - Producten: # 2F353E;
  --Secundair: # 2B9BCA;
  - Sery: # F3583F;
  --quaternary: # E0E1E2;
  --Quiny: #ffffff;
} 

03. Vervang kleuren met variabelen

Ga door de stylesheet, handmatig of met behulp van Find / Vervang en swap elke statische kleur Hex-codes met hun corresponderende variabele uit het rootblok. Gebruik hiervoor de variëren Functie en geef de naam van de variabele door. Dit vertelt de browser om de waarde van die variabele te verwijzen. Bijvoorbeeld:

 .c-header {
  Achtergrondkleur: Var (- primair);
  Kleur: Var (- Koninklijk);
} 

04. Zoek inline SVG voor pictogrammen

Open index.html En een van de eerste dingen die u opmerkt, is een groot SVG-element. Dit bevat de paden voor alle pictogrammen van de pagina, elk gewikkeld in een symboolelement en een unieke ID gegeven. Deze symbolen worden vervolgens waar nodig waar nodig met de gebruik element, waardoor het hergebruik van pictogrammen zonder enige duplicatie van SVG-code mogelijk is.

05. Voeg CSS-variabelen toe aan de SVG

Eén voordeel van het gebruik van inline SVG in plaats van een .SVG-bestand is dat CSS toegang heeft tot de interne structuur. Dit betekent dit kan onze CSS-variabelen (controleer de browserondersteuning hier ​In index.html , vervang het stijlblok van het SVG met het onderstaande fragment. Nu zijn elk van de kleuren van de SVG gekoppeld aan de waarden van onze CSS-variabelen.

 & LT; Style & GT;
  .Primary {
  Vul: Var (-programma, # 2F353E);
  ​
  .ondergeschikt {
  Vul: Var (-Secundair, # 2B9BCA);
  ​
& LT; / STYLE & GT; 

06. Maak een variabele kolommen

We kunnen ook CSS-variabelen gebruiken voor andere eigenschappen dan kleur. Maak een nieuwe variabele in het rootblok, bel het kolommen en geef het een waarde van 3. Dit moet overeenkomen met de standaardwaarde van de Kolommen UI-component op de pagina. Wanneer functioneel, zal dit onderdeel het aantal kolommen schakelen.

: Root {
  - Producten: # 2F353E;
  --Secundair: # 2B9BCA;
  - Sery: # F3583F;
  --quaternary: # E0E1E2;
  --Quiny: #ffffff;
  - Columns: 3;
} 

07. Implementeer een kolommen-schakelaar

Gebruik van onze nieuwe kolommen Variabele en de Calc () Functie, we zullen nu berekenen hoe groot elk opmerking-component moet zijn om het juiste aantal kolommen te maken. Als kolommen bijvoorbeeld op 4 zijn ingesteld, moet elke notitie een breedte van 25% hebben.

 .c-opmerking {
  Breedte: Calc (100% / var (- kolommen));
} 

08. Voeg JS-klassen en gegevensattributen toe

Bij het toepassen van JS-gedrag naar een DOM-element, haak erin in via een klas met een JS-voorvoegsel. Dit ontkoppelt de functionele aspecten van een element van CSS-exemplaren. Laten we een a JS-update-variabele Klasse voor alle kleur- en radio-ingangen en een Data-attribuut verwijzen naar de overeenkomstige variabele om bij te werken.

 & lt; invoer type = "kleur" waarde = "# 2F353E"
klas = "JS-update-variabele U-verborgen-visueel"
Data-variabele = "primaire" & GT; 

09. Voeg JS toe om CSS-variabelen bij te werken

Open main.js en voeg het snippet hieronder toe. Deze loops door al onze JS-update-variabele Ingangen en voegt Logic toe, dus bij wijziging wordt de variabele waarnaar wordt verwezen in zijn gegevensvariabele kenmerk bijgewerkt met de ingangenwaarde. De kleurstalen en kolomschakelaar zouden nu moeten werken!

 Var Vartrig = Document
.QuerySelectectorAlle (". JS-update-variabele");
voor (var i = 0; i & lt; varentrig.length; i ++) {
Vartrig [i]
.ADDEVENTLIDELENER ("VERANDERING", FUNCTION () {
document.documentelement.style
.SetProperty ("-" + deze.dataset.variable,
this.Value);
​
} 

10. Bevestig een JS-klasse aan de knop Opslaan

Het is logisch om alleen het kleurenschema van de gebruiker op te slaan wanneer ze op de knop Opslaan klikken, omdat ze hen kunnen experimenteren met thema's zo veel als ze willen zonder dat ze automatisch de huidige overschrijven. Starten, toevoegen .js-save-kleuren naar de Opslaan Knop om te functioneren als onze JS-haak.

 & lt; knopklasse = "C-knop JS-Save-Colors"
Data-Modal = "JS-Modal" -gegevensmodal
-content = "JS-Colors-Modal-Content" & GT;
Save & lt; / knop & GT; 

11. Maak kleuren array

Terug in main.js , declareer een nieuwe variabele genaamd kleuren en toewijzen aan het Een nieuwe array met alle kleurvariabelen die we willen worden opgeslagen zodra de opslagknop is geklikt.

 var kleuren = [
  "primair",
  "ondergeschikt",
  "tertiair",
  "Quaternair",
  "KONEER"
]; 

12. Bouw opslaan knop Evenement Luisteraar

Hieronder de array kleuren, maak een klik-gebeurtenisluisteraar voor de JS-Save-Colors klasse die we eerder aan de opslagknop hebben toegevoegd. Binnenkant creëer het een nieuwe variabele genaamd htmlstyles en wijs het toe dat de berekende eigenschappen van het root HTML-element. We zullen dit gebruiken om toegang te krijgen tot onze CSS-variabelen.

 Document.QuerySelector (". JS-Save-Colors")
.ADDEVENTLIDELENER ("klik", functie () {
var htmlstyles = venster
.getcomputedstyle (document
.querySelector ("HTML")),
}), 

13. Record CSS-kleurvariabelen

Maak vervolgens binnen de gebeurtenisluisteraar een nieuwe variabele genaamd colourstosave en wijs het een leeg object toe. Maak vervolgens een VOOR Loop met behulp van de kleuren array vanaf stap 11. Daarin worden we een complete sleutel / waarde-record van de variabelen toevoegen die in de kleuren array naar de colourstosave voorwerp.

 array naar het object 'Colourstosave'.
colourstosave = nieuw object;
voor (var i = 0; i & lt; colours.length; i ++) {
colourstosave [kleuren [i]] = htmlstyles
.GepropertyValue ("-" + kleuren [I]);
} 

14. Stuur Colourstosave naar LocalStorage

Nu hebben we alle kleurvariabelen die zijn opgeslagen colourstosave , we sturen het naar een component van de webopslag-api genaamd LocalStorage. Dit is in wezen een object dat aanhoudt over sessies. We kunnen andere objecten opslaan met behulp van zijn Setitem () methode. Laten we het ons sturen colourstosave voorwerp.

 LocalStorage.Setitem ("Kleuren",
Json.stringify (colourstosave)); 

15. Voeg een JS-klasse toe aan kolommen

Naast kleuren willen we er ook voor zorgen dat ons gekozen kolommennummer ook aanhoudt over de sessies. De eerste stap naar dit zou zijn om toe te voegen JS-update-kolommen naar alle radio-ingangen binnen de kolommencomponent.

 & lt; invoertype = "Radio" -naam = "Columns" -klasse
= "JS-update-variabele JS-update-kolommen
U-verborgen-visueel "waarde =" 1 "
Data-variabele = "Kolommen" & GT; 

16. Stuur kolommen naar LocalStorage

Voor elk JS-update-kolommen , we wijs de gebeurtenisluisteraars vervolgens toe om naar veranderingen te kijken. Bij detectie sturen we vervolgens de huidige waarde van de kolommen variabele aan lokale opslag , opnieuw met behulp van zijn Setitem () methode. In tegenstelling tot kleuren, hoeven we deze waarde niet te strekken omdat het geen object is.

 Var Colinputs = Document
.QuerySelectectorAlle (". JS-update-kolommen");
voor (var i = 0; i & lt; colinputs; i ++) {
Colinputs [i] .ADDEVENTLISTENER ("VERANDERING",
functie () {var htmlstyles = venster
.getcomputedstyle (document
.querySelector ("HTML"));
localstorage.Setitem ("kolommen",
htmlstyles.getpropertyValue ("- kolommen"));
});} 

17. Behandel nieuwe sessies

Als de gebruiker terugkeert na het eerder kiezen van een kleur- en kolomvoorkeur, moeten we logica bouwen, zodat deze opgeslagen gegevens worden teruggedraaid in CSS-variabelen. De eerste stap is om een ​​te definiëren Domcontentloaded evenement luisteraar, en dan een als verklaring om te controleren op eventuele opgeslagen gegevens in LocalStorage met behulp van zijn getitem () methode.

 Document.ADDEVENTLISTENER
("Domcontentloaded", functie () {
if (localstorage.getitem ("kleuren")) {
​
if (localstorage.getitem ("kolommen")) {
​
}); 

18. Wijzig kleurvariabelen

In de kleuren als Verklaring, maak een nieuwe variabele aangeroepen Savedcolours en wijs het toe de waarde van een parsed kleurenobject van lokale opslag ​Gebruik maken van een VOOR IN lus met Savedcolours , Grijp elk kleurensleutel / waardepaar en voeg deze toe aan het root HTML-element als CSS-variabele.

 Var SavedColours = JSON.parse
(localstorage.getitem ("kleuren"));
voor (kleur in savedcolours) {
document.documentelement.style.SetProperty
("-" + kleur, savedcolours [kleur]); } 

19. Verzamel kolomvariabelengegevens

Voordat we de kolommenvariabele kunnen wijzigen, moeten we eerst verwijzingen naar de opgeslagen gegevens in pakken lokale opslag en ook de radio-ingangen binnen de Kolommen component. Dit laatste is dus we kunnen de staat bijwerken om ervoor te zorgen dat het juiste nummer vooraf is geselecteerd.

 Var-kolommen = LocalStorage
.getitem ("kolommen"),
Columntriggers = Document.
QuerySeleSorAlle ("JS-update-kolommen"); 

20. Variabele en staat wijzigen

Ten slotte zullen we de CSS-variabele van de kolommen bijwerken met zijn opgeslagen lokale opslag tegenhanger en stel het gecontroleerde kenmerk van de relevante radio-input in de Kolommen component op true. De Kolommen - 1 is om te compenseren voor het feit dat de kolommen Nodelist is op nul gebaseerd.

 Document.documentElement.style
.SetProperty ("- kolommen", kolommen);
Columntriggers [kolommen - 1] .CHECKED = TRUE; 

21. Test het eindproduct

Dat is het! Alles op de Mock Notarep-pagina moet nu werken. U kunt uw eigen kleurenschema maken door op de monsters te klikken en deze vervolgens aan te gaan lokale opslag via de knop Opslaan. Als u de hoeveelheid weergegeven kolommen wilt uitwisselen, klikt u op het juiste nummer in de kolommencomponent.

En onthoud, het is altijd de moeite waard om je te upgraden cloud opslag Voor een nieuw project, zodat het de bestanden aankan die u ertoe gooit.

Dit artikel verscheen oorspronkelijk in Web Designer Magazine Issue 264. Abonneer hier ​

Lees verder:

• 15 Echt nuttige responsieve webontwerp tutorials
• Hoe je aan de slag met Sass
• 7 tips om kleur beter op het web te beheren