Головна » Веб дизайн » Створити веб-сайти надшвидко з фундацією 5 [Керівництво]

    Створити веб-сайти надшвидко з фундацією 5 [Керівництво]

    Використання фронтендного фреймворду може поліпшити робочий процес веб-дизайну багатьма способами. Це може допоможе вам дотримуватися сучасних принципів дизайну такі як підхід на основі мобільного зв'язку, семантична розмітка та адаптивний дизайн. Ти можеш скористайтеся багатьма готовими до використання елементами CSS і JavaScript і значно прискорити процес розвитку, звільнення більше часу, щоб зосередитися на візуальному і дизайн користувача.

    Zurb Foundation 5 є одним з найпотужніших фронтендних рамок на ринку. Це логічно побудований, простий у використанні і повністю безкоштовний. Це дозволяє використовувати a гнучка сітка CSS що полегшує створення чистого, зручного для користувача макета. Фундаментні рамки також сильно випробувані, тому він дбає про крос-браузерну та сумісність між пристроями.

    У цьому уроці я покажу вам як можна побудувати веб-сайт надшвидко з Zurb Foundation 5. Ви можете подивитися на кінцевий результат на демонстраційній сторінці.

    Я буду створювати макет сайту, завдання додавання тонких елементів дизайну чекає на вас. Веб-сайт, який ми створимо разом у цьому підручнику, виконає мрію сучасного UX-дизайнера: він буде реагувати, мобільний-перший, зручний, і семантичний.

    У зв'язку з довжиною цього посібника, наведені нижче ярлики для швидкого переходу до потрібного розділу:

    • Завантаження Фонду 5
    • Розуміння сітки
      • Коли використовуються класи великих, середніх і малих N
    • Додавання рядка верхнього меню
    • Заповнення головної частини
      • Додавання панелі для популярних повідомлень
      • Додавання ще 3 повідомлень у популярну панель
      • Догортання CSS
      • Додавання додаткового вмісту
      • Додавання розбивки
    • Заповнення бічної панелі
      • Форма для розсилки
      • Flex відео
      • Меню бічної панелі
    • Висновок

    1. Завантаження Фонду 5

    Ви можете завантажити Фонд 5 у 4 різних формах:

    1. повний код
    2. більш легка версія з лише істотним кодом
    3. користувальницька версія, де ви можете налаштувати те, що вам потрібно, а що ні
    4. версія Sass, якщо ви хочете встановити ваші змінні і міксини в SCSS.

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

    Після завантаження та розпакування файлу zip відкрийте файл browser.html у вашому веб-переглядачі, і ви побачите щось подібне:

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

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

    Правила стилю, які ми додаємо до app.css Файл, який буде достатньо нашим прототипом:

     header margin-bottom: 2em;  .popular-додатковий h4 font-size: 1.125em; margin-top: 0.4em;  .row .row.popular-main margin-bottom: 1.5em;  

    Як основа 5 використовують відносні одиниці, ми повинні використовувати “em”-s або “rem”-s замість пікселів йти в ногу з правилами. (Ви можете прочитати про одиниці CSS: Pixels vs ems vs% тут.) Я використовував розширення Firebug Firefox, щоб визначити, де я повинен перевизначити правила CSS у Фонді 5, ви можете використовувати будь-які інші розширення веб-розробки, якщо хочете.

    Тут, у цьому короткому фрагменті CSS, нам довелося перевизначити CSS за замовчуванням лише один раз, за ​​останнім правилом (.row .row.popular-main). Ось як виглядає демонстраційний сайт зараз:

    4.4 Додавання додаткового вмісту

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

    Фонд 5 має дуже прохолодні попередньо підготовлені стилі мініатюр, які ми будемо використовувати в цьому кроці. Ескізи фондів використовують a Вбудований клас CSS “й” що нам потрібно додати до зображень, які ми хочемо відображати у вигляді ескізів, так, як ви можете побачити їх у фрагменті коду нижче.

    Для кожного останнього повідомлення ми додаємо новий рядок нижче популярної панелі з нашими називається користувацький клас CSS “Останній пост”.

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

    Тепер я використав “середньо-3 колонки” і “середньо-9 стовпців” класів, щоб вони розділили екран на 1: 3, 25% для зображення і75% для тексту вгору від середнього розміру.

    Вставте наступний фрагмент коду під популярною панеллю тричі (для трьох останніх повідомлень). Тут я просто включаю код одного рядка "Останній пост", оскільки всі вони використовують одну і ту ж HTML-розмітку, тільки зміст відрізняється.

     

    Назва останнього повідомлення

    Вміст останньої публікації…

    Наш спеціальний файл CSS, створений на кроці 4.3, app.css також отримує деякі нові правила стилю, щоб зберегти вигляд демонстрації. Примітка: Якщо ви хочете додати свій власний користувальницький CSS до Фонду, ніколи не забувайте перевіряти його за допомогою інструмента веб-розробника, де ви повинні змінити правила за умовчанням.

    У наведеному нижче фрагменті CSS потрібно перевизначити їх у першому правилі (.row .row.latest-post). У другому правилі достатньо просто використовувати власний користувальницький селектор (.latest-post h4).

     .рядок .row.latest-post margin-bottom: 1.5em;  .latest-post h4 margin-top: 0; розмір шрифту: 1.125em; 

    Наш прототип зараз виглядає так:

    4.5 Додавання розбиття

    На цьому етапі ми додамо прохолодне розбиття на сторінки нижче Останні повідомлення. Фонд 5 дає нам руку допомоги своїми зручними, готовими до використання класами розбиття сторінок. Ми використовуємо той самий код на цьому кроці, який можна знайти в “Додатково” у розділі Документи для розбиття сторінок.

      

    Ось останні повідомлення з новим розділом:

    5. Заповнення бічної панелі

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

    У цьому розділі потрібно вставити всі фрагменти коду