От автора: ни для кого не секрет, что сегодня люди выходят в интернет с различных устройств: настольные компьютеры, ноутбуки, планшеты, смартфоны… Для того, чтобы посетителям было удобно пользоваться сайтом, независимо от того с какого устройства они зашли на сайт, его верстка должна быть адаптивной. То есть сайт должен подстраиваться под размер экрана посетителя.
Если вы не профессиональный верстальщик или у вас недостаточно опыта, то создание кроссбраузерной адаптивной верстки может быть достаточно сложно. К счастью, сегодня есть множество html, css фреймворков, которые могут значительно упростить создание адаптивных сайтов и взять всю самую сложную часть работы «на себя».
Используя html, css фреймворки, сегодня можно сверстать сайт с красивым, приятным, профессиональным дизайном, при этом не нужно быть профи в верстке. Используя фреймворки, даже самый новичок в сайтостроении способен сверстать страницу, создать одностраничный сайт или лэндинг. Причем сайт будет достаточно профессиональный, а время затраченное на его создание минимально.
Преимущества и недостатки использования фреймворков
Верстка страниц с использованием фреймворков сводится к простой схеме: скачать файлы (css, js) фреймворка, подключить их к странице и использовать готовые имена классов, готовые компоненты, чтобы получить желаемую страницу. Процесс достаточно простой, поэтому давайте рассмотрим преимущества использования html, css фреймворков:
ускоряется разработка страниц, потому что ипользуются уже готовые разметки, классы, компоненты и т.д.
разметка получается 100% блочная, а значит современная и качественная
очень важное преимущество — это то, что мы получаем сразу кроссбраузерную и адаптивную страницу, которая сразу выглядит хорошо во всех браузерах и на всех устройствах
у проекта получается аккуратная и понятная структура кода, что упрощает дальнейшее развитие и поддержку
однообразная структура кода упрощает командную разработку
Недостатков ипользования фреймворков гараздо меньше и они менее значительны, но все же давайте и на них остановимся:
неиспользованный код остается, но при правильном подходе к выбору фреймворка, этот недостаток можно свести к минимуму
для того, чтобы использовать фреймворк, его нужно изучить. Вообще все, чтобы мы не использовали нужно изучить либо почитать инструкцию, поэтому данный недостаток каждый оценит для себя самостоятельно. Лично для меня это недостатком не является)
Фреймворк Bootstrap
Какой же фреймворк выбрать для изучения и использования? Для изучения и использования я рекомендую брать наиболее популярный на сегодня html, css, js фреймворк — Bootstrap. Популярность фреймворка Bootstrap зашкаливает. Bootstrap просто везде!
Чтобы понять насколько Bootstrap популярен, давайте обратимся к рейтингу популярности на github. Количество звезд на github у Bootstrap сегодня более 91.000. А у фреймворка, который по популярности на втором месте — фреймворк Foundation, количесто звезд чуть более 22.000. Только представьте себе, лидер — Bootstrap популярнее своего преследователя более чем в 4 раза!
Такая популярность фреймворка Bootstrap не случайна. Фреймворк Bootstrap обладает массой преимуществ:
Скорость работы – создание макетов с Bootstrap занимает меньше времени благодаря большому набору готовых к использованию элементов.
Гибкость – добавление новых элементов не нарушает общую структуру благодаря динамически изменяющейся сетке.
Легкая изменяемость – правка стилей достигается за счет добавления новых CSS правил, которые переопределяют существующие. При этом, вам не нужно использовать атрибуты типа !important.
Большое количество шаблонов – шаблоны в Bootstrap позволяют вам изменять уже модифицированные элементы под ваши нужды. Многие разработчики предлагают использовать их собственные шаблоны.
Огромное сообщество сторонников/разработчиков.
Широкий спектр применения – Bootstrap используется для создания тем почти для любой CMS (Magento, Joomla, WordPress или любой другой), включая одностраничные лэндинги.
Замечательная официальная документация.
Начинка Bootstrap
Bootstrap состоит из большого количества готовых компонентов, которыми пользуются почти все фронтенд разработчики. Следует здесь отметить, что Bootstrap — это, так сказать, набор из трех фреймворков: CSS/HTML, JS компоненты:
Сетка — является базовым требованием для хорошего макета. Сетка — это мощный инструмент для расположения блочного контента и вложенных элементов.
Типографика — позволяет вам форматировать параметры шрифта: абзацы, цитаты, заголовки, подзаголовки, разные размеры текста, вставки кода и т.д.
Оповещения (алерты) — любое оповещение может быть представлено в 4 стандартных форматах: положительный, информационный, предупреждающий, отрицательный.
Навигации в Bootstrap уделено особое внимание: Фреймворк содержит дизайны для вкладок (табов), постраничной навигации (пагинации), боковых меню, «хлебных крошек», основного меню, панели инструментов (тулбара) и т.д.
Формы — текстовые поля и блоки (textarea), кнопки, метки (label), радиокнопки, чекбоксы, выпадающие списки — для всех этих элементов в Bootstrap уже есть подготовленные стили.
Кнопки — здесь все просто. Чтобы создать кнопку, нужно указать нужный набор классов.
Компоненты JavaScript — в дополнение к стилям в Bootstrap имеются правила поведения для модальных окон, слайдеров, тултипов, табов и других интерактивных элементов на странице.
Впечатляет, не правда ли? А самое приятно это то, что если вам, в вашем конкретном проекте, не нужны, например, формы, модальные окона, табы или еще что-то, то вы просто можете не включать их в код фреймворка. Таким образом, проблема неиспользуемого кода сводится к минимуму.
Также стоит отметить, что благодаря популярности Bootstrap для него разработали массу различных дополнений, которые позволяют расширить возможности фреймворка, упростить работу с ним, создавать на нем все более нестандартные сайты. Например, есть дополнения для создания «двусторонних» блоков-карточек, есть компонент, позволяющий создать главное меню навигации практически любой сложности, есть компонент для простого создания рейтинга. И подобных компонентов сотни, если не тысячи! И каждый из них вы с легкостью можете подключать к своему проекту и использовать.
Заключение
Фреймворки призваны упростить жизнь опытным разработчикам и помочь новичкам начать разрабатывать действительно достойные сайты. Предназначены фреймворки для ускорения процесса разработки сайта. С использованием фреймворков уменьшается время на исправление ошибок и достижение кроссбраузерности. Все это делает процесс разработки сайтов более быстрым и приятным.
Фреймворк Bootstrap — самый популярный на сегодняшний день фреймворк. Это дает ему некоторые дополнительные преимущества: огромное сообщество разработчиков, большое количество ресурсов по Bootstrap. Это и готовые шаблоны, которые можно брать и править под нужды своего проекта. Это и большое количество дополнений для Bootstrap, написанных разработчиками.
Bootstrap особенно популярен среди тех, кто занимается созданием так называемых «лэндингов» (посадочных/целевых страниц). С использованием Bootstrap и готовых шаблонов для него, процесс создания «лэндинга» становится очень удобным и может занимать всего несколько часов.
P.S. Если у вас есть какие-либо вопросы, задавайте их ниже, в комментариях.
P.P.S. Используете ли вы при верстке страниц фреймворки? Планируете ли начать использование фреймворков для верстки? Какие фреймворки хотели бы освоить? Свой ответ на эти вопросы вы также можете оставить в комментариях.
P.P.P.S. Обязательно посмотрите ниже видео презентацию курса «Фреймворк Bootstrap: практика адаптивной верстки от А до Я»!
Комментарии (8)