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 (рус.яз.)

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

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

Поделиться уроком: