Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites

Побудова інтерфейсу модульної панелі за допомогою Pure

by
Difficulty:IntermediateLength:MediumLanguages:

Ukrainian (українська мова) translation by Andy Yur (you can also view the original English article)

Сьогодні ми створимо красиву, минималистичную панель, використовуючи Pure ( познайомтеся з проектом на GitHub ), нова міні модульна CSS бібліотека від Yahoo! Ми поговоримо про SMACSS (Масштабируемая і модульна архітектура CSS) і про застосування її принципів. Таже ми використовуємо іконки з сайту WeLoveIconFonts.com.

Примітка: Перед тим, як ми підемо далі, треба приділити особливу увагу графіками створюваної панелі. Графіки краще створювати що-небудь більш повноцінним, ніж чим JavaScript, але для того, що зберегти фокус на CSS і мінімально JS, в цьому уроці техніки побудови графіків детально розглядатися не будуть.


Трохи про Pure

Бібліотека Pure була створена командою Yahoo і YUI, як набір найбільш легковажних модулів (менше 6К). Взагалі її можна порівняти з Normalize, яка увібрала в себе стилі найбільш поширених таких речей, як сітки, форми, кнопки, таблиці і меню.

pure-base

Команда YUI створила Pure як відправну точку, а не в якості закінченого рішення. Надалі вони очікують, що розробники самі будуть розширювати бібліотеку і своїми стилями доповнювати її.

Тому, багато з того, що ми дізнаємося в цьому уроці, стосуватиметься доповнення базових бібліотек, на зразок Pure, з метою створення соотвествующих при взаємодії додатків, як при створенні інформаційних панелей.


Трохи про SMACSS

SMACSS, (скорочено від Scalable and Modular Architecture for CSS - масштабована і модульна архітектура для CSS), створена Джонатаном Снуком, і є набором практик створених для побудови більш зрозумілого, доповнення коду CSS, що допомагає уникнути "воєн специфікацій CSS".

pure-smacss

Вона допомагає не застосовувати ID для стилізація елементів і скоротити рівень вкладеності елементів наскільки це можливо. Головна ідея цієї філософії може бути категоризувати по наступними поняттями: основа, розмітка, модулі, стану і теми. Структурування CSS згідно з цими категоріями і дотримуючись певних правил іменвоанія, використовуючи ці категорії, перетворює SMACSS в читається і моментально наповнений змістом код. Це вберігає від створення імен класів, які асоціюються зі стилями всередині них.

  • Основа: немає імен (базові елементи, без класів)
  • Розмітка: .layout, .grid, .grid-column, .grid-column.five.columns
  • Модулі: .btn (назва модуля), .btn-default, .btn-calltoaction; .modal, .modal-header
  • Стан: .is-hidden, .is-active (маються на увазі тригерні JavaScript-зміни класів)
  • Тема: .theme-background, .theme-border, .font-1, .font-2

Дані типи класів описують їх функціональність і категорію. Правила SMACSS - більше вказівок і можливостей обмірковування. Щоб побачити приклади застосування SMACSS на практиці, ознайомтеся з бібліотекою Pure CSS.


Занурюємось

Спершу давайте створимо директорію з використанням HTML5 Boilerplate, і помістимо туди стилі Pure Normalize.css. У цьому проекті ми будемо використовувати посилання Pure's YUI CDN <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">. Також ми будемо використовувати колекцію шрифтових іконок від творців Twitter Font Awesome і додамо рядок в CSS (рекомендації взяті з weloveiconfonts). У всій розмітці, іконки будуть оголошуватися за допомогою класів, на зразок "fontawesome-calendar".

Тепер все готово для використання цих інструментів в дизайні. Давайте почнемо з створення якогось каркаса CSS і розмістимо його в 'body' елементі.

Ми вирішили використовувати кольорову палітру, яку знайшли на colourlovers, під назвою Yellow Tree Frog авторства LJK.

pure-frog

