ZURB Foundation: CSS-фреймворк інтерфейсу користувача для адаптивного інтерфейсу

У 2010 році дизайнерське агентство ZURB створило структуру CSS з метою започаткування сервісу для сприяти створенню прототипів e скоротити час розробки. Для цього було вибрано найкращі фрагменти, шаблони та шаблони, щоб об’єднати їх у Foundation, фреймворк, який було опубліковано як проект із відкритим вихідним кодом у 2011 році та який з того часу продовжує бути безкоштовним для громадськості.

Foundation — це адаптивний зовнішній фреймворк, що складається з ефективних компонентів HTML і CSS для налаштування інтерфейсу користувача (Інтерфейс користувача), різні фрагменти та шаблони, а також численні додаткові розширення JavaScript. Веб-фреймворк має a модульна структура і був розроблений для налаштування проектів, доступних з різних пристроїв; поширюється разом з Ліцензія MIT і його можна завантажити з обох офіційна домашня сторінка бути на GitHub. Починаючи з версії Foundation 4.0, застосовується робоче положення «Мобільні перш за все», тож відтоді ми працюємо за допомогою кількох нових модулів, щоб оптимізувати продуктивність і зменшити розмір файлів у рамках. Окрім стандартної версії Foundation, ZURB також опублікував інші варіанти для розробки електронних розсилок (Фонд для електронних листів) і односторінкові сайти (Основа для програм).

Foundation, адаптивний веб-фреймворк, що характеризується модульною структурою, має перш за все гнучкість. Перед завантаженням у вас є можливість вирішити, які компоненти вибрати, а які ні: таким чином ви можете створити свій власний варіант колекції веб-коду, не змушуючи завантажувати модулі, які вам не потрібні. І якщо трапиться так, що ви зрозумієте, що вам потрібен компонент, який ви не вибрали під час завантаження, ви можете легко додати його до фреймворку пізніше. Таким же чином можна видалити модулі, які вам більше не потрібні: таким чином ви завжди гарантуєте можливість мати лише ті функції, які ви вважаєте дійсно необхідними для реалізація вашого веб-проекту.

Для Foundation 6.0 ви можете вибрати більше 40 компоненти належать до наступних семи секторів:

• сітка: Вирішальним компонентом адаптивного веб-дизайну є гнучкий макет сітки із стандартною шириною 1200 пікселів. Ви також можете скасувати вибір цього модуля, однак система формує основу для розробки веб-проекту, доступного з різних пристроїв і сумісного в різних масштабах роздільної здатності. На додаток до цього, починаючи з версії 6.0, також є можливість вибрати модуль «Flex Grid», який дозволяє ще більш гнучко розташовувати елементи, працюючи на основі моделі CSS flexbox (наприклад, горизонтальної або вертикальної організація об'єктів).

• Загальне: Серед загальних модулів (частиною яких офіційно також є Grid) є перш за все класи плавати e видимість, завдяки якому можна defiвизначати правила поведінки щодо розташування та видимості окремих елементів; Крім того, у цій області ви також знайдете компонент для створення форм, а також модуль друкарні, що містить основні формати для написання та тексту.

• Контроль: усі найважливіші інтерактивні елементи вашого веб-проекту містяться тут. Наприклад, це кнопки, які одним натисканням спрямовують користувача в інше місце або закривають вибрані елементи. Існують також модулі, за допомогою яких можна інтегрувати слайдери і пульсова анти з режимом вкл/викл.

• навігація: У конфігурації передньої частини навігаційні елементи, звичайно, не можуть бути відсутніми, тому навіть для вашого проекту, який буде виконано за допомогою ZURB Foundation, у вас є велика різноманітність модулів для налаштування рядки меню та меню (розкривний список, розкривний список, розгортка), додати навігаційні шляхи (навігаційні сухарі) або додати номер до сторінок.

• Контейнер: Контейнери — це фантастична можливість включати різні елементи, наприклад текст, зображення чи відео, у спільний простір. Тут ви знайдете стилі для класичних віджетів вмісту, таких як спадні меню, вкладки, каскадні сектори або модальні діалоги.

• Медіа: у розділі «Медіа» ви знайдете рамкові модулі, які будуть корисні для включення мультимедійних елементів. Компонент "Flex Video", наприклад, підтримує вас увставка відео і забезпечує адаптацію вмісту до різних розмірів дисплея та типів роздільної здатності. Крім того, є компоненти для попереднього перегляду зображень, а також корисні поради щодо використання інструментів.

• Підключати: Нарешті ви можете вибрати кілька дуже корисних розширень для ZURB Foundation, які полегшать вам роботу з веб-платформою. За допомогою бібліотеки «Motion UI», наприклад, ви маєте можливість завантажити дуже корисну бібліотеку, навіть якщо вона доступна лише для варіанту Sass, завдяки чому створення уривків інтерфейсу користувача та анімації стає легким.

Крім того, перед завантаженням ви можете вибрати, чи потрібно defiзакінчити деякі стандартні параметри фреймворка. Сюди входять параметри зміни кількості або товщини стовпців і максимальної ширини системи Grid, а також різні параметри кольорів і визначення напрямку тексту (зліва направо або справа наліво). Якщо ви хочете спочатку протестувати фреймворк, не вивчаючи функціонування окремих модулів, ви також можете завантажити Foundation як повну версію (Цілковита) або як легший базовий варіант (істотний).

Якщо ви задоволені можливостями, які пропонує CSS, а потім просто транскрибуєте стилі у завантажений файл CSS, ви, безперечно, прийняли правильне рішення. Проте фреймворк Foundation має ще одну особливість: основа коду CSS написана мовою таблиць стилів Sass (Синтаксично чудові таблиці стилів), який є так званим препроцесором для CSS. Sass дає змогу працювати над таблицями стилів .scss які згодом можна скомпільувати або транскрибувати в популярні файли .css, які потім читаються та інтерпретуються браузерами.

Якщо ви використовуєте варіант Sass фреймворку ZURB, ви отримаєте такі переваги:

• Спрощений синтаксис (Sass або CSS), що полегшує написання таблиць стилів

• Можливість defiніре з моделі (Mixins), щоб централізовано зберігати повторювані формати та інтегрувати їх за бажанням

• Проста комбінація різних таблиць стилів щоб мінімізувати запити HTTP

• Використовуючи змінні та функції централізовано обмінюватися кольорами, відстанями, шрифтами тощо

• Код можна просто структурувати завдяки Гніздування в ієрархічному порядку, що дозволяє вам працювати чистіше без надто великої кількості рядків коду

Компілятор Sass спочатку написаний на Ruby. Однак, якщо ви не використовуєте цю мову програмування, вам не доведеться встановлювати її для Sass, оскільки з LibSass у вас буде альтернатива, написана на C. LibSass працює з усіма операційними системами, які використовуються, і її можна легко встановити на Node.js workflow, тобто вносити зміни в код у Sass і автоматично переводити їх у CSS.

З переходом від версії 5 до Foundation 6.0 ZURB знову зменшив розмір файлу всього фреймворку: з його 60 КБ CSS і 84 КБ JavaScript, Foundation користується репутацією одна з найбільш оптимізованих платформ розробки і прочитав, що є. Завдяки вищезгаданій модульній структурі та певній свободі налаштування ви навіть можете ще більше зменшити розмір фреймворку. У поєднанні з гнучкою сіткою та ін атрибутиARIA (наприклад, для транспозиції ефективної клавіатурної навігації), реалізованої ZURB, основні умови, необхідні для реалізації веб-проекту, який сумісний на різних платформах і пристроях, можна вважати повністю задоволеними. Атрибути ARIA найкраще задокументовані та доступні там, де ви маєте намір значно оптимізувати доступність свого веб-сайту.

Якщо ви працюєте з версією фреймворку Sass, переконайтеся, що ви розширили свої параметри для налаштування елементів дизайну та макетів, які ви вставляєте. Використання цих спеціальних таблиць стилів аж ніяк не є легким для новачків і вимагає певного періоду навчання, що, як правило, також справедливо для платформи. Я також'інтеграція зовнішніх компонентів, а також модулі та основні проекти в іншій структурі або в CMS дуже складні. Невеликі недоліки, які показує ZURB Foundation порівняно з іншими фреймворками CSS, такими як Twitter Bootstrap, полягають у обмеженій різноманітності шаблонів і відсутності підтримки старіших версій Internet Explorer.

ZURB Foundation супроводжує розробників від першого прототипу до готового до використання веб-сайту та характеризується перш за все власними ефективність. Якщо ви виявите, що деякі компоненти є зайвими, ви можете скасувати їх вибір, не впливаючи на функціональність інших елементів. Підсумовуючи, структура CSS характеризується особливо струнким кодом, який підкреслює лейтмотив, обраний ZURB «Мобільний насамперед». Разом з надзвичайно гнучка система Grid, який ви можете додатково адаптувати за допомогою Sass, фреймворк ідеально підходить для розробки чуйний передній кінець які мають переваги у високій швидкості завантаження даних і великій доступності, а також адаптації до різних розмірів екрана.

Ви також можете використовувати фреймворк ZURB для створення індивідуальних і, можливо, більш складних веб-проектів, однак це пов’язано зі значним перевантаженням енергії та вимагає хорошого розуміння фрагментів.