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

Як випливає з назви, Foundation допомагає закласти основу для створення чуйного сайту. Це легкий фреймворк, який містить найсучасніші рішення для швидкої розробки. В останній версії розробники внесли ряд змін і поліпшень, щоб спростити розробку згідно з принципом mobile-first, як найбільш розумним шляхом створення таких сайтів. У новій версії ZURB приділив найбільшу увагу рефакторингу коду з метою підвищення швидкодії роботи. Однією з основних змін є те, що тепер рішення для реалізації чуйної роботи з зображеннями вбудовано безпосередньо в сам фреймворк. Також, тепер будь-який формат даних, які ви використовуєте: стилі, зображення або скрипти, буде автоматично перетворено в відповідний для цільового пристрою формат. Для підвищення швидкодії Zepto.js був замінений на JQuery 2.0. Навігація тепер реалізована на рівні ядра (v5.0) з допомогою CSS анімації, замість canvas, який використовувався в попередніх версіях. Ще деякі зміни, які варто відзначити - сітка середнього розміру і вбудований fastclick.js, який подарує користувачам мобільних пристроїв більш яскраві відчуття при роботі з сайтом. А система управління компонентами Bower і інтеграція з Sublime Text допоможуть вам автоматизувати процес розробки.

Завантаження та встановлення

Для початку відвідайте сайт ZURB і завантажте останню версію фреймворку. На час написання цього керівництва останньою версією була 5.3, тому все, що написано тут, справедливо саме для неї. Foundation дозволяє писати стилі як використовуючи стандартний CSS, так і препроцесор SASS, однак щоб спростити розуміння статті для новачків, у цій статті ми будемо працювати з традиційним CSS. Після того, як завантаження буде завершене, розпакуйте архів і відкрийте index.html. Більшість бібліотек і стилів вже підключено до цього файлу, тому основна структура у нас є вже з самого початку. Видалимо все, що знаходиться всередині тега  до підключення JQuery та додамо наші власні стилі в :

Тепер ми готові до того, щоб почати.

Чуйна карусель

Давайте щось змінимо, наприклад, додамо на наш сайт JavaScript карусель. У Foundation є своє власне рішення для створення слайдерів, яке називається Orbit, воно рекомендується до використання починаючи з версії 5.3. Але також існують деякі слайдери від інших розробників, які чудово справляються зі своїм завданням і уживаються з Foundation, в тому числі Owl Carousel і Slick.  Я буду використовувати перший. Викачаємо його, розпакуємо і додамо його стилі в наш проект:

Для роботи Owl потрібен JQuery 1.7, але так як разом з Foundation він вже постачається, у нас немає необхідності ще раз його підключати, під'єднати потрібно тільки сам плагін. Робимо це знизу документа, безпосередньо перед закриттям :

  

    
Foundation Framework
    
  
  

  

Тепер нам залишилося викликати функцію ініціалізації слайдера:

$(document).ready(function() {
   $("#owl").owlCarousel({
        navigation : true, 
        slideSpeed : 300,
        paginationSpeed : 400,
        singleItem:true
   });
});

Додамо трохи стилю:

#owl .item img{
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    z-index:10;
}

Ми дали зображенню position: relative, тому що в майбутньому розмістимо заголовок H1 нагорі. Давайте задамо позицію заголовку і налаштуємо типографіку:

#owl .item h1 {
    position: absolute;
    top: 40%;
    left: 27%;
    z-index: 20;
    margin:0;
    color: #ffffff;
    text-align: center;
    font-weight: 900;
    font-size: 450%;
    text-transform: uppercase;
    letter-spacing: 10px;
}

Навігація і сітки

Однією з особливостей, які роблять фреймворки на зразок Foundation привабливими для розробки, є власна система сіток, тобто розмітки. Розмітка відбувається на одному диханні. Система сіток в Foundation гарна тим, що вона є вкрай адаптивною і чуйною, в не залежності від того, який пристрій у користувача. Якщо ми хочемо створити горизонтальний блок, то просто додамо контейнеру

    
Menu

Нижче панелі навігації створимо

  
Home
  
About
    

      
Page 1
    
  

Вкладки

Проблема взаємодії з великою кількістю контенту в одному контейнері вирішується використанням вкладок. У Foundation за це відповідає компонент Tabs. Почнемо з того, що обгорнемо панель перемикання вкладок в row-контейнер, великого розміру. Додамо йому клас large-12. Для

    
About the Company
    
    
Our Goals
    
    
Expert Knowledge
    
    
Customer Support
    

Кожен елемент списку має клас tab-title, а його вміст є заголовком вкладки. Клас acitve у першого елемента вказує на те, що ця вкладка є активною. Тепер створимо контейнер з класом tabs-content, а всередині нього ще один з id panel1-1, щоб пов'язати його з конкретною вкладкою:

Lightbox галерея

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

Тепер, якщо ви натисните на мініатюру, відкривається lightbox-галерея.  

Форма підписки на розсилку

Найчастіше написання власного скрипта для валідації форм є досить трудомістким завданням. На щастя у Foundation є дещо для нас. Це не тільки чудова система розмітки, але й Abide - потужна бібліотека для валідації HTML5 форм. Щоб скористатися можливостями Abide, потрібно просто додати необхідному елементу атрибут data-abide. За допомогою додаткових аттрибутів ми можемо вказати, які з полів є обов'язковим для заповнення. Також для кожного поля можна додати текст помилки, якщо користувач зробив щось неправильно:

    

        
Newsletter Sign Up
        Name:
            
        
        Please enter your name
        Email:
            
        
        Please enter your email address
        
        Third Party Promotional Emails
        Submit
    

Стилі для всіх кнопок та полів уже задані, тому нам не потрібно додатково їх стилізувати. Як бачите, Foundation знову робить всю складну работу за нас. Закінчимо створення сайту, додавши футер:

Трохи стилів:

#footer {
  background-color: #e3e7e9;
}
#footer ul {
  padding-top: 10px;
}
#footer ul li {
  display: inline-block;
  margin:0 15px 0 0;
}
#footer .copyright {
  padding-top: 10px;
  text-align: right;
}

Нам вдалося швидко зібрати чуйний, grid-based сайт, з мінімальними витратами часу. Foundation — простий у використанні, потужний інструмент, який дозволяє легко створювати і прототипувати сайти для будь-якого пристрою.
 

Джерело: www.creativebloq.com/web-design/build-responsive-sites-foundation-11513848