Kuinka perustaa sivuston teeman CSS-muuttujien kanssa

CSS mukautetut ominaisuudet, jotka yleisesti kutsutaan CSS-muuttujina, tukee nyt kaikki tärkeimmät modernit selaimet. Tämä tarkoittaa sitä, että projekteille, jotka eivät rasittaisi, tarvitsevat vanhoja selajia, kuten Internet Explorer, CSS-muuttujia voidaan harkita - kaikille tarkoituksille ja tarkoituksiin - turvallista käyttää.

Monet kehittäjät käyttävät jo muuttujia esikäsittelijöillä, kuten Sass tai Vähemmän keinona vähentää koodin toistoa. Native CSS -muuttujat toimivat suurelta osin samalla tavalla, mutta eivät vaadi ylimääräistä rakennettua askelta, kaskadi kuin säännöllinen CSS-ominaisuus ja mikä tärkeintä on saatavilla Runtime. (Jos haluat pitää sivustosi sujuvasti, varmista, että olet valinnut oikean sivujen ylläpito Palvelu.)

• Mikä on sass?

Nämä edut antavat alkuperäisille CSS-muuttujille reunan esikäsittelyssä sisaruksillaan ja avaavat oven kehittäjille tekemään paljon mielenkiintoisia asioita paljon vähemmän koodia. Kiinnostaako sivustosi nollakoodi vaihtoehtoja? Tässä on opas huipulle Verkkosivuston rakentaja .

Tässä opetusohjelmassa tutkitaan, miten voimme käyttää CSS-muuttujia panemaan verkkosivujen teeman mock web-sovellukseen nimeltä NoteApp. Tämä sisältää kirjoittamisen CSS ja JavaScript Jotta käyttäjä voi muuttaa värimallin ja vaihtaa osoitettujen sarakkeiden määrän. Sitten hyödyntämme Web-tallennusliittymän API varmistaaksesi, että muutokset tallennetaan tuleviin istuntoon.

Hanki opetustiedostot

Ensimmäiset asiat ensin, lataa projektitiedostot Web Designer's Filesilo (Julkaisu 264). Huomaa: Ensimmäisen kerran käyttäjien on rekisteröitävä käyttää Filesiloa.

01. Aseta työtila

Jssk / Verkkosivusto-malli Hakemisto Löydät staattisen NoEAPP-verkkosivun, jossa toteutamme verkkosivuston teemaa CSS-muuttujien ja Web-tallennusliittimen avulla. Avaa hakemisto haluamallasi tekstieditorissa.

02. Määritä CSS-muuttujat

Sisään Main.css , löydät paljon hankkeen CSS: stä. Yläosassa luo lohko, joka kohdistuu juurtua Pseudo-luokka. Siinä määritellään muuttujat kuten alla olevassa katkelmassa. Tämä root-lohko sisältää maailmanlaajuisia muuttujia, jotka laskavat alas tyylikkamme, kuten kaikki säännölliset CSS-ominaisuus.

: root {
  --Primary: # 2F353e;
  - Osuus: # 2B9BCA;
  --Tertiari: # F3583F;
  --Quaternaari: # E0E1E2;
  - Vihreä: #ffffff;
} 

03. Vaihda värejä muuttujien kanssa

Siirry tyylitaulukon läpi joko manuaalisesti tai käyttämällä Etsi / korvaa ja vaihda kaikki staattiset värilliset kuusiokoodit vastaavalla muuttujalla juurilohkosta. Voit tehdä tämän käyttämällä var Toiminto ja siirrä muuttujan nimi. Tämä kertoo selaimelle viitata, että muuttujan arvo. Esimerkiksi:

 .c-otsikko {
  Tausta-väri: var (- ensisijainen);
  Väri: var (- quinaarinen);
} 

04. Etsi INLINE SVG kuvakkeille

Avata index.html Ja yksi ensimmäisistä asioista, joita huomaat, on suuri SVG-elementti. Tämä sisältää kaikki sivun kuvakkeiden polut, jotka on kääritty symbolielementtiin ja annetaan yksilöllinen tunnus. Nämä symbolit viitataan sitten tarvittaessa käyttää elementti, joka mahdollistaa kuvakkeiden uudelleenkäyttöä ilman päällekkäisyyttä SVG-koodista.

05. Lisää CSS-muuttujat SVG: hen

