CSS фреймворки

Вы потратили уже много времени, создавая прекрасную базу знаний по HTML, CSS и даже дизайну. Но раскладывать все элементы в макете вручную и каждый раз повторять одно и то же при написании кода может реально раздражать. Если бы был способ избавиться от этой рутины...

На помощь придут фреймворки! Такие фреймворки как Twitter Bootstrap и Zurb Foundation уже сделали за вас всю тяжелую работу по компоновке часто используемого CSS кода, иконок и всяких интерактивностей (таких как выпадающее меню). Все, что вам нужно сделать, это понять, как требуется спланировать свой сайт и какие классы используются для определения отдельных групп стилей.

Фреймворки позволяют вам уделять больше внимания построению классных сайтов и меньше тому, какой код должен быть написан для них со стороны фронт-енда. Они стоят того, чтобы их изучить, и хороши для оперативного создания сайтов. Как только вы совершите путешествие сквозь Bootstrap, вы начнете рассматривать каждый попадающийся сайт (особенно недавно созданные) и замечать ужасающее количество схожих вещей... это один из недостатков фреймворков.

Пункты для размышления

• Что такое CSS фреймворки?
• Как, собственно, работают фреймворки?
• Как взаимодействовать с фреймворком, чтобы получить то, что вы хотите?
• Что такое Twitter Bootstrap?
• Что такое Zurb Foundation?
• Какие еще фремворки вы можете назвать?
• Каковы недостатки использования фреймворков?

Задание

1. Прочитайте про фреймворки для дизайнеров от A List Apart
2. Прочитайте про создание Twitter Bootstrap от A List Apart
3. Выбор между Bootstrap и Foundation
4. Просмотрите Приступая к работе с Foundation, чтобы получить представление о том, как работает этот фреймворк. Отметьте сходство и различие между ним и Bootstrap.
5. Познакомьтесь с Bootstrap по-русски
6. Просмотрите сравнение адаптивных CSS фреймфорков: Bootstrap, Foundation и Skeleton (рус.яз.)
7. Посмотрите Погружение в адаптивную вёрстку с Foundation (рус.яз.)

Дополнительные ресурсы

Этот раздел содержит полезные ссылки на дополнительные материалы. Они не обязательны, так что расценивайте их как нечто полезное, если вы хотите поглубже погрузиться в тему.

• Введение в сетку Bootstrap (Bootstrap Grid)
• Если вы привыкли к использованию Bootstrap 2, здесь то, что изменилось в версии 3
• Документация по Bootstrap
• Документация по Foundation