Буилд Вебситес Суперфаст са Фондацијом 5 [Водич]
Употреба оквира фронтенд-а може побољшати радни процес веб дизајна на много начина. Може помоћи вам да пратите принципе модерног дизајна као што су приступ који се креће први пут, семантичка ознака и одговарајући дизајн. Можете искористите мноштво готових ЦСС и ЈаваСцрипт елемената и значајно убрзати процес развоја, ослобађање више времена за фокусирање на визуални дизајн и дизајн корисничког искуства.
Зурб Фоундатион 5 је један од најмоћнијих фронтенд оквира на тржишту. Логично је направљен, једноставан за употребу и потпуно бесплатан. То вам омогућава да користите а флексибилна ЦСС мрежа то олакшава стварање чистог и једноставног изгледа. Оквир Фондације је такође јако тестиран, тако да се брине о компатибилности међу претраживачима и унакрсним уређајима.
У овом туториалу ћу вам показати како можете изградити веб сајт супербрзи са Зурб фондацијом 5. Можете погледати коначни резултат на демо страници.
Направићу изглед сајта, задатак додавања суптилних елемената дизајна чека на вас. Сајт који ћемо заједно креирати у овом туторијалу ће остварити сан модерног УКС дизајнера: он ће бити одговоран, мобилан-први, усер-фриендли, и семантички.
Због дужине овог водича, ево кратких пречица да бисте брзо дошли до жељеног дела:
- Преузимање фондације 5
- Разумевање мреже
- Када користити класе Ларге-Н, Медиум-Н и Смалл-Н
- Додавање траке главног менија
- Популација главног дела
- Додавање панела за популарне поруке
- Аддинг 3 Море Постс То Популар Панел
- Преттиинг Уп Тхе ЦСС
- Додавање још неког садржаја
- Аддинг Пагинатион
- Популатинг Сидебар
- Формулар за билтен
- Флек Видео
- Мени бочне траке
- Закључак
1. Преузимање фондације 5
Фондацију 5 можете преузети у 4 различита облика:
- комплетан код
- лакша верзија са само основним кодом
- прилагођену верзију гдје можете прилагодити оно што вам је потребно, а што не
- Сасс верзија ако желите да поставите варијабле и микинс у СЦСС.
У овом туторијалу бирам комплетан код са ванилла ЦСС-ом, али наравно можете одабрати било коју другу верзију ако желите да поједноставите свој сајт и користите само оно што вам је заиста потребно.
Када преузмете и распакујете зип датотеку, отворите датотеку индек.хтмл у прегледачу и видећете нешто слично овоме:
Да, девови су укључили корисне линкове у индекс датотеку. Можете га оставити на овај начин и направити нови фајл за ваш прототип са именом хоме.хтмл или нешто слично, али не морате да га задржите као што можете лако доћи до документације Фондације кад год желите.
Отворите датотеку индек.хтмл у свом омиљеном уређивачу кода и избришите све унутар али пре затварања Правила стила која се додају у апп.цсс фајл за прилицно наш прототип су: Како фондација 5 користи релативне јединице, морамо користити “ем”-с или “рем”-с умјесто пиксела држати се правила. (Можете прочитати о ЦСС јединицама: Пикелс вс емс вс% овде.) Користио сам Фирефок проширење Фиребуг да бих одредио где морам да надјачам ЦСС правила Фондације 5, можете да користите било које друге додатке за Веб прегледаче ако желите. Овде, у овом кратком ЦСС исјечку, морали смо само једном прегазити задани ЦСС Фондације, по задњем правилу (.ров .ров.популар-маин). Ево како изгледа демо локација сада: Користећи иста правила као и пре, додаћемо још неког садржаја главном делу странице. Садрзај који цемо додати сада це бити Најновији постови са малим сличицама. Фондација 5 има заиста кул унапред припремљене сличице које ћемо користити у овом кораку. Умањене сличице фондова користе а позвана је ЦСС класа “тх” које морамо додати сликама које желимо приказати као умањене сличице на начин који можете видјети у доњем коду испод. За сваки најновији пост додамо нови ред испод популарног панела са нашим зове се прилагођена ЦСС класа “задње поруке”. На величинама таблета и радне површине приказат ћемо малу сличицу користећи класу сличица Фондације на лијевој страни, те наслов и кратак опис на десној страни. На мобилном уређају наслов и опис ће бити испод минијатуре. Сада сам користио “средњи-3 колоне” и “средњи-9 колоне” да би их поделили на 1: 3, 25% за слику и 75% за текст од средње величине. Уметните следећи исјечак кода испод популарне плоче три пута (за три најновије поруке). Овде сам само укључио код једног последњег реда, пошто сви они користе исту ХТМЛ ознаку, само се садржај разликује. Садржај најновије пост ... Наша прилагођена ЦСС датотека креирана у кораку 4.3, апп.цсс такође добија нека нова правила за стил да би изглед демо уредности остала уредна. Белешка: Ако желите да додате сопствени прилагођени ЦСС у Фондацију, никада не заборавите да проверите, помоћу алата за веб дев, где морате да замените подразумевана правила. У доњем ЦСС исечку морамо да их заменимо у првом правилу (.ров .ров.латест-пост). У другом правилу довољно је само користити властити прилагођени селектор (.латест-пост х4). Наш прототип сада изгледа овако: У овом кораку додаћемо цоол пагинацију испод најновијих постова. Фондација 5 нам пружа руку кроз погодне, спремне за употребу класе пагинација. Користимо исти код у овом кораку који можете пронаћи у “Напредно” унутар документа Пагинатион. Ево последњих постова са недавно додатом одељком Пагинатион: Сада када смо спремни за главни садржај наше демо странице, вријеме је да попуните десни бочни оквир. Десна бочна трака ће склизнути испод главног садржаја на величинама мобилних уређаја и таблета. Морате да убаците све исјечке кода у овај одељак унутар Лева бочна трака ће садржати образац за пријаву на невслеттер (1), најновији видео (2) и мени за сидебар у стилу хармонике испод надимка “Оур Цоокбоок” (3). На крају овог корака ћемо бити спремни за наш демо који ће изгледати овако: Да бисте направили форму у Фондацији 5, не морате да радите ништа друго, само поставите решетку унутар а ХТМЛ таг. Ако погледате одломак кода испод, видећете да смо ставили образац у ред у којем смо поставили различите ЦСС селекторе за све 3 мреже: “смалл-12”, “медиум-9”, и “велики-12”. Изабрали смо ово решење зато што 100% широк образац билтена изгледа цоол на величину мобилног телефона, али је стварно неугодно на величини таблета јер постаје врло широк. Срећом, Фондација 5 нам омогућава да је искористимо “Инцомплете Ровс”: само морамо додати “крај” класи дефиниције ЦСС класе некомплетне колоне. Ево шта ће се десити овде: на мобилној величини бочна трака ће бити приказана испод главног садржаја путем обрасца за пријаву на билтен који покрива цео екран. На средњој бочној траци ће остати под главним садржајем, али Невслеттер Форм ће само покрити 75% екрана, а преосталих 25% ће остати празно.. На величинама радне површине бочна трака ће бити одмах поред главног садржаја, а образац Невслеттер ће поново покрити цијелу ширину бочне траке. Погледајте Грид документе да бисте прочитали више о некомплетним редовима. Сада погледајте унутра заглавие маргин-боттом: 2ем; .популар-додатно х4 фонт-сизе: 1.125ем; маргин-топ: 0.4ем; .ров .ров.популар-маин маргин-боттом: 1.5ем;
4.4 Додавање још неког садржаја
Титле оф Последња порука
.ред .ров.латест-пост маргин-боттом: 1.5ем; .латест-пост х4 маргин-топ: 0; фонт-сизе: 1.125ем;
4.5 Аддинг Пагинатион
5. Попуњавање Сидебара
5.1 Образац за билтен
Пријавите се на наш невслеттер
Формулари за фондације имају многе друге опције распореда, као што су Префик Лабел, Префик Радиус Лабел, Постфик Буттон и Постфик Лабел. Овде смо изабрали опцију Постфик Буттон јер је више прилагођена кориснику: корисници могу кликнути на њу и послати образац одједном.
Унутар обрасца додаћемо нови угњеждени ред који дијели екран на 2: 1. Унос текста ће добити 8 колона и постфик дугме ће добити 4. Пошто желимо да овај распоред буде чак и на екрану мобилног телефона, поставићемо “мали-8 ступаца” и “мали-4 ступца” ЦСС-селектори овде, мала мрежа је најмања величина где желимо да имплементирамо ову ознаку.
Можете погледати још једну нову ствар у ХТМЛ коду изнад које је “колапс” класа. Ово је уградбени стил Фондације 5. По подразумеваној вредности постоји један жлеб између два сусједна ступца, али ако додамо “колапс” у нашем реду, жлијеб ће нестати. Ми то радимо зато што желимо да дугме буде одмах поред уноса текста без икаквог размака између њих.
Сада је време да убаците овај исјечак кода у
5.2 Флек Видео
Испод одељка Невслеттер додаћемо Даили Видео Реципе на наш сидебар. Фондација 5 нам помаже учините да уграђени видеозаписи одговарају и присили их да аутоматски скале са својом функцијом Флек Видео.
Флексибилни видеозаписи користе уграђени “флек-видео” ЦСС цласс. Креирамо нови ред за рубрику Сиде Видео Реципе и смјестимо једну широку колону у њу “мали-12 средњих-9 великих-12 ступова” ЦСС селектори из истог разлога користили смо непотпуни ред у Медијумској мрежи у претходном кораку.
Ево кода који требате залијепити испод одељка Невслеттер. Можете користити било који видео са Иоутубе, Вимео итд.
Даили Видео Реципе
5.3 Мени Сидебар
У менију Сидебар-а користићемо Аццордион карактеристику Фондације 5. Хармоније су веб елементи који проширују и сабирају садржај у логичке секције.
На нашем демо сајту ове логичке секције су 3 различите групе хране (Маин Дисхес, Сиде Дисхес, Десертс), а свака група садржи мање групе као што су “Поултри”, “Свињетина”, “Говедина”, “Вегетариан”.
Целу бочну хармонику сместимо у једну широку колону са истом логиком као у претходним корацима 5.1 и 5.2. У њега смо ставили хармонику као неуређену листу са одговарајућим уграђеним ЦСС класама као што је “хармоника” и “хармоника-навигација”.
Како хармоникаре фондације раде са ЈаваСцрипт-ом, можете прилагодити његово понашање уз помоћ унапред изграђених ЈаваСцрипт варијабли ако желите. Да бисте то урадили, погледајте “Опционална ЈаваСцрипт конфигурација” секција у Аццордион Доцс. Следећи исјечак кода се налази испод одељка Флек Видео унутар индек.хтмл фајла.
Закључак
Сада када смо спремни за нашу демо страницу, да видимо шта још можете постићи са Фондацијом 5. Елементи које смо користили у овом демо-у само су мали скуп значајки оквира Фоундатион. Постоје многе друге ствари које можете искористити у свом дизајну, као што су прилагодљиве траке с иконама, крушне мрвице, лајтбоксови, клизачи распона, валидација образаца и многе друге. Документи су прилично добро написани и помажу програмерима са многим примерима кода.
Ако сте упознати са Сасс-ом имате још више опција, јер сваки одељак у Документима објашњава како можете да направите сопствене миксове и које Сасс-варијабле можете да користите за прилагођавање сајта. Пре него што почнете да дизајнирате своју веб страницу, не заборавите да проверите компатибилност оквира Фондације да бисте били сигурни да ради на свим прегледачима које треба да изградите за.
- Виев Демо
- Довнлоад Соурце
