(Примечание редактора: чисто из соображений длины и читаемости, эта статья является первой из двух частей. Эта статья посвящена семейству Bootstrap, подробнее будет рассказано во второй части.)
По мере развития сети и расширения ассортимента мобильных устройств, которые мы используем для доступа к ней, наша работа в качестве веб-дизайнеров и разработчиков значительно усложняется.
Десять лет назад все было намного проще. Тогда было почти наверняка, что большинство наших пользователей посещали наши сайты, сидя за своим столом и глядя на большой монитор. 960 пикселей более или менее считались хорошей шириной для веб-страницы. Нашей основной заботой было иметь дело с дюжиной браузеров для настольных компьютеров и перепрыгивать через несколько дополнительных взломов браузеров для поддержки причудливых старых версий Internet Explorer. Но теперь, с бумом портативных электронных устройств в последние пять-шесть лет, все изменилось. Мы видели появление смартфонов и планшетов разных размеров, электронных книг, браузеров на телевизорах и многих других. Разнообразие будет только увеличиваться с каждым днем.
Вскоре все больше людей будут получать доступ в Интернет на своих мобильных и альтернативных устройствах, чем на настольном компьютере. Фактически, уже значительное количество людей используют свои мобильные телефоны в качестве единственного доступа к Интернету. Это означает, что для нас, дизайнеров и разработчиков, важно понимать, как иметь дело со всем этим мобильным миром. И хотя на момент написания этой статьи мы не совсем поняли, как сделать так, чтобы весь контент, который мы привыкли видеть на нашем столе, предоставляли одинаково приятный опыт на наших портативных устройствах, технологии и инструменты для этого становятся лучше.
Одной из основных стратегий, которые мы используем, когда имеем дело с неизвестным размером области просмотра, является так называемый адаптивный веб-дизайн. Это механизм предоставления пользовательских макетов устройствам в зависимости от размера окна браузера. По умолчанию большинство браузеров на небольших устройствах, таких как смартфоны и планшеты, уменьшают размер веб-страницы до размеров экрана и предоставляют способы масштабирования и перемещения по странице. Хотя это технически работает, это не такой большой опыт. Текст слишком мал для чтения, ссылки слишком малы для нажатия, и все эти изменения масштаба более или менее отвлекают.
Техника адаптивного веб-дизайна состоит в том, чтобы предоставить один HTML-документ всем устройствам, применяя различные таблицы стилей в зависимости от размера экрана, чтобы обеспечить наиболее оптимизированный макет для этого устройства. Например, когда страница просматривается в большом настольном браузере, содержимое может быть размещено в несколько столбцов с обычными элементами навигации. Но когда эта же страница просматривается на небольшом экране смартфона, она отображается в одном столбце с большими ссылками для удобного нажатия. Вы можете увидеть, как работает адаптивный веб-дизайн на сайте галереи Media Queries . Просто откройте дизайн в вашем браузере, а затем измените размер окна очень узким и очень широким, и наблюдайте, как макет меняется в зависимости от размера окна.
До сих пор мы видели, что по крайней мере на данный момент адаптивный веб-дизайн является достаточным решением для борьбы с растущим разнообразием устройств, но каковы реальные инструменты и технологии для его реализации в наших проектах? Нужно ли нам быть веб-гуру, чтобы справиться с этим, или нам хватит только необходимых навыков? Есть ли инструменты, которые могут нам помочь?
Здесь вступают в игру рамки разработки интерфейса. Адаптивный веб-дизайн не так сложно реализовать, но может быть немного сложно заставить все это работать на всех целевых устройствах. Рамки облегчают эту работу. Они позволяют создавать адаптивные веб-сайты, соответствующие стандартам, с минимальными усилиями и в то же время сохранять все простым и последовательным. Фреймворки дают вам множество преимуществ, таких как скорость и простота, согласованность между различными устройствами и многое другое. Одним из наиболее важных преимуществ является то, что они настолько просты в использовании, что даже человек с минимальными знаниями может использовать их без каких-либо проблем.
Короче говоря, если вы серьезны в современной веб-разработке, то использование фреймворков является обязательным, а не вариантом. В настоящее время ваш сайт должен быть чрезвычайно гибким, чтобы удовлетворить различные браузеры, планшеты, смартфоны и целый ряд других портативных устройств.
Фреймворк для веб-разработки — это просто набор готовых компонентов HTML / CSS / JavaScript, которые мы можем использовать в наших проектах. Есть много рамок, но некоторые из них выделяются из толпы. Ниже для вашего удобства вы найдете некоторые из наиболее мощных и популярных платформ, доступных сегодня. Имейте в виду, что это не просто CSS-сетки или что-то в этом роде, а полнофункциональные интерфейсные среды разработки.
1. Бутстрап
Bootstrap , безусловно, является наиболее популярной и широко используемой средой в наше время. Это красивый, интуитивно понятный и мощный набор для веб-дизайна для создания кросс-браузерных, согласованных и привлекательных интерфейсов. Он предлагает множество популярных компонентов пользовательского интерфейса с простым, но элегантным стилем, сеточной системой и плагинами JavaScript для распространенных сценариев.
Он построен с LESS и состоит из четырех основных частей:
- Строительные леса — глобальные стили, гибкие 12-колоночные сетки и макеты. Имейте в виду, что Bootstrap по умолчанию не включает адаптивные функции. Если ваш дизайн должен быть адаптивным, вы должны включить эту функцию вручную.
- Базовый CSS — это основные элементы HTML, такие как таблицы, формы, кнопки и изображения, стилизованные и дополненные расширяемыми классами.
- Компоненты — набор многократно используемых компонентов, таких как выпадающие списки, группы кнопок, элементы управления навигацией (вкладки, таблетки, списки, хлебные крошки, нумерация страниц), миниатюры, индикаторы выполнения, объекты мультимедиа и многое другое.
- JavaScript — плагины jQuery, которые оживляют вышеупомянутые компоненты, а также переходы, модалы, всплывающие подсказки, всплывающие окна, scrollspy (для автоматического обновления целей навигации на основе позиции прокрутки), карусель, подсказки типов (быстрая и полнофункциональная библиотека автозаполнения), аффикс навигация и многое другое.
Bootstrap уже достаточно мощный, чтобы расширить возможности любого веб-интерфейса. Но чтобы более эффективно использовать его и облегчить процесс разработки, вы можете найти множество инструментов и ресурсов, которые дополняют его. Некоторые из них перечислены ниже:
- jQuery UI Bootstrap — потрясающий ресурс для поклонников jQuery и Bootstrap, который сочетает в себе мощь обоих. Это приносит приятную привлекательность Bootstrap для виджетов jQuery UI.
- jQuery Mobile Bootstrap Theme — похожая на тему jQuery UI выше, эта тема создана для jQuery Mobile. Это удобный ресурс, если у вас есть веб-интерфейс, созданный с помощью Bootstrap, и вы хотите предложить аналогичный внешний вид для мобильных устройств.
- Fuel UX — это расширяет Bootstrap дополнительными облегченными элементами управления JavaScript. Его легко установить, настроить, обновить и оптимизировать.
- StyleBootstrap.info — Bootstrap имеет свой собственный настройщик, но StyleBootstrap — более детальный, со средствами выбора цвета и возможностью стилизовать каждый компонент по-разному.
- BootSwatchr — ролик темы Bootstrap, который показывает немедленные результаты ваших изменений. Для каждого сгенерированного стиля приложение генерирует уникальный URL-адрес на случай, если вы захотите поделиться им с другими или вернуться и отредактировать в любое время позже.
- Bootswatch — хороший набор бесплатных тем для Bootstrap.
- Bootsnipp — хорошая коллекция элементов дизайна и фрагментов HTML для Bootstrap. Он также предлагает формы и кнопки строителей.
- LayoutIt — конструктор интерфейсов перетаскивания, основанный на элементах и компонентах Bootstrap. Это поможет вам визуально составить свой дизайн, разместив и расположив различные элементы в макете с помощью перетаскивания, а затем позволяет редактировать их свойства. Вы получаете базовый код, а затем расширяете его. Просто и легко.
2. Fbootstrapp
Fbootstrapp основан на Bootstrap и предоставляет вам те же функциональные возможности для приложений и дизайнов iframe на Facebook. Он включает базовые CSS и HTML для всех стандартных компонентов, таких как типография, формы, кнопки, таблицы, сетки, навигация и многое другое, стилизованные под типичный для Facebook внешний вид.
3. BootMetro
BootMetro — это фреймворк, созданный на основе Metro UI CSS, который построен поверх Bootstrap, для создания веб-сайтов в стиле Metro / Windows 8. Он включает в себя все функции Bootstrap, а также некоторые дополнительные функции, такие как мозаичные страницы, панель приложений и многое другое.
4. Кикстреп
Проще говоря, Kickstrap — это своего рода Bootstrap на стероидах. Он использует Bootstrap в качестве своей базы и расширяет его множеством приложений, тем и дополнений. Это делает фреймворк полным комплектом для создания сайтов без необходимости устанавливать что-либо. Просто поместите его на свой сайт, и вы готовы к работе.
Приложения — это просто пакеты файлов JavaScript и CSS, которые запускаются вместе как пакет после завершения загрузки вашей страницы. Некоторые из приложений, включенных по умолчанию, это Knockout.js, Retina.js, Firebug Lite и Updater. И вы можете добавить еще много.
Темы дают вам возможность отличаться от стандартного внешнего вида большинства веб-сайтов Bootstrap.
Дополнения — это фанатские дополнения для расширения библиотеки Bootstrap UI. Они обычно используют одинаковый или похожий синтаксис.
И в следующий раз …
На этом мы завершаем наше путешествие по стране, связанной с Bootstrap. Следите за следующей частью, где вас ждут другие фреймворки.
Комментарии к этой статье закрыты. Есть вопрос по CSS фреймворкам? Почему бы не спросить об этом на наших форумах ?
Готовы начать создавать сайты с Bootstrap? Learnable уже покрыл — начните бесплатную пробную версию сегодня.