Створити веб-сайти надшвидко з фундацією 5 [Керівництво]
Використання фронтендного фреймворду може поліпшити робочий процес веб-дизайну багатьма способами. Це може допоможе вам дотримуватися сучасних принципів дизайну такі як підхід на основі мобільного зв'язку, семантична розмітка та адаптивний дизайн. Ти можеш скористайтеся багатьма готовими до використання елементами CSS і JavaScript і значно прискорити процес розвитку, звільнення більше часу, щоб зосередитися на візуальному і дизайн користувача.
Zurb Foundation 5 є одним з найпотужніших фронтендних рамок на ринку. Це логічно побудований, простий у використанні і повністю безкоштовний. Це дозволяє використовувати a гнучка сітка CSS що полегшує створення чистого, зручного для користувача макета. Фундаментні рамки також сильно випробувані, тому він дбає про крос-браузерну та сумісність між пристроями.
У цьому уроці я покажу вам як можна побудувати веб-сайт надшвидко з Zurb Foundation 5. Ви можете подивитися на кінцевий результат на демонстраційній сторінці.
Я буду створювати макет сайту, завдання додавання тонких елементів дизайну чекає на вас. Веб-сайт, який ми створимо разом у цьому підручнику, виконає мрію сучасного UX-дизайнера: він буде реагувати, мобільний-перший, зручний, і семантичний.
У зв'язку з довжиною цього посібника, наведені нижче ярлики для швидкого переходу до потрібного розділу:
- Завантаження Фонду 5
- Розуміння сітки
- Коли використовуються класи великих, середніх і малих N
- Додавання рядка верхнього меню
- Заповнення головної частини
- Додавання панелі для популярних повідомлень
- Додавання ще 3 повідомлень у популярну панель
- Догортання CSS
- Додавання додаткового вмісту
- Додавання розбивки
- Заповнення бічної панелі
- Форма для розсилки
- Flex відео
- Меню бічної панелі
- Висновок
1. Завантаження Фонду 5
Ви можете завантажити Фонд 5 у 4 різних формах:
- повний код
- більш легка версія з лише істотним кодом
- користувальницька версія, де ви можете налаштувати те, що вам потрібно, а що ні
- версія Sass, якщо ви хочете встановити ваші змінні і міксини в SCSS.
У цьому підручнику я виберу повний код з ванільним CSS, але, звичайно, ви можете вибрати будь-які інші версії, якщо ви хочете упорядкувати свій сайт і використовувати тільки те, що вам дійсно потрібно.
Після завантаження та розпакування файлу zip відкрийте файл browser.html у вашому веб-переглядачі, і ви побачите щось подібне:
Так, розробники включали зручні посилання в індексному файлі. Ви можете залишити його таким чином і створити новий файл для вашого прототипу з назвою home.html або щось подібне, але вам не потрібно зберігати його, оскільки ви можете легко дістатися до документації фонду, коли ви захочете.
Відкрийте файл index.html у вашому улюбленому редакторі коду та видалити все всередині , але перед закриттям Правила стилю, які ми додаємо до app.css Файл, який буде достатньо нашим прототипом: Як основа 5 використовують відносні одиниці, ми повинні використовувати “em”-s або “rem”-s замість пікселів йти в ногу з правилами. (Ви можете прочитати про одиниці CSS: Pixels vs ems vs% тут.) Я використовував розширення Firebug Firefox, щоб визначити, де я повинен перевизначити правила CSS у Фонді 5, ви можете використовувати будь-які інші розширення веб-розробки, якщо хочете. Тут, у цьому короткому фрагменті CSS, нам довелося перевизначити CSS за замовчуванням лише один раз, за останнім правилом (.row .row.popular-main). Ось як виглядає демонстраційний сайт зараз: Використовуючи ті ж самі правила, що й раніше, ми додамо більше змісту до головного розділу сторінки. Вміст, який ми додамо зараз, буде Останні повідомлення з невеликими мініатюрами. Фонд 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). Наш прототип зараз виглядає так: На цьому етапі ми додамо прохолодне розбиття на сторінки нижче Останні повідомлення. Фонд 5 дає нам руку допомоги своїми зручними, готовими до використання класами розбиття сторінок. Ми використовуємо той самий код на цьому кроці, який можна знайти в “Додатково” у розділі Документи для розбиття сторінок. Ось останні повідомлення з новим розділом: Тепер, коли ми готові до основного змісту нашого демонстраційного сайту, настав час заповнити праву бічну панель. Права бічна панель буде скочуватися нижче основного вмісту на розмірах мобільних пристроїв і планшетів. У цьому розділі потрібно вставити всі фрагменти коду Ліва бічна панель буде містити форму реєстрації бюлетеня (1), останнє відео (2) і меню бічної панелі у стилі акордеона під псевдонімом “Наша Кулінарна книга” (3). Наприкінці цього кроку ми будемо готові з нашою демонстрацією, яка виглядатиме так: Щоб побудувати форму в Foundation 5, вам не потрібно робити нічого іншого, просто помістіть сітку всередину a Тег HTML. Якщо ви подивитеся на фрагмент коду нижче, ви побачите, що ми ставимо форму в рядку, в якому встановлюємо різні CSS-селектори для всіх 3-х сіток: “малий-12”, “середовище-9”, і “великий-12”. Ми вибрали це рішення, оскільки 100% широка форма бюлетеня виглядає круто на мобільному розмірі, але насправді дуже незручно на розмірі планшета, оскільки це стає дуже широкий. На щастя, Фонд 5 дозволяє нам використовувати його “Неповні рядки”: ми просто повинні додати “кінець” до класу CSS визначення неповного стовпця. Отже, це те, що відбудеться тут: на мобільному розмірі бічна панель буде відображатися нижче основного вмісту за допомогою форми реєстрації бюлетеня, що охоплює весь екран. На середньому розмірі бічна панель залишатиметься під основним вмістом, але форма бюлетеня просто покриє 75% екрану, а решта 25% залишаться порожніми. На розмірі на робочому столі бічна панель буде поруч із основним вмістом, а форма бюлетеня знову охоплює всю ширину бічної панелі. Див. Документи Grid, щоб дізнатися більше про неповні рядки. Тепер загляньте всередину header margin-bottom: 2em; .popular-додатковий h4 font-size: 1.125em; margin-top: 0.4em; .row .row.popular-main margin-bottom: 1.5em;
4.4 Додавання додаткового вмісту
Назва останнього повідомлення
.рядок .row.latest-post margin-bottom: 1.5em; .latest-post h4 margin-top: 0; розмір шрифту: 1.125em;
4.5 Додавання розбиття
5. Заповнення бічної панелі
5.1 Форма бюлетеня
Підпишіться на нашу розсилку
Форми Фонду мають багато інших варіантів компонування, такі як префікс, мітка префікса, кнопка Postfix і мітка Postfix. Тут ми обрали опцію «Кнопка Postfix», оскільки вона більш зручна для користувачів: користувачі можуть натиснути на неї і відправити форму відразу.
Всередині форми буде додано новий вкладений рядок, який розділить екран на 2: 1. Введення тексту отримає 8 стовпців, а кнопка Postfix отримає 4. Оскільки ми хочемо, щоб це розташування було навіть на екрані мобільного, ми встановимо “малих-8 колонок” і “Малі-4 колонки” CSS-селектори тут, Small Grid є найменшим розміром, де ми хочемо реалізувати цю розмітку.
Ви можете побачити ще одне нове в HTML-коді, над яким є “колапс рядків” клас. Це вбудований стиль Foundation 5. За замовчуванням існує жолоб між двома сусідніми стовпцями, але якщо додати “крах” класу до нашого ряду, жолоб зникне. Ми робимо це, тому що ми хочемо, щоб кнопка була поруч із текстом без будь-якого проміжку між ними.
Тепер настав час вставити цей фрагмент коду в
5.2 Флекс-відео
Під розділом бюлетеня ми додамо щоденний відеорецепт до нашої бічній панелі. Фонд 5 допомагає нам зробити відгуки вбудованих відео та змусити їх автоматично масштабувати з функцією Flex Video.
Flex-відео використовує вбудований “flex-відео” Клас CSS. Ми створюємо новий рядок для бічної панелі "Щоденний відеорецепт" і розміщуємо в ньому один широкий стовпець “малі-12 середніх-9 великих-12 стовпців закінчуються” CSS-селектори з тієї ж причини використовували неповний рядок в Medium Grid на попередньому кроці.
Ось код, який потрібно вставити нижче розділу Розсилки. Ви можете використовувати будь-яке відео з Youtube, Vimeo і т.д..
Щоденний відеорецепт
5.3 Меню бічної панелі
Для меню бічної панелі ми будемо використовувати функцію акордеону Foundation 5. Акордеони - це веб-елементи, які розгортають і згортають вміст у логічні розділи.
На нашому демонстраційному сайті ці логічні розділи складаються з 3 різних груп продуктів (основні страви, бічні страви, десерти), і кожна група містить більше менших груп, таких як “Птиця”, “Свинина”, “Яловичина”, “Вегетаріанські”.
Ми розміщуємо всю бічну панель в одному широкому стовпчику з тією ж логікою, що і в кроках 5.1 і 5.2. Ми розміщуємо в ньому гармонію як невпорядкований список з відповідними вбудованими класами CSS, такими як “акордеон” і “гармошка-навігація”.
Оскільки Accordions Фонду працюють з JavaScript, ви можете налаштувати його поведінку за допомогою попередньо побудованих змінних JavaScript, якщо хочете. Для цього подивіться на “Додаткове налаштування JavaScript” розділ Документів Аккордеона. Наступний фрагмент коду знаходиться нижче розділу Flex Video у файлі index.html.
Висновок
Тепер, коли ми готові з нашим демонстраційним сайтом, давайте подивимося, що ще можна досягти за допомогою Foundation 5. Елементи, які ми використовували в цій демонстрації, є лише невеликим набором можливостей основи Foundation. Є багато інших речей, які ви можете використовувати в своєму дизайні, такі як настроювані панелі іконок, сухарі, лайтбокси, повзунки діапазону, перевірка форми та багато інших. Документи досить добре написані, і вони допомагають розробникам з багатьма прикладами коду.
Якщо ви знайомі з Sass, у вас є ще більше варіантів, оскільки кожен розділ у Документах пояснює, як ви можете створювати власні міксини та які Sass-змінні можна використовувати для налаштування вашого сайту. Перш ніж розпочати розробку веб-сторінки, не забудьте перевірити сумісність фреймворку Фонду, щоб переконатися, що він працює на всіх веб-переглядачах, для яких потрібно створити.
- Переглянути демонстрацію
- Завантажити джерело
