Jak nastavit motivování stránek s proměnnými CSS

CSS Vlastní vlastnosti, běžně známé jako CSS proměnné, jsou nyní podporovány všemi hlavními moderními prohlížeči. To znamená, že pro projekty, které nejsou zatíženy tím, že budou podporovat starší prohlížeče, jako je například aplikace Internet Explorer, lze považovat proměnné CSS - pro všechny záměry a účely - bezpečné použití.

Mnoho vývojářů již používají proměnné s předprocesory, jako je SASS nebo Méně jako prostředek snižování opakování kódu. Nativní CSS proměnné fungují do značné míry stejným způsobem, ale nevyžadují žádný další krok sestavení, kaskádu jako běžná vlastnost CSS a nejdůležitější je k dispozici v runtime. (Chcete-li, aby vaše stránky běží hladce, ujistěte se, že jste si vybrali právo web hosting servis.)

• Co je sass?

Tyto výhody dávají nativní CSS proměnné okraj nad svým předprocesorovým sourozencem, a otevírá dveře pro vývojáře, aby dělali spoustu zajímavých věcí s mnohem méně kódem. Zájem o možnosti nulového kódu pro vaše stránky? Zde je náš průvodce na vrchol Webové stránky Builder. .

V tomto tutoriálu budeme zkoumat, jak můžeme použít proměnné CSS k implementaci webových stránek do aplikace Mock Webová aplikace s názvem NoteAPP. To bude zahrnovat psaní CSS. a JavaScript. Umožnit uživateli změnit barevné schéma a přepínat množství zobrazených sloupců. Poté využijeme API webové úložiště, abyste se ujistili, že jsou všechny změny uloženy pro budoucí relace.

Získejte tutoriálové soubory

Nejdříve nejprve stáhněte soubory projektu Web Designer Filesilo (Vydání 264). Poznámka: Nejprve se budou muset uživatelé zaregistrovat, aby používali souboryilo.

01. Nastavte pracovní prostor

V / webové stránky šablony Adresář najdete statickou webovou stránku NoteAPP, ve které budeme implementovat webové stránky motivování pomocí CSS proměnných a API webového úložiště. Otevřete adresář v preferovaném textovém editoru.

02. Nastavte naše proměnné CSS

v Main.css. , najdete hodně z CSS projektu. V horní části vytvořte blok zacílení vykořenit pseudo-třída. V rámci define proměnné jako v úryvku níže. Tento kořenový blok obsahuje globální proměnné, které budou kaskádovat přes náš styl stylů jako jakýkoliv běžný majetek CSS.

: Root {
  --primary: # 2F353E;
  - Sekundární: # 2B9BCA;
  --teriary: # f3583f;
  --QuaterNary: # e0e1e2;
  - vhodný: #ffffff;
} 

03. Nahradit barvy s proměnnými

Projděte se přes stylesetu, buď ručně nebo pomocí najít / vyměnit, a vyměnit všechny statické barevné hex kódy s jejich odpovídající proměnnou z kořenového bloku. Chcete-li to udělat, použijte var. Funkce a předat jméno proměnné. To vypráví prohlížeč, aby odkazoval na hodnotu proměnné. Například:

 .c-header {
  Barva pozadí: var (- primární);
  Barva: var (- quininary);
} 

04. Vyhledejte inline SVG pro ikony

Otevřeno index.html. A jeden z prvních věcí, které si všimnete, je velký SVG prvek. To obsahuje cesty pro všechny ikony stránky, z nichž každý zabalen do symbolu, a dané jedinečné ID. Tyto symboly jsou pak odkazovány v případě potřeby s použití Prvek, který umožňuje opětovné použití ikon bez duplikace SVG kódu.

05. Přidejte CSS proměnné na SVG

Jeden prospěch použití inline SVG namísto souboru .SVG je, že CSS může přistupovat ke své vnitřní struktuře. To znamená, že naše proměnné CSS (zkontrolovat podporu prohlížeče tady ). v index.html. , Vyměňte blok SVG styl s úryvkem níže. Nyní je každý z barev SVG spojeny s hodnotami našich proměnných CSS.

 & lt; style & gt;
  .hlavní {
  Vyplňte: var (-primary, # 2F353E);
  }
  .secondary {
  Vyplňte: var (-secondary, # 2b9bca);
  }
& lt; / styl & gt; 

06. Vytvořte proměnnou sloupců

Můžeme také použít proměnné CSS pro jiné než barvy. Vytvořte novou proměnnou v kořenovém bloku, zavolejte jej sloupce a dejte mu hodnotu 3. To by mělo odpovídat výchozí hodnotě Sloupce UI komponenta na stránce. Je-li funkční, tato komponenta se přepne počet sloupců.

: Root {
  --primary: # 2F353E;
  - Sekundární: # 2B9BCA;
  --teriary: # f3583f;
  --QuaterNary: # e0e1e2;
  - vhodný: #ffffff;
  - columns: 3;
} 

07. implementovat přepínače sloupců

Použití nových sloupců proměnné a calc () Funkce, nyní vypočítáme, jak by měla být každá komponenta poznámka za účelem vytvoření správného počtu sloupců. Pokud je například sloupce nastaveny na 4, každá poznámka by měla mít šířku 25%.

 .c-poznámka {
  šířka: calc (100% / var (- sloupce));
} 

08. Přidání tříd JS a atributy dat

Při použití JS chování na prvek DOM se do něj připojte přes třídu s předponou JS. Toto oddělení funkční aspekty prvku z CSS. Přidejme přidat JS-Update-Promiable třída do všech barevných a rádiových vstupů, stejně jako Atribut dat Odkazování odpovídající proměnné pro aktualizaci.

 & lt; vstup typu = "barva" hodnota = "# 2f353e"
Třída = "JS-Update-Promiable U-Skryté - vizuálně"
Data-proměnná = "primární" a gt; 

09. Přidat JS aktualizovat proměnné CSS

Otevřeno Main.js. a přidejte pod úryvků níže. Tyto smyčky přes všechny naše JS-Update-Promiable Vstupy a přidává logiku, takže na změnu, proměnná odkazovaná v atributu s proměnnými daty je aktualizována hodnotou vstupů. Barevné vzorníky a přepínání sloupců by měly být nyní fungovat!

 var vartrig = dokument
.QuerySelectorall (".". Proměnná JS-Update ");
pro (var i = 0; i & lt; vartrig.length; i ++) {
vartrig [i]
.AddeventListener ("Změnit", funkce () {
Document.documentelement.style.
.SetProperty ("-" + toto.DataSet.Variable,
This.Value);
});
} 

10. Připojte třídu JS do tlačítka Uložit

To má smysl uložit pouze barevné schéma uživatele, když kliknou na tlačítko Uložit, protože to jim umožňuje experimentovat s tématy, jak se jim líbí, aniž by se automaticky přepsali aktuální. Chcete-li začít, přidejte .JS-Save-Colors na Uložit Tlačítko pro fungování jako náš JS Hook.

 Class Tlačítko = "C-Button JS-Save-Colors"
Data-modal = "JS-Modal" Data-Modal
-Content = "JS-Colors-Modal-Content" & GT;
Uložit & lt; / tlačítko & gt; 

11. Vytvořit pole Barvy

Zpět Main.js. , deklarovat novou proměnnou nazvanou barvy a přiřadit k němu novým poli obsahujícím všechny barevné proměnné, které chceme být uloženy, jakmile tlačítko Uložit kliknete.

 var colors = [
  "hlavní",
  "sekundární",
  "terciární",
  "kvartérní",
  "Quininary"
]; 

12. Sestavte posluchač události

Pod rámečkem barev vytvořte posluchače události JS-Save-Colors Třída, kterou jsme dříve přidali k tlačítku uložení. Uvnitř vytvořit novou proměnnou nazvanou htmlstyles. a přiřadit jej vypočtené vlastnosti prvku HTML root. Budeme používat k přístupu na naše proměnné CSS.

 Document.QuerySelektor (". JS-Save-Colors")
.AddeventListener ("Click", funkce () {
var htmlstyles = okno
.getComputedStyle (dokument
.QuerySelector ("html"),
}), 

13. Záznam CSS barevných proměnných

Dále v rámci posluchače událostí vytvořte novou proměnnou nazvanou colourstosave. a přiřadit je prázdný objekt. Dále vytvořit a PRO smyčka pomocí. barvy pole z kroku 11. v něm přidáme kompletní klíčový / hodnotový záznam proměnných uvedených v barvy pole na. \ t colourstosave. objekt.

 Pole na objekt "ColourStosave".
ColourStosave = nový objekt;
pro (var i = 0; i colours.length; i ++) {
ColourStosave [barvy [i]] = htmlstyles
.GETPROPERTYVALUE ("-" + barvy [i]);
} 

14. Poslat ColourStosave na LocalStorage

Nyní máme všechny barevné proměnné uložené v colourstosave. , Pošleme jej do složky webového úložiště API s názvem LocalStorage. To je v podstatě objekt, který přetrvává napříč sezeními. Můžeme uložit další objekty v rámci ní pomocí jeho setItem () metoda. Pošme to colourstosave. objekt.

 LocalStorage.SetItem ("barvy",
Json.stringify (colourstosave); 

15. Přidejte třídu JS do sloupců

Kromě barev se také chceme ujistit, že naše vybrané sloupce číslo také přetrvává napříč sezeními. Prvním krokem k tomu by bylo přidáno JS-Update-Santy do všech rádiových vstupů ve složce sloupců.

 & lt, vstup typu = "rádio" název = "sloupce"
= "JS-Update-Promiavní JS-Update-update-Santy
U-skrytý-vizuálně "hodnota =" 1 "
Data-proměnná = "sloupce" & gt; 

16. Poslat sloupce do LocalStorage

Pro každého JS-Update-Santy Dále budeme přidělit posluchače události, aby sledovali změny. Na detekci pak posíláme aktuální hodnotu sloupce Proměnná to místní úložiště znovu používat jeho setItem () metoda. Na rozdíl od barev, nemusíme tuto hodnotu zvrátit, protože to není objekt.

 var colinputs = dokument
.querySelectorall (".". JS-Update-sloupce ");
pro (var i = 0; i 

17. Zvládněte nové sezení

Pokud se uživatel vrátí po dříve výběru předvolby barev a sloupců, musíme sestavit logiku, takže tato uložená data se otočí zpět do proměnných CSS. Prvním krokem je definovat a DomContentloaded. Posluchač událostí a pak -li Prohlášení pro kontrolu všech uložených dat v LocalStorage pomocí jeho getItem () metoda.

 Document.AddeventListerener
("Domcontentloaded", funkce () {
if (localstorage.getItem ("barvy")) {
}
if (localstorage.getItem ("sloupce")) {
}
}); 

18. Změna barevných proměnných

V barvách -li Prohlášení, vytvořit novou proměnnou nazvanou SavedColours. a přiřadit ji hodnotu objektů analyzovaných barev místní úložiště . Používat Pro in. smyčka s SavedColours. , Uchopte každý pár barev / hodnotu a přidejte jej do kořenového prvku HTML jako proměnná CSS.

 var savedcolours = json.parse
(localstorage.getItem ("barvy"));
pro (barva v SavedColours) {
Document.documentelement.style.SetProperty.
("-" + barva, SavedColours [barva]); } 

19. Shromažďují data proměnných sloupců

Předtím, než můžeme změnit proměnnou sloupců, musíme nejprve chytit odkazy na uložená data v místní úložiště a také rádiové vstupy v rámci Sloupce komponent. Ten je, takže můžeme aktualizovat svůj stav, aby se ujistil, že správné číslo je předem vybráno.

 var sloupců = LocalStore
.getItem ("sloupce"),
Columnigers = Dokument.
QuerSelectorall (".". JS-Update-sloupce "); 

20. Změnit variabilní a stát

Nakonec aktualizujeme sloupce CSS proměnnou se uloženým místní úložiště protějte a nastavte kontrolovaný atribut příslušného rádiového vstupu v rámci Sloupce komponenta. . \ T Sloupce - 1. je kompenzovat skutečnost, že sloupce Nodelista je založený na nulu.

 Document.documentelement.style
.SetProperty ("- sloupce", sloupce);
Collacíci [sloupce - 1] .checked = true; 

21. Otestujte hotový výrobek

A je to! Všechno na stránce Mock Noteapp by nyní měla fungovat. Můžete si vytvořit vlastní barevné schéma kliknutím na vzorníky a poté jej spáchat místní úložiště prostřednictvím tlačítka Uložit. Pokud chcete přepínat množství zobrazených sloupců, klepněte na příslušné číslo ve složce sloupců.

A nezapomeňte, že to vždycky stojí za to upgrade cloudové úložiště před novým projektem, takže to zvládne soubory, které na něj hodíte.

Tento článek se původně objevil ve Web Designer Magazine Issue 264. Přihlásit se zde .

Přečtěte si více:

• 15 Opravdu užitečné reagující tutoriály webového designu
• Jak začít s SASS
• 7 tipů pro správu barvy lépe na webu