Як налаштувати тематику сайту з змінними CSS

CSS користувальні властивості, широко відомі як змінні CSS, тепер підтримуються всіма основними сучасними браузерами. Це означає, що для проектів, які не обтяжені, необхідно підтримувати застарілі браузери, такі як Internet Explorer, змінні CSS можна розглянути - для всіх намірів та цілей - безпечно використовувати.

Багато розробників вже використовують змінні з попередніми, такими як SASS або Менш як засіб відновлення повторення коду. Внутрішні змінні CSS працюють в основному так само, але не вимагають додаткового етапу збірки, каскаду, як регулярна властивість CSS, і найголовніше, доступні під час виконання. (Щоб тримати свій сайт плавно, переконайтеся, що ви вибрали право веб хостинг Сервіс.)

• Що таке сас?

Ці переваги дають рідні CSS-змінні краю над своїми і сестрами передпроцесора, і відкриває двері для розробників, щоб зробити багато цікавих речей з набагато меншим кодом. Зацікавлені параметри нульового коду для вашого сайту? Ось наш путівник до вершини Веб-будівельник .

У цьому підручнику ми розглянемо, як ми можемо використовувати змінні CSS, щоб здійснити тематичне використання веб-сайту в макетний веб-додаток, який називається NEMEPP. Це передбачає письмо CSS і Javascript Щоб дозволити користувачеві змінити колірну схему та перемикати кількість показаних стовпців. Ми будемо використовувати API веб-сховища, щоб переконатися, що будь-які зміни зберігаються для майбутніх сеансів.

Отримайте підручники

Перші речі спочатку завантажте файли проекту з Web Designer's Filesilo (випуск 264). Примітка. Перший раз користувачі доведеться зареєструватися, щоб використовувати файл.

01. Налаштуйте робочу область

В / веб-шаблон Довідник ви знайдете статичну веб-сторінку NoteApp, в якій ми будемо впроваджувати тематику веб-сайту за допомогою змінних CSS та API веб-сховища. Відкрийте каталог у бажаному текстовому редакторі.

02. Налаштуйте наші змінні CSS

В main.css , ви знайдете більшу частину CSS проекту. Угорі створіть блок націлювання корінь псевдо-клас. В межах цього визначають змінні, як у фрагменті нижче. Цей кореневий блок містить глобальні змінні, які скасують через нашу таблицю стилів, як будь-яка нерухомість CSS.

: Корінь {
  - первинна: ​​# 2F353E;
  - Послідовність: # 2B9BCA;
  - № F3583F;
  - Пакувальник: # E0E1E2;
  - Комунальний: #ffffff;
} 

03. Замініть кольори з змінними

Перейдіть до таблиці стилів, або вручну, або використовуючи пошук / замінити, і поміняти будь-які статичні кольорові шістнадцяткові коди з відповідною змінною з кореневого блоку. Для цього використовуйте марка функцію і передайте назву змінної. Це говорить браузер, щоб вказати, що значення змінної. Наприклад:

 .c-заголовок {
  Колір фону: Var (- первинний);
  Колір: Var (- Quinary);
} 

04. Знайдіть Inline SVG для значків

відчинено index.html І одне з перших, які ви помітили, - це великий елемент SVG. Це містить шляхи для всіх значків сторінки, кожен з яких загорнуто в символ, і дано унікальний ідентифікатор. Ці символи посилаються, де це потрібно використання Елемент, що дозволяє повторно використовувати іконки без будь-якого дублювання коду SVG.

05. Додайте змінні CSS до SVG

Одна користь від використання inline SVG замість файлу .svg полягає в тому, що CSS може отримати доступ до його внутрішньої структури. Це означає, що наші змінні CSS (перевірка підтримки браузера тут ). В index.html , Замініть блок стилю SVG з фрагментом нижче. Тепер кожен з кольорів SVG пов'язаний з значеннями наших змінних CSS.

 & lt; стиль & gt;
  .primary {
  Заповніть: Var (-PRIMARY, # 2F353E);
  }
  .відповідача {
  Заповніть: VAR (-SECONDARY, # 2B9BCA);
  }
& lt; / стиль & gt; 

06. Створіть змінну стовпців

Ми також можемо використовувати змінні CSS для властивостей, відмінних від кольору. Створіть нову змінну в кореневому блоці, зателефонуйте стовпчики , і дайте йому значення 3. Це має відповідати значення за умовчанням Стовпчики Компонент інтерфейсу на сторінці. Коли функціональний, цей компонент буде перемикати кількість стовпців.

: Корінь {
  - первинна: ​​# 2F353E;
  - Послідовність: # 2B9BCA;
  - № F3583F;
  - Пакувальник: # E0E1E2;
  - Комунальний: #ffffff;
  --кол. 3;
} 

07. Впровадити стовпці

Використання наших нових стовпців змінної та Calc () Функція, ми будемо обчислити, наскільки широка кожна нотатка повинна бути для створення правильної кількості стовпців. Наприклад, якщо стовпці встановлюються до 4, кожна нотатка повинна мати ширину 25%.

 .c-note {
  Ширина: Calc (100% / var (- стовпці));
} 

08. Додайте класів JS та атрибути даних

При застосуванні поведінки JS до елемента DOM, підключити до нього за допомогою класу з префіксом JS. Це відокремлює функціональні аспекти елемента з CSS. Давайте додати js-update-змінна клас до всіх кольорових і радіо входів, а також атрибут даних Посилання на відповідну змінну для оновлення.

 & lt; Вхідний тип = "колір" значення = "# 2f353e"
Class = "JS-Update-Marriage U-Hidden-візуально"
data-marrible = "первинний" & gt; 

09. Додати JS для оновлення змінних CSS

відчинено main.js і додайте фрагмент нижче. Це петля через всі наші js-update-змінна Входи та додає логіку, тому на зміні, змінна, наведена в його змінному атрибуту даних, оновлюється за допомогою значення входів. Зразки кольорів та перемикання стовпців тепер повинні працювати!

 var vartrig = Документ
.QuerySelectorAll (". JS-UPDATE-змінна");
для (var i = 0; i & lt; vartrig.length; i ++) {
Вартріг [i]
.addeventlistener ("зміна", функція () {
document.documentlement.style
.setproperty ("-" + this.dataset.-arable,
це.знавання);
});
} 

10. Прикріпіть клас JS до кнопки «Зберегти»

Має сенс зберігати лише кольорову схему користувача, коли вони натискають кнопку «Зберегти», оскільки це дозволяє їм експериментувати з темами, наскільки вони не хотіли, не автоматично перевищуючи поточний. Почати, додати .js-save-colors до Рятувати кнопку, щоб функціонувати як наш крючок JS.

 & lt; Кнопка Class = "C-кнопка JS-Save-Colors"
data-modal = "js-modal" data-modal
-Content = "JS-Colors-Modal-Content" & GT;
Зберегти & lt; / кнопку & gt; 

11. Створення кольорів масиву

Повернутися в main.js , оголосити нову змінну під назвою кольору І призначити йому новий масив, що містить всі змінні кольору, які ми хочемо зберегти, після того, як кнопка збереження була натиснута.

 Var Colors = [
  "Первинний",
  "Вторинний",
  "третин",
  "четвертинний",
  "двійка"
] 

12. Створити слухач подій

Нижче масиву кольорів, створіть слухач подій кліків для JS-Save-Colors клас, який ми раніше додавали до кнопки «Зберегти». Всередині він створює нову змінну під назвою htmlstyles і призначити його обчисленими властивостями кореневого елемента HTML. Ми будемо використовувати це, щоб отримати доступ до наших змінних CSS.

 Document.QuerySelector (". JS-Save-Colors")
.addeventlistener ("натисніть", функція () {
var htmlstyles = вікно
.getcomputedstyle (документ
.QuerySelector ("HTML")),
}), 

13. Запис CSS кольорових змінних

Далі, в межах слухача подій, створіть нову змінну під назвою колорит і призначити його порожній об'єкт. Далі створіть a За петля за допомогою кольору Масив з кроку 11. В рамках цього ми додамо повний ключ / вартість запису змінних, зазначених у кольори масив до колорит об'єкт.

 масив до об'єкта "ColourStosave".
ColourStosave = новий об'єкт;
для (var i = 0; i & lt; colors.length; i ++) {
ColourStosave [кольори [i]] = htmlstyles
.getpropertyvalue ("-" + кольори [i]);
} 

14. Надішліть ColourStosave до місцевогостоп

Тепер у нас є всі змінні кольору, що зберігаються колорит , ми надішлемо його до компоненту веб-сховища API, що називається LocalStorage. Це по суті є об'єктом, який зберігається через сесії. Ми можемо зберігати інші об'єкти, використовуючи його SetItem () метод. Давайте надішлемо це нашим колорит об'єкт.

 LocalStorage.SetItem ("кольори",
JSON.Stringify (ColourStosave)); 

15. Додайте клас JS до стовпців

На додаток до кольорів, ми також хочемо переконатися, що наші вибрані стовпці також зберігаються між сеансами. Перший крок до цього буде додати js-update-стовпці До всіх радіо входів у компоненті стовпців.

 & lt; Вхідний тип = "Радіо" name = "columns" клас
= "js-update-barnable js-update-стовпці
U-приховано-візуально "значення =" 1 "
data-maranable = "стовпці" & gt; 

16. Надіслати стовпці до місцевогосторизації

Для кожного js-update-стовпці , ми порушимо слухачів подій, щоб спостерігати за змінами. На виявленні ми надішлемо поточне значення стовпчики змінна місцевийстоп знову використовуючи його SetItem () метод. На відміну від кольорів, нам не потрібно натиснути це значення, оскільки це не об'єкт.

 var colinputs = Документ
.queryseelcall (". js-update-columns");
для (var i = 0; i & lt; colinputs; i ++) {
colinputs [i] .addeventlistener ("зміна",
Функція () {var htmlstyles = вікно
.getcomputedstyle (документ
.QuerySelector ("HTML");
LocalStorage.SetItem ("Колони",
htmlstyles.getpropertyvalue ("- стовпці");
});} 

17. Обробка нових сеансів

Якщо користувач повернеться після попереднього вибору кольорів та уподобань кольорів, нам потрібно побудувати логіку, тому це збережені дані повернуті в змінні CSS. Перший крок - визначити a Domcontentloaded слухача подій, а потім якщо Заява для перевірки будь-яких збережених даних у LocalStorage за допомогою його getitem () метод.

 документ .addeventlistener
("Domcontentloaded", функція () {
if (localstorage.getitem ("кольори")) {
}
if (localStorage.Getitem ("стовпці")) {
}
}); 

18. Змінення змінних кольорів

У кольорах якщо Заява, створіть нову змінну під назвою зберігання і призначити це значення об'єкта розробок місцевийстоп . За допомогою За петля зберігання , захопити кожну кольорову клавішу / вартість пару та додайте його до елемента HTML Root як змінної CSS.

 var savedcolours = json.parse
(LocalStorage.Getitem ("кольори");
для (колір у SavedColours) {
document.documentlement.style.setproperty
("-" + колір, збереженийков. [Колір]); } 

19. Збирайте дані змінних стовпців

Перш ніж ми можемо змінити змінну стовпців, ми повинні спочатку захопити посилання на збережені дані в місцевийстоп а також радіо входи в межах Стовпчики компонент. Останнє, тому ми можемо оновлювати свою державу, щоб переконатися, що правильний номер попередньо вибирається.

 Var Columns = LocalStorage
.getitem ("стовпці"),
Columntriggers = Документ.
QuerySeleckall (". JS-Update-Columns"); 

20. Змінити змінну та державу

Нарешті, ми оновлюємо стовпці CSS змінну з збереженим місцевийстоп Catterpart та встановлення перевіреного атрибута відповідного радіо введення в межах Стовпчики компонент до істинного. Точний Колони - 1 полягає в тому, щоб компенсувати той факт, що колони Нуднак нульовий.

 document.documentelement.style
.setplorty ("- стовпці", колони);
Columntriggers [Columns - 1] .Checked = true; 

21. Перевірте готовий продукт

Це воно! Тепер має працювати все на Mock NoteApp. Ви можете створити свою власну колірну схему, натиснувши зразки, а потім здійснити його місцевийстоп через кнопку «Зберегти». Якщо ви хочете переключити кількість показаних стовпців, натисніть відповідний номер у компоненті стовпців.

І пам'ятайте, що завжди варто оновити вашу хмара зберігання Попереду нового проекту, так він може обробляти файли, які ви кидаєте на нього.

Ця стаття спочатку з'явилася в журналі Web Designer 264. Підписатися тут .

Читати далі:

• 15 Дійсно корисний підручники веб-дизайну
• Як почати роботу з SASS
• 7 порад, щоб управляти кольором краще в Інтернеті