Yksi hyöty käyttämästä Inline SVG: n sijasta .svg-tiedoston sijasta CSS voi käyttää sisäistä rakennettaan. Tämä tarkoittaa, että CSS-muuttujat voivat (tarkista selaimen tuki tässä ). Sisään index.html , Vaihda SVG-tyylinen lohko alla olevaan katkelmaan. Nyt jokainen SVG: n väreistä liittyy CSS-muuttujien arvoihin.

 & lt; tyyli & gt;
  .Primary {
  Täytä: var (-Primary, # 2F353E);
  }
  .Condary {
  Täytä: var (-decondary, # 2b9bca);
  }
& lt; / tyyli & gt; 

06. Luo sarakkeiden muuttuja

Voimme myös käyttää CSS-muuttujia muille ominaisuuksille kuin värille. Luo uusi muuttuja juurilohkossa, soita se sarakkeet ja antavat sille arvon 3: n arvon pitäisi vastata Sarakkeet UI-komponentti sivulla. Kun toiminnallinen, tämä komponentti siirtyy sarakkeiden määrän.

: root {
  --Primary: # 2F353e;
  - Osuus: # 2B9BCA;
  --Tertiari: # F3583F;
  --Quaternaari: # E0E1E2;
  - Vihreä: #ffffff;
  --colums: 3;
} 

07. Toteuta sarakkeita

Käyttämällä uusia sarakkeita muuttuja ja calc () Toiminto, lasketaan nyt, kuinka leveä kukin muistin pitäisi olla, jotta voidaan luoda oikea määrä sarakkeita. Esimerkiksi jos sarakkeet asetetaan 4: een, jokaisen merkinnän pitäisi olla 25% leveys.

 .c-huomautus {
  Leveys: Calc (100% / var (- sarakkeet));
} 

08. Lisää JS-luokat ja datamääritteet

Kun käytät JS-käyttäytymistä DOM-elementtiin, koukut siihen luokan kautta JS-etuliitettä. Tämä erottaa CSS: n elementin toiminnalliset näkökohdat. Lisätään a JS-päivitysmuuttuja luokka kaikille väri- ja radiotuloihin sekä a data-attribuutti Viitaten vastaava muuttuja päivittää.

 & lt; syöttötyyppi = "väri" arvo = "# 2f353e"
Luokka = "JS-päivitys-muuttuja u-piilotettu visuaalisesti"
Data-muuttuja = "Ensisijainen" & gt; 

09. Lisää JS päivittämään CSS-muuttujat

Avata Main.js ja lisää alla oleva katkelma. Tämä silmukat läpi kaikki meidän JS-päivitysmuuttuja Tulot ja lisää logiikkaa, niin muutosta, sen tietojen vaihtelevan määritteen viitattu muuttuja päivitetään tulon arvolla. Värivaihtoehdot ja sarake vaihtaa nyt toimivan!

 var Vartrig = asiakirja
.QUERYSELECTOREK (". JS-päivitysmuuttuja");
(var i = 0; i & lt; vartrig.length; i ++) {
VARTRIG [I]
.AddeventListener ("Muuta", toiminto () {
document.documentLement.Style
.SetProperty ("-" + this.dataset.Variable,
tämä.Valastus);
});
} 

10. Kiinnitä JS-luokka Tallenna-painikkeeseen

On järkevää tallentaa käyttäjän värimaailman vain, kun ne napsauttavat Tallenna-painiketta, sillä ne voivat kokeilla teemoja niin paljon kuin he haluaisivat automaattisesti ylittää nykyistä. Aloita, lisää .JS-tallennusvärit jllek Tallentaa Painike toimimaan JS-koukkuna.

 & lt; button class = "C-painike JS-tallennusvärit"
Data-Modal = "JS-modaalinen" data-modaalinen
-Content = "JS-Colors-Modal-Sisältö" & GT;
Tallenna & lt; / button & gt; 

11. Luo värit array

Takaisin Main.js , julista uusi muuttuja kutsutaan värit ja määritä sille uusi ryhmä, joka sisältää kaikki värimuuttujat, jotka haluamme tallentaa, kun Tallenna-painike on napsautettu.

 var värit = [
  "Ensisijainen",
  "Toissijainen",
  "tertiäärinen",
  "Kivernaarinen",
  "Quinary"
]; 

12. Rakenna Tallenna-painike Event kuuntelija

Värien alapuolella luodaan napsauttamalla tapahtuman kuuntelija JS-tallennusvärit Luokka, jonka olemme aiemmin lisätty Tallenna-painikkeeseen. Sisällä se luo uusi muuttuja htmlstyles ja määritä se juuri HTML-elementin laskennalliset ominaisuudet. Käytämme tätä käyttää CSS-muuttujia.

 Asiakirja.QuerySelector (". JS-tallennusvärit")
.AddeventListener ("Click", Toiminto () {
var htmlstyles = ikkuna
.getcomputtedstyle (asiakirja
.QuerySelector ("HTML")),
}), 

13. Tallenna CSS-väri muuttujat

Seuraavaksi tapahtuman kuuntelijana luo uusi muuttuja colourstosave ja määritä se tyhjä esine. Seuraavaksi luo a Varten silmukka käyttäen värit Array vaiheesta 11. Sisäisesti lisäämme täydellisen avaimen / arvon ennätys värit array colourstosave esine.

 Array "Colourstosave".
colourstosave = uusi esine;
for (var i = 0; i & lt; colours.length; i ++) {
colourstosave [värit [i]] = htmlstyles
.getPropertyvalue ("-" + värit [i]);
} 

14. Lähetä ColourStotave paikalliselle paikalle

Nyt meillä on kaikki värimuuttujat, jotka on tallennettu colourstosave , lähetämme sen Web-tallennuksen osaksi, jota kutsutaan paikallisiksi. Tämä on olennaisesti esine, joka jatkuu istuntoihin. Voimme tallentaa muita esineitä siinä Setittem () menetelmä. Lähetämme sen meidän colourstosave esine.

 Localstorage.SETITEM ("värit",
JSON.STRINFIFY (Colourstosave)); 

15. Lisää JS-luokka sarakkeisiin

Värien lisäksi haluamme myös varmistaa, että valitut sarakkeet ovat myös istuntoja. Ensimmäinen askel kohti tätä olisi lisätä JS-päivitys-sarakkeet Kaikkiin radiotuloihin sarakkeessa.

 & lt; syöttötyyppi = "Radio" nimi = "sarakkeet" -luokka
= "JS-päivitys-muuttuja JS-päivitys-sarakkeet
U-piilotettu visuaalisesti "arvo =" 1 "
Data-muuttuja = "sarakkeet" & gt; 

16. Lähetä sarakkeet LocalStorage

Jokaiselle JS-päivitys-sarakkeet , lähetämme seuraavaksi tapahtuman kuuntelijat katsomaan muutoksia. Tunnistamme sitten lähetämme sen nykyisen arvon sarakkeet muuttuva paikallinen varasto , jälleen käyttää sitä Setittem () menetelmä. Toisin kuin väreillä, meidän ei tarvitse tarkkailla tätä arvoa, koska se ei ole esine.

 var Colinput = Asiakirja
.QuerySelectectorAll (". JS-päivitys-sarakkeet");
for (var i = 0; i & lt; colinput; i ++) {
Colinput [I] .AddeventListener ("Muuta",
Toiminto () {var htmlstyles = ikkuna
.getcomputtedstyle (asiakirja
.QuerySelector ("HTML"));
Localstorage.SETITEM ("sarakkeet",
htmlstyles.getPropertyValue ("- sarakkeet");
});} 

17. Käsittele uusia istuntoja

Jos käyttäjä palaa, kun olet aiemmin valinnut värin ja sarakkeen asetuksen, meidän on rakennettava logiikka, joten tämä tallennettu data käännetään takaisin CSS-muuttujiin. Ensimmäinen vaihe on määritellä a Domcontentlomattu tapahtuman kuuntelija ja sitten jos Lausunto tarkistaa kaikki tallennetut tiedot paikallispalvelun avulla GETITEM () menetelmä.

 Asiakirja.AddeventListener
("Domcontentloadoitu", toiminto () {
jos (Localstorage.getitem ("värit")) {
}
Jos (Localstorage.getitem ("sarakkeet")) {
}
}); 

18. Väramuuttujien muuttaminen

Väreissä jos lausunto, luo uusi muuttuja Savedcolours ja määritä se parsoitujen värien esineiden arvosta paikallinen varasto . Käyttää Varten silmukka Savedcolours , tartu jokaiseen värinäppäimeen / arvopariin ja liitä se juurih HTML-elementtiin CSS-muuttujana.

 var savedcolours = json.parse
(Localstorage.getitem ("värit");
Sillä (Väri SavedColoursissa) {
document.documentelement.style.setProperty
("-" + väri, savedcolours [väri]); } 

19. Kerää sarake muuttujia tietoja

Ennen kuin voimme muuttaa sarakkeita muuttujaa, meidän on ensin tartuttava viittauksiin tallennettuihin tietoihin paikallinen varasto ja myös radiotulot Sarakkeet komponentti. Jälkimmäinen on, jotta voimme päivittää valtion varmistaaksesi, että oikea numero on valmiiksi valittu.

 VAR Sarakkeet = LocalStorage
.getitem ("sarakkeet"),
Polumntrigerit = asiakirja.
QuererSelective (". JS-päivitys-sarakkeet"); 

20. Muuta muuttuja ja valtio

Lopuksi päivitetään sarakkeet CSS-muuttuja tallennetulla tavalla paikallinen varasto vastine ja aseta asiaankuuluvan radiotulojen tarkistettu ominaisuus Sarakkeet komponentti tosi. The Sarakkeet - 1 on korvata se, että sarakkeet Nodelisti on nollapohjainen.

 Asiakirja.documentelement.Style
.SetProperty ("- sarakkeet", sarakkeet);
Sylvästrue [sarakkeet - 1] .Checked = tosi; 

21. Testaa lopputuote

Se siitä! Kaikki mock noteapp-sivulla pitäisi nyt toimia. Voit luoda oman värimallin napsauttamalla näyttöjä ja sitten sitoutua paikallinen varasto Tallenna-painikkeen kautta. Jos haluat vaihtaa osoitettujen sarakkeiden määrän, napsauta sarakkeiden komponentin sopivaa numeroa.

Ja muistakaa, kannattaa aina päivittää pilvivarasto Uuden projektin etukäteen, jotta se voi käsitellä sitä, jotka heittävät sitä.

Tämä artikkeli ilmestyi alun perin Web Designer Magazine -asiakirjassa 264. Tilaa täältä .

Lue lisää:

• 15 Todella hyödyllinen reagoiva Web Design Tutorials
• Miten päästä alkuun Sass
• 7 Vinkkejä hallita väriä paremmin verkossa