Тепер розмістимо в коментарі на початку таблиці стилів CSS посилання на ці кольори.

Порада: Іноді вигідніше використовувати слова ключових колірних кодів CSS і пізніше замінити всі hex-коди, щоб не займатися постійним їх копіюванням.


Створення меню

У складі PureCSS є модуль меню який ми можемо використовувати при створенні нашої панелі. Почнемо з класового найменування модуля в стилістиці Pure, враховуючи інструкції SMACSS.

В даному уроці ми не домагаємося функціональності меню. Як ви можете помітити, меню було створено зі стилізованою за замовчуванням горизонтальною орієнтацією. Давайте далі змінимо колір фону на напівпрозорий чорний.

Ми можемо бачити взаємодія SMACSS і Pure. Ми створили два класи 'pure-menu-blackbg' і 'pure-menu-fixed' і додаткові вкладені стилі. Також ми переопределили основні класи (наприклад, класу 'pure-menu', задавши в ньому меншу жирність шрифту).

pure-menu

Створення модуля панелі

Слідом ми створимо модуль панелі. Ми будемо використовувати базові стилі вбудованої за замовчуванням панелі.

Далі ми доповнимо ці стилі створенням нових класів з префіксом 'dashboard-piece'. Першими ми створимо класи для фонового кольору.

Далі ми створимо розмітку різних модулів панелі. Підключимо SVG Envato лого, яке буде розтягуватися на всю ширину сітку.

pure-envato-logo

У цьому розмітці багато чого треба виправити. Спершу використовуємо 'pure-u-3' (і інші 'pure-u- *' класи) всередині сітки елемента рядка 'pure-g-r'. Ці класи є частиною сітки Pure. Для більш повного розуміння ви можете ознайомитися з повною документацією по сітки YUI. Основною концепцією є те, що клас сітки pure-u-1-3 - складає 1/3 загальної ширини сітки, клас pure-3-4 -становить 3/4 ширини. Модуль з лого має клас pure-u-1, який дозволяє зайняти елементу повну ширину.

Інші частини панелі використовуються для показу інших типів метрик. Наступні правила CSS використовуються, чтооби показати ці метрики.

pure-modules

Ми також визначимо класи горизонтальних і вертикальних плиток окремо від вмісту модулів панелі.

І, нарешті, ми використовуємо більше вбудованих модулів Pure для створення стилізованої таблиці для модуля подій і повторно використовуємо класи горизонтальної плитки для модуля погоди. Ми також доповнили ці класи власними стилями. І отримуємо розмітку останніх двох модулів.

Доповнимо Pure стилі для таблиць.

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


Додавання адаптивності

За замовчуванням в Pure закладена адаптивність елементів сітки. Вони визначаються наступним селектором:

Цей хітровиглядящій селектор (прочитайте 30 CSS селекторів, які ви повинні пам'ятати для глибших пояснень), який на початку вказує на безпосередніх потомков елементу з класом 'pure-g-r'. Ці нащадки, до того ж, повинні мати атрибути класу, які починаються з префікса 'pure-u'.

Це направлено, наприклад, на такій div

Селектор використаний всередині директиви @media для руйнування сітки. Однак, цей структурний елемент буде отримувати 100% ширину при вирішенні менше 767px. Також дозволимо схлопування ширини сітки на 50% для пристроїв з дозволом від 480 до 767px. Досягається це шляхом використання медіа-запитів.


Трохи JavaScript

В скрипті 'main.js' трохи допишемо JavaScript, щоб в тому, що всі модулі мають однакову висоту.

У цьому JavaScript-коді визначена функція, яка в циклі перевіряє кожен елемент з класом 'dashboard-piece' в кожному рядку і згодом знаходить елемент з найбільшою висотою. І потім задає висоту всіх інших елементів в цьому рядку дорівнює максимальній висоті.


Висновок

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

У яких ще цілях ви хочете використовувати Pure? Дайте нам знати в коментарях!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.