В первой части этой статьи мы увидели несколько хороших фреймворков, связанных с Bootstrap. Если вы устали от всего этого Bootstrap, сделайте глубокий вдох и приготовьтесь к чему-то действительно другому. Начнем с основного конкурента Bootstrap — Foundation.
5. Фонд
Foundation — это мощная, многофункциональная, отзывчивая интерфейсная среда. С помощью Foundation вы можете быстро создавать прототипы и создавать веб-сайты или приложения, которые работают на любых устройствах, с помощью множества встроенных макетов, элементов и лучших практик. В первую очередь он создан для мобильных устройств, использует семантические функции и использует Zepto вместо jQuery, чтобы повысить удобство работы пользователей и повысить производительность.
Foundation имеет гибкую, встраиваемую сетку из 12 столбцов, достаточно мощную, чтобы вы могли быстро создавать макеты для нескольких устройств. С точки зрения возможностей это обеспечивает много. Существуют стили для типографики, кнопок, форм и различных элементов управления навигацией. Предоставляется множество полезных CSS-компонентов, таких как панели, таблицы цен, индикаторы выполнения, таблицы, эскизы и гибкое видео, которые могут правильно масштабировать ваше видео на любом устройстве. И, конечно же, плагины JavaScript, включая выпадающие списки, joyride (простой и удобный тур по веб-сайту), magellan (липкая навигация, указывающая, где вы находитесь на странице), орбита (адаптивный слайдер изображений с сенсорной поддержкой), раскрытие (для создания модальные диалоговые окна или всплывающие окна), разделы (мощная замена традиционным аккордеонам и вкладкам) и всплывающие подсказки.
Фреймворк также предлагает множество полезных дополнений.
- Трафареты — все элементы пользовательского интерфейса, доступные в Foundation, в форме омниграфических трафаретов и векторных PDF-файлов для более быстрого и удобного построения каркасов и макетов.
- HTML-шаблоны — удобные, готовые к работе макеты, с которых вы можете быстро начать и строить. Чтобы использовать их, вы просто захватываете код и помещаете его между тегами <body> вашей страницы.
- Иконочные шрифты — это пользовательские наборы пиктографических иконок, которые хранятся в удобном веб-шрифте.
- SVG Social Icons — набор независимых от разрешения социальных иконок.
- Responsive Tables — механизм реагирующих таблиц Foundation заключается в том, чтобы взять первый столбец и «закрепить» его слева от таблицы, что позволит вам прокручивать другие столбцы под ним.
- Макеты вне холста — эти макеты позволяют скрыть контент или навигацию на мобильных устройствах до тех пор, пока либо большой размер экрана не позволит его увидеть, либо пользователь не предпримет действия для его отображения. И когда происходит последнее, контент или навигация скользят в поле зрения.
Как видите, Foundation — это сокровищница для веб-разработчиков / дизайнеров. А чтобы получить только то, что вам нужно, вы можете использовать настройщик для создания своей пользовательской загрузки.
6. Основы CSS
GroundworkCSS — это новое, свежее дополнение к семейству интерфейсных фреймворков. Это полностью адаптивный инструментарий HTML5, CSS и JavaScript, созданный с использованием возможностей Sass и Compass, который дает вам возможность быстро создавать прототипы и создавать веб-сайты и приложения, которые работают практически на любом устройстве.
Он предлагает чрезвычайно гибкую, встраиваемую, основанную на фракциях систему жидкостной сетки, которая делает возможным создание любого макета. GroundworkCSS имеет некоторые действительно выразительные функции, такие как планшеты и мобильные сетки, которые поддерживают структуру столбцов сетки вместо того, чтобы сворачивать столбцы сетки в отдельные строки, когда область просмотра имеет ширину менее 768 или 480 пикселей. Еще одна интересная особенность — это плагин jQuery ResponsiveText, который позволяет вам иметь динамически изменяемый размер текста, который адаптируется к ширине области просмотра: это чрезвычайно полезно для масштабируемых заголовков и построения адаптивных таблиц.
Фреймворк включает в себя богатый набор компонентов пользовательского интерфейса, таких как вкладки, таблицы адаптивных данных, кнопки, формы, адаптивные элементы управления навигацией, плитки (прекрасная альтернатива переключателям и другим скучным элементам стандартной формы), всплывающие подсказки, модалы, Cycle2 (мощный, отзывчивый слайдер контента) и еще много полезных элементов и помощников. Он также предлагает хороший набор векторных социальных иконок и полный набор пиктографических иконок, включенных в FontAwesome.
Чтобы увидеть фреймворк в действии, вы можете использовать ресайзер в верхней центральной части окна браузера. Таким образом, вы можете проверить способность компонентов реагировать на различные размеры и области просмотра, одновременно изучая возможности платформы.
GroundworkCSS очень хорошо документирован со многими примерами, и для быстрого начала работы фреймворк также предоставляет вам несколько отзывчивых шаблонов. Единственное, что я считаю слабым местом, — это отсутствие способа настроить загрузку.
7. Гамби
Gumby — это простой, гибкий и надежный интерфейс, созданный с использованием Sass и Compass.
Его гибкая компоновка самооптимизирует контент для настольных и мобильных устройств. Он поддерживает несколько типов сеток, включая вложенные, с различными вариантами столбцов. У Gumby есть два PSD-шаблона, которые помогут вам начать проектирование в сетках с 12 и 16 столбцами.
Фреймворк предлагает многофункциональный пользовательский интерфейс, который включает в себя кнопки, формы, мобильную навигацию, вкладки, пропускаемые ссылки, переключатели и переключатели, выдвижные ящики, адаптивные изображения, изображения сетчатки и многое другое. Следуя последним тенденциям дизайна, элементы пользовательского интерфейса имеют плоский дизайн в стиле Metro, но вы можете использовать стиль Pretty и градиентный дизайн, или смешать оба стиля по своему желанию. Потрясающий набор адаптивных, независимых от разрешения значков Entypo, которые вы можете использовать в своих веб-проектах, полностью интегрирован в Gumby Framework.
У Gumby также есть очень хороший настройщик с палитрой цветов, который поможет вам с легкостью создать свою пользовательскую загрузку.
8. HTML KickStart
HTML KickStart — это набор инструментов на основе HTML5, CSS и jQuery для простого создания макетов любого типа. Он обеспечивает чистую, совместимую со стандартами и кросс-браузерную разметку.
Каркас имеет стили для сеток, типографики, форм, кнопок, таблиц или списков и веб-элементов кросс-браузера, таких как слайд-шоу JavaScript, вкладки, навигация, меню с подменю, всплывающие подсказки и многое другое.
Вы можете использовать 99Lime UIKIT, который имеет все элементы пользовательского интерфейса HTML KickStart, готовые для использования в ваших каркасах.
9. Слоновая кость
IVORY — это легкий, простой и мощный фреймворк, способный обрабатывать адаптивные макеты шириной от 320 до 1200 пикселей. Он заполнен сеткой ширины с 12 столбцами, стилями для типографики и некоторыми важными компонентами пользовательского интерфейса, такими как кнопки, тумблеры, аккордеоны, вкладки, всплывающие подсказки и многое другое.
IVORY — это идеальный выбор, когда вам нужно простое и гибкое решение для нескольких устройств, и ваш дизайн не требует дополнительной функциональности, которую предлагают другие платформы.
10. Кубе
Наконец, если вам нужна надежная, но простая основа без излишней сложности и дополнительных возможностей, для вашего нового проекта Kube может быть правильным выбором. Kube — это минимальная, адаптивная и адаптивная структура без навязанного стиля, которая дает вам свободу создавать. Он предлагает основные стили для сеток, форм, типографики, таблиц, кнопок, навигации и других вещей, таких как ссылки или изображения.
Фреймворк содержит один компактный файл CSS для простого создания адаптивных макетов и два файла JS для реализации вкладок и кнопок в ваших проектах. Если вы ищете максимальную гибкость и настройку, вы можете скачать версию для разработчиков, которая включает в себя файлы LESS, с переменными, миксинами и модулями.
Вывод
Я надеюсь, что теперь, после прочтения этой статьи, вы сможете лучше понять различные варианты, доступные вам для ваших следующих проектов. Я попытался поместить здесь самые популярные, многофункциональные, хорошо структурированные и многообещающие фреймворки, которые я знал на момент написания этой статьи. Но, как вы уже знаете, все меняется со скоростью света. Итак, если вы знаете о какой-то другой классной структуре, не перечисленной здесь, пожалуйста, поделитесь своими знаниями в комментариях, сделав эту статью еще более полезной.
Комментарии к этой статье закрыты. У вас есть вопрос о фреймворках разработки? Почему бы не спросить об этом на наших форумах ?