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