Foundation фреймворк – базовий шаблон

Foundation framework

Foundation асоціює себе у якості першого і найдосконалішого адаптивного інтерфейсного фреймворку у світі, який дозволяє швидко створювати прототипи та створювати сайти та програми, які працюють на будь-якому пристрої (від смартфонів до настільних комп’ютерів і телевізорів) за допомогою бібліотеки перевірених компонентів. Цей фреймворк призначений для створення інтерфейсу або клієнтської частини веб-сайту або веб-програми, включає адаптивну сітку, що повністю настроюється.  Foundation повністю працює у веб-переглядачі, тому фахівцям з дизайну чи UX легко ввійти та працювати локально, не залучаючи ІТ спеціалістів. Foundation створено за допомогою HTML, CSS і Javascript.

Давайте розберемося, що пропонує нам Foundation фреймворк.

Ви можете завантажити архів, який містить вісім адаптивних шаблонів, щоб почати свої проекти.

Ви отримаєте архів, у якому містяться 10 html файлів – Новини або журнал, Нерухомість або подорожі, Домашня сторінка сайту електронної комерції, Агентство, Блог з боковою панеллю, Одна колонка блогу, Портфоліо, Сторінка продукту.

Слід зауважити, що архів містить лише HTML файли, які підвантажують з хмари файл foundation.min.css і ви дійсно отримуєте доволі охайні, симпатичні шаблони.

Робота в локальному офлайн середовищі

Для роботи в локальному офлайн середовищі варіант набору з 10 html файлів  не підійде, адже нам не вистачатиме саме файлу foundation.min.css, який без наявності інтернету нам буде не доступний.

Отже, потрібно розуміти, що головний файл, який містить усі css фішки дизайну у даному фреймворці – це foundation.min.css. Отже нам потрібно його отримати на наш комп’ютер.

Це не проблема і робиться це зовсім легко! Його можна завантажити собі на комп’ютер за наступним посиланням, або завантажити архів з початковим шаблоном зі скомпільованим CSS і JavaScript, а також початковий файл `index.html`, який ви можете змінівати на Ваш розсуд.

Foundation-sites-шаблони для офлайн, Foundation-sites-шаблони для онлайн

Foundation-sites-шаблони для офлайн, Foundation-sites-шаблони для онлайн

На своєму комп’ютері створіть два варіанти папок для Foundation фреймворку онлайн, та Foundation фреймворку офлайн, наприклад:foundation-sites-templates for offline та foundation-sites-templates for online.

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

Робочу папку foundation-sites-templates for online Ви будете використовувати для роботи з підключеним інтернетом, а от папку foundation-sites-templates for offline Ви використаєте для роботи з Foundation фреймворком без підключеного інтернету.

Кілька кроків для налаштування локального використання:

автономна структура фундаментуЯ пропоную Вам найпростіший метод випробувати 10 html файлів з набору, який Ви завантажили за посиланням вище.

Зауважу, що у даній публікації я не розглядаю відразу можливості використання доного фреймворку в режимі розробки, ми робимо лише легке ознайомлення з ним.

  1. У папці foundation-sites-templates for offline створіть папку під назвою css.
  2. Помістіть (скопіюйте) туди попередньо завантажений foundation.min.css;
  3. Відкрийте html файл у редакторі коду, який Ви використовуєте, або у стандартному текстовому редакторі, знайдіть рядок коду

 <link rel="stylesheet" href="https://dhbhdrzi4tiry.cloudfront.net/cdn/sites/foundation.min.css">

і замініть його на  <link rel="stylesheet" href="css/foundation.min.css">

і Ваш файл буде чудово відображатися!

Початковий шаблон HTML

Розробники рекомендують почати роботу із наступного шаблону HTML і потім вже адаптувати його до своїх потреб. Обов’язково додайте .no-js клас до html тегу вашого шаблону. Додавання цього класу запобігає появі нестилізованого вмісту для низки основних компонентів.

 

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Starter Template</title>
    <link rel="stylesheet" href="css/foundation.css" />
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

Хочу звернути особливу увагу на підключення JavaScript файлів – вони розміщені перед закриваючим тегом <body>

 <script src="js/vendor/jquery.js"></script>
  <script src="js/vendor/what-input.js"></script>
  <script src="js/vendor/foundation.js"></script>
  <script src="js/app.js"></script>
</body>

 

 

Залишити відповідь