Створюємо чуйні сайти з допомогою Foundation

2 хв. читання

Відкрийте для себе нові можливості 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 він вже постачається, у нас немає необхідності ще раз його підключати, під'єднати потрібно тільки сам плагін. Робимо це знизу документа, безпосередньо перед закриттям :

 

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

$(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 гарна тим, що вона є вкрай адаптивною і чуйною, в не залежності від того, який пристрій у користувача. Якщо ми хочемо створити горизонтальний блок, то просто додамо контейнеру

клас row, якщо ж колонку, то - клас column, якщо ми хочемо колонку ширше, ніж та, що у нас вийшла, додамо ще один клас — large-12. Все гранично просто. Створимо елемент і вкажемо для нього атрибут data-topbar. Усередині нього створимо список. Перший елемент списку не буде видно на комп'ютерах, а на мобільних пристроях буде відповідати за приховування та відображення головного меню (burger menu, "≡").

 

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

з класом top-bar-section. Переконайтеся, що застосували правильний клас. Сімейство top-bar класів має масу магічних можливостей, організованих за допомогою JS, і грає далеко не останню роль у тому, щоб ваш сайт виглядав красиво і стильно. Усередині
створимо ненумерований список, який виступатиме в ролі меню, яке знаходиться зліва, тому додамо йому клас left. Можна також додати клас has-dropdown, якщо ми хочемо дозволити випадаюче меню, а Foundaton зробить всю складну роботу за нас.

 

Вкладки

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

    , який є списком наших вкладок, також, додамо клас tabs і супроводимо вказанням атрибута data-tab.

     

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

     

    Lightbox галерея

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

     

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

     

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

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

    Newsletter Sign Up Please enter your name Please enter your email address

     

    Стилі для всіх кнопок та полів уже задані, тому нам не потрібно додатково їх стилізувати. Як бачите, 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

    Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
    Codeguida 6.8K
    Приєднався: 6 місяців тому
    Коментарі (0)

      Ще немає коментарів

    Щоб залишити коментар необхідно авторизуватися.

    Вхід / Реєстрація