Bootstrap

Столкнулась с тем, что много разработчиков, особенно начинающих, вовсе не слышали о Bootstrap и когда с этим сталкиваются впадают в дикую панику. А этот фронтенд-фреймворк очень облегчает разработку сайтов. Основная его особенность — из коробки responsive дизайн. Начнем сначала… Что же такое responsive дизайн? Его пример вы можете увидеть на картинке в этой теме. Верстка меняется в зависимости от устройств на которых она отображается (компьютеры, планшеты, телефоны). У всех элементов в Bootstrap прописаны классы для отображения на разных устройствах в зависимости от ширины дисплея.

Там есть все основные элементы, который могут вам пригодиться: таблицы, формы, кнопки, большое количество иконок, выпадающие меню, навигационные меню разных видов , галереи фото, всплывающие окна, карусель и многое многое другое. Довольно просто и понятно описано их применение с примерами использованием.

Вспомогательные классы visible и hidden помогут вам отображать либо скрывать определенные части вашего сайта на различных усройствах. Например, класс visible-lg отобразит блок к которому он присвоен лишь на «больших» устройствах, экран которых 1200рх либо больше. А класс hidden-xs скроет блок для дисплеев меньше 768рх (телефоны).

Так же очень удобная система разделения пространства страницы на строки и колонки при помощи классов row и col. Например, при помощи класса col-md-6 — для средних устройств (планшетов) создадите колонку шириной в половину дисплея. К этому же элементу вы можете добавить класс col-xs-12, тогда этот же блок на мобильных устройствах будет отображаться на всю ширину.

Это и многое другое вы можете узнать по ссылке http://getbootstrap.com/

Если же вы начинаете изучать Bootstrap, то советую знакомиться сразу с 3 версией, так как со второй у них довольно много отличий, хотя и там были свои прелести.

Существует несколько подобных фронтенд-фреймворков, например Foundation, который я планирую использовать в следующем проекте. Так что возможно в скором времени появится статья от меня о Bootstrap и Foundation касательно схожостей и отличий.