Създаване на отзивчив уебсайт с Фондация

В мрежата има много полезни инструменти за създаване на отзивчиви сайтове, включително готови решения за шаблони, включително Twitter Bootstrat, 1140 Grid, Skeleton и др. Използването на рамки, разбира се, има своите недостатъци, но основното им предимство е, че те спомагат за значително намаляване на времето за създаване на сайтове. Днес искаме да ви запознаем с фондацията Zurb и да научим как да направите прост шаблон за блог, използвайки тази рамка.

Краен резултат:

Представяме фондация

Ние създаваме структурата на сайта

Модулната мрежа на рамката (12 колони по подразбиране) ви позволява лесно да създавате отзивчиви шаблони за страници за настолни и мобилни устройства. Ако сте запознати с мрежовите системи, ще се чувствате като у дома си. Състои се от два ключови елемента: редове и колони. Редовете създават максимална ширина и съдържат колони, които формират структурата. Размерът на колоните ще се промени в зависимост от размера на екрана на монитора. Задали сме максималната ширина на колоната (.ред ) 1000px.

Първо, нека дефинираме „основата“. Структурата на оформлението на нашия блог ще изглежда по следния начин:

Добавете лого

Бих искал да отбележа, че Фондацията има добра типография с базова линия и е много удобна за работа. Първо ще добавим следния код за нашето лого:

След това ще създадем нов лист със стилове и ще го прикачим към html документа (ние го наричаме main.css). За да заменим текста с картинка, ще използваме следното решение:

---