Верстать быстро и красиво: 15 популярных CSS фреймворков

Создание красивых стилей убивает уйму времени. CSS фреймворки выполняют ту же задачу на лету. Верстальщики получают продуманные решения самых насущных проблем – разметку, интерфейсы, адаптивность.

Классический CSS фреймворк – набор базовых стилей для вёрстки веб-страницы:

• сетка;
• иконки;
• таблицы;
• элементы форм и кнопок;
• типографика;
• интерфейсные паттерны, например, карточки и модальные окна;
• вспомогательные классы оформления элементов: отступы, цвета и т. д.

Можно начать работу над проектом, не тратя время на копирование шаблонного кода или написание с чистого листа. CSS фреймворк – фундамент системы стилей.

Зачем нужен фреймворк?

Чем сложнее приложение, тем больше оснований воспользоваться готовым инструментом. Фреймворк необходим в следующих случаях:

• Нужно быстро создать сайт. Кастомизировать компоненты проще, чем создавать с нуля.
• Если вы плохо знаете CSS. Берите готовые классы и наслаждайтесь стандартным, но элегантным и продуманным интерфейсом.
• Хотите протестировать дизайн-гипотезу. Создать прототип и проверить идею в деле.

Выбираем CSS фреймворк

Bootstrap

Популярнейшая библиотека компонентов. В 2018 году вышел Bootstrap 4. В нём ещё больше удобных утилит и модификаторов. Четвертая версия написана на SASS, так что можно использовать в разработке все преимущества препроцессоров.

Главные фичи Bootstrap:

• Проработанная адаптивная сетка, основанная на Flex-модели, прошла испытание временем на всех возможных разрешениях. Решает большинство задач компоновки контента.
• На Bootstrap созданы тысячи шаблонов, тем и готовых компонентов. Можно собрать сайт, не написав ни строчки CSS-кода.
• Простота обучения. Очевидные концепции, подробная документация с примерами. Масса пособий для разработчиков с разной степенью погружения в тему.
• Готовый JavaScript для большинства интерактивных компонентов. Аккордеоны и карусели уже написаны за вас.
• Препроцессоры SASS и LESS.

Foundation

Foundation – вероятно, второй по распространенности CSS фреймворк. Утонченный и гибкий инструмент подойдёт для очень больших проектов. Им пользуются Facebook, eBay, Mozilla, Adobe, HP, Cisco и Disney.

Фреймворк также построен на препроцессоре SASS и имеет отличную JavaScript-составляющую. Кривая обучения по сравнению с Bootstrap более крутая, но есть и преимущества.

Главные фичи Foundation:

• Адаптивная система сеток. В создании отзывчивого дизайна не уступает Bootstrap.
• Мощный email-фреймворк. Responsive-дизайн не только в веб-приложениях, но и в письмах. Никаких громоздких табличек – используйте Foundation for emails.
• Техническая поддержка. Компания-разработчик предлагает обучающие онлайн-тренинги и консультации по продукту. Увы, не бесплатно 🙁
• Простая кастомизация. Foundation гибок. Вы полностью контролируете интерфейс проекта.
• JavaScript-компоненты.
• Легкое создание анимаций.
• Вертикальный контроль разметки.
• Инструменты для разработчика.
• Препроцессор SASS.

Pure

Этот легковесный (3.8 Кб) CSS-фреймворк создан Yahoo в 2014 году. За легкость приходится платить универсальностью. Pure не предлагает богатую библиотеку компонентов – он сконцентрирован на лейаутах и меню. И конечно, ни капли JavaScript.

Главные фичи Pure.css:

• Крошечный размер.
• Чистый CSS – для встраивания нужен лишь один файл.
• Меню на любой вкус – вертикальные, горизонтальные, выпадающие.
• Удобная работа с элементами форм.

Bulma

Серьезный игрок на CSS рынке – Bulma. Гармоничная смесь качеств: маленький, отзывчивый, удобный и интуитивно понятный фреймворк. Написан на SASS, сетка на флексах, mobile-first подход, чистый CSS – JavaScript не прилагается.

Главные фичи Bulma:

• Логичные и запоминающиеся имена классов.
• Чистый CSS – весь фреймворк в одном файле.
• Большое и дружелюбное сообщество, легко найти ответы на все вопросы.
• Просто изучать. Идеальный выбор для начинающих верстальщиков.
• Препроцессор SASS.

Semantic UI

Фреймворк, как следует из названия, трепетно относится к семантике интерфейсов. В Semantic UI 3000 настраиваемых переменных и 50 компонентов для создания сайтов.

Главные фичи Semantic UI:

• Интеграция с React, Angular, Meteor, Ember и другими фронтенд-инструментами. Semantic UI легко ввести в существующий проект, не переписывая его заново.
• «Человекопонятный» HTML, упор на семантику веба, легко читаемые имена классов.
• Красивые макеты «из коробки». Даже некастомизированный фреймворк выглядит превосходно.
• Широкий простор для настройки.
• Интуитивно понятный JavaScript.

UI Kit

Еще один добротный CSS фреймворк с классическим набором полезностей и удобств. Небольшой размер, встроенные интерфейсные компоненты, поддержка препроцессоров, отзывчивая сетка и возможность кастомизации – всё это UI Kit.

Главные фичи UI Kit:

• Минимализм. Фреймворк поощряет создание чистого кода и ясных интерфейсов.
• Отличный набор компонентов из коробки с шаблонами использования, полезными методами и возможностями кастомизации.
• Препроцессоры LESS и SASS.

Materialize CSS

Детище Google появилось на свет в 2014 и до сих пор занимает лидирующие места в гонке фреймворков. Materialize CSS предлагает набор готовых к использованию компонентов в стиле Material Design.

Главные фичи Materialize CSS:

• Material Design. Это по праву один из самых популярных языков дизайна в мире.
• Фреймворк использует сетку Bootstrap. Можно не разбираться в новых концепциях.
• Компоненты мобильных меню.
• Препроцессор SASS.

Milligram

Один из самых миниатюрных CSS фреймворков. В сжатом виде Milligram весит всего 2Кб. Но мал, да удал – в вашем распоряжении полный набор инструментов верстальщика.

Главные фичи Milligram:

• Маленький размер файла.
• Классные темы.

Skeleton

Всего 400 строк кода – а на выходе мы имеем полноценный CSS фреймворк. Skeleton – это не только лейауты, как можно было бы подумать. Здесь весь стандартный набор: типографика, таблицы, формы, кнопки и т. д. Можно брать и создавать полноценный веб-сайт.

Главные фичи Skeleton:

• Только самая необходимая функциональность.
• Просто изучить.

Tailwind CSS

Низкоуровневый CSS фреймворк, открыты все возможности кастомизации. Tailwind CSS подходит для нестандартных дизайн-решений. Если вы имеете представление о концепции атомарного CSS, это именно то, что вам нужно. Фреймворк написан на PostCSS и конфигурируется на JS.

Главные фичи Tailwind CSS:

• Множество утилитарных классов. Простая кастомизация элементов.
• Набор адаптивных опций.

Spectre

Spectre – классический компонентный CSS-фреймворк с элегантным дефолтным оформлением.

Главные фичи Spectre:

• Чистый CSS, без JavaScript-кода.
• Препроцессор SASS.

Base

Base – компактный и легкий, но довольно мощный фреймворк, который может стать надежным фундаментом для ваших проектов.

Главные фичи Base:

• Основан на последней версии Normalize.css.
• Разбит на независимые друг от друга модули.

Picnic CSS

Небольшая библиотека статических и интерактивных компонентов. Picnic включает в себя сетку, формы, табы, всплывающие подсказки, модальные элементы и т. п.

Главные фичи Picnic CSS:

1. Симпатичный дефолтный дизайн.
2. Настраиваемые переменные.
3. Препроцессор Sass.

Mustard UI

Ищете CSS фреймворк для новичков? Вы его нашли. Опенсорсный легкий Mustard создан специально для начинающих разработчиков.

Главные фичи Mustard UI:

1. Отдельные модули. Можно работать только с компонентами, которые действительно нужны.
2. Отличная документация.
3. Маленький размер.

Dead Simple Grid

Однозначный чемпион в номинации Самый крохотный CSS фреймворк. Dead Simple Grid – это, по большому счету, и не фреймворк вовсе. Весит всего 250 байт(!) и состоит лишь из двух классов. Все, что умеет Dead Simple Grid, – строить сетки, но иногда только это вам и требуется.

Главные фичи Dead Simple Grid:

• Элементарная структура. Вряд ли вам вообще потребуется документация.
• Адаптивные колонки и фиксированные отступы.
• Поддержка бесконечной вложенности.

Бонус

В качестве награды за прочтение еще 3 интересных CSS библиотеки, которые могут вам пригодиться:

• Animate.css. Создание CSS анимаций с огромным набором эффектов.

• NES.css. Библиотека компонентов, выполненных в 8-битном стиле.

• Simple Grid. Классическая 12-колоночная сетка для быстрого построения макетов.

Как сделать выбор?

CSS фреймворки предлагают много готового кода, уже проверенного в различных браузерах и на разных разрешениях, чем здорово экономят время. При выборе нужно задаваться не вопросом «какой из этих инструментов лучше?», а «какой из них лучше подходит для моего проекта?».

Основные значащие факторы:

• Размер файлов фреймворка или библиотеки.
• Необходимый набор компонентов.
• Наличие или отсутствие JavaScript-сопровождения.
• Поддержка препроцессоров.
• Концептуальный подход.

Разобравшись в своих потребностях, вы без труда подберёте CSS фреймворк. Возможно, даже из нашего списка.

С какими CSS-фреймворками вы работаете? Поделитесь впечатлениями!

Популярные css фреймворки в 2020 для мобильных устройств

Популярные css фреймворки в 2020 для мобильных устройств

Как фронтенд-разработчик, я часто говорю о фронтенд-фреймворках и столь же часто забываю о важности CSS-фреймворков и о том, сколько времени они могут сэкономить.

Когда мы строим пользовательский интерфейс, нам нужно написать последовательный и эффективный CSS, а это непростая цель, ее сложно достичь. Вот почему многие фронтенд-разработчики находят решение в применении CSS-фреймворков, например, Bootstrap.

CSS-фреймворки позволяют нам создавать красивый фронтенд. Но дело не только в подборе цветов и создании красивых таблиц: большинство фреймворков имеют отзывчивый дизайн. Это делает нашу работу комфортнее, поскольку нам не приходится создавать еще один CSS-код для мобильных версий.

При выборе CSS-фреймворка, подходящего для нашего проекта, следует учитывать следующие аспекты:

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

В этой статье я расскажу о достоинствах и недостатках шести CSS-фреймворков, как известных, так и не очень.

Bootstrap

Последние несколько лет на рынке ценится обеспечение от разработчиков Twitter – Bootstrap. Сегодня на его основе сделаны сайты таких брендов и организаций, как:

• Netflix;
• Toyota, Ford и Volkswagenag;
• Sony;
• Pepsi;
• HP;
• ФБР, NASA;
• cftc.gov – комиссия США по торговле товарными фьючерсами.

В каждой из этих компаний сидят высококвалифицированные специалисты и они доверяют Bootstrap.

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

Преимущества Bootstrap

• быстрое создание прототипов: вместо хитрого позиционирования CSS и головоломок с несовместимостью браузера достаточно написать HTML и применить к нему соответствующие классы фреймворка;
• большая экосистема: благодаря массе макетов, тем, панелей администратора и прочих инструментов можно создавать более уникальные и простые дизайны как эти;
• разработан крупным брендом: известность создателя говорит о том, что у проекта будет четкая дорожная карта и долгосрочное будущее, а также постоянные обновления в соответствии с тенденциями;
• большая коллекция компонентов: Bootstrap располагает большинством необходимым элементов пользовательского интерфейса, благодаря чему нет необходимости отдельно нанимать команду front-end разработчиков.

Недостатки Bootstrap

Идеальных не существует, верно? Данный фреймворк не исключение. За свою относительно небольшую историю он уже попал под шквал критики. И вот почему:

• однообразие UX: пускай Bootstrap и обладает массой макетов и встроенных модулей, они довольно похожи. Потому все сайты этого фреймворка выглядят несколько скучными и знакомыми. Веб-дизайнерам, как, своего рода, деятелям искусства, это не по душе;
• заставляет работать: фреймворк имеет множество дефолтных значений. Для их переопределения нужно усердно постараться, хотя этот процесс можно было бы упростить.

Это программное обеспечение отлично подойдет как для начинающих, так и разработчиков, предпочитающий надежный интерфейс.

Bulma

Bulma – относительно новый фреймворк на рынке, в сравнении с большинством конкурентов. Но за короткое время он сделал себе известное имя. Привлекательность обоснована строгим подходом, основанном исключительно на CSS (нет элементов Javascript, как в Bootstrap) и элегантных дефолтных конфигурациях.

Сетка данного фреймворка полностью основана на Flexbox. Bulma не особо требовательно к началу проекта веб-разработки. Потому ее считают очень хорошим вариантом для круглых новичков. С этим программным обеспечением можно достаточно быстро настроить сайт.

Преимущества

• простой синтаксис;
• адаптивный дизайн;
• создана для повседневных задач, с которыми сталкиваются небольшие команды, потому простая в изучении;
• большая коллекция компонентов;
• популярна: на Github имеет более 30 тысяч звезд. Конечно, это не говорит о качестве. Но это отображает высокий уровень доверия пользователей.

Недостатки

• из своей новизны есть множество неисправленных багов;
• небольшой опыт использования – требует проверки временем;
• отсутствие префиксов Flexbox для разных браузеров.

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

Foundation

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

Первое, что видно на главной странице сайта – фраза «Наиболее адаптивный Front-end фреймворк в мире». Звучит дерзко, но сторонники этого программного обеспечения знают, что слова не брошены на ветер. Это подтверждается тем, что Foundation используется такими компаниями, как Facebook, eBay, Mozilla, Adobe и другими.

Фреймворк отлично работает в сочетании с GPU-ускорением для молниеносной и плавной анимации. Также, он предлагает инструмент Fastclick.js для более быстрой визуализации на мобильных устройствах.

Преимущества

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

Недостатки

Foundation один из примеров обеспечения, в котором сильные стороны могут проявиться как слабые и вот почему:

• комплексная основа: множество внутренних слоев, сдвоенные компоненты, бесконечные возможности настройки делают работу с фреймворком невероятно сложной;
• разнообразие: иногда просто хочется побыстрее закончить проект, но обилие вариантов сильно мылит глаза, из-за чего финальная стадия может слишком затянуться;
• небольшое сообщество: поскольку изучить Foundation сложнее, в нем не так много специалистов. При возникновении проблем будет трудно найти решение.

Если Вы новичок, это программное обеспечение точно не для Вас. Foundation имеет слишком обширные возможности, с которыми не разобраться без большого опыта работы с фреймворками. Но если Вы уже не первый год в этом варитесь, то Foundation будет хорошим выбором благодаря своей гибкости, отличной семантике и действительно высоком уровне адаптивности.

Materialize

Современная адаптивная среда разработки, основанная на спецификациях дизайна материалов Google. Многие программисты ставят ее на третье место после Bootstrap и Foundation. Если Вы хотите создать сайт в стиле Google, то нужно использовать именно этот фреймворк.

В этой среде достаточно компонентов и классов, но прежде всего она направлена на максимальное повышение производительности и скорости загрузки страниц. В Materialize используется 12-колонный формат сетки, как и в Bootstrap.

Преимущества

• большой выбор компонентов;
• хорошо смотрится на любом устройстве;
• удобная кастомизация;
• открытый код.

Недостатки

• большой размер;
• отсутствие flexbox;
• однообразие дизайна готовых сайтов.

Несмотря на то, что на основе этого фреймворка получаются довольно одинаковые проекты, многие пользователи ему доверяют. С Materialize можно начинать верстать сайты имея минимальный опыт работы с CSS.

UIkit

Минимализм – один из сегодняшних трендов в любом дизайне, включая веб-разработки. Потому UIkit уверенно набирает популярность среди многих верстальщиков. Обеспечивая элегантный внешний вид с использованием максимума пустого пространства эта среда разработки обладает большинством преимуществ всех фреймворков.

UIkit – легкая и адаптивная среда разработки. Она помогает создавать расширенный интерфейс с помощью таких компонентов, как Nestables (позволяет сортировать элементы путем перетаскивания, что облегчает организацию панелей навигации).

Преимущества

• расширенные возможности кастомизации;
• адаптивность к любым устройствам;
• структурированный код;
• простое добавление любых компонентов без ущерба общему внешнему виду;
• заготовки тем.

Недостатки

• некоторые классы сложны для чтения, потому тяжелее достигнуть результат;
• большинство шаблонов платные;
• маленькое количество пользователей.

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

Semantic UI

Известен своими простыми и элегантными дизайнами, а также невероятными тематическими эффектами. Этот фреймворк имеет в наличии более 3000 разных тем и порядка 50 вариаций пользовательского интерфейса. Таким образом, Semantic UI – отличная среда разработки для создания адаптивных сайтов.

Он очень молод, однако смог заработать популярность благодаря своей простоте. Код этой среды разработки не требует пояснений, потому хорошо подойдет многим новичкам. В Semantic UI довольно просто отслеживать узкие места кода, не копаясь в следах стека.

Преимущества

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

Недостатки

• несмотря на загрузку лишь необходимых компонентов, размер файла все еще велик;
• не подойдет пользователю, не знающему Javascript;
• содержит немало багов вроде невозможности смешивания классов;
• небольшой выбор классов.

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

Какая среда разработки лучше?

Вероятно, Вы задавались этим вопросом не один раз. Скорее всего, ответ во всех случаях был «никакая». Bootstrap самый популярный по оценкам пользователей, однако его нельзя назвать наилучшим. Выбор фреймворка зависит от множества факторов.

Если Вам нужен совет по выбору, вот он: изолируйте себя от информационного шума. Ведь Вы не обязаны использовать продукт, по которому все сходят с ума. Испытывать что-то новое – это здорово, но постоянно бегать кругами в поисках чего-то идеального – пустая трата времени.

Поставьте перед собой желаемый результат и выбирайте под него среду разработки. Тогда работать станет намного проще. Вероятно, что в итоге Вы остановитесь на фреймворке, которого даже нет в списке выше. Ну и что? Главное – справиться с задачей на все 100%.

источник

foundation framework — это… Что такое foundation framework?

Фреймворк Foundation для создания адаптивных сайтов на WordPress — Блог про WordPress

Foundation — это мощный CSS-фреймворк, который продолжительное время пребывания в тени Twitter Bootstrap, и только в последнее время пробивший себе дорогу в мир WordPress-тем. «Необычно усовершенствованный», как про него написано на сайте, поддерживает управление любыми размерами сетки, начиная с мобильных телефонов и заканчивая телевизорами, этот фреймворк больше не может быть упущен из рассмотрения.Сегодня мы посмотрим на Foundation — издающийся по лицензии MIT фронтэнд-фреймворк, созданный компанией ZURB, Inc.

Обладая некоторыми успешными примерами использования, Foundation быстро завоевал популярность, в частности, для создания широкопрофильных сайтов, таких как Pixar или National Geographic. Этот многофункциональный, адаптивный фреймворк несет в себе ряду некоторых программ не хватает в Twitter Bootstrap. Давайте сравним функциональность этих двух фреймворков, и укажем на опции, которые делают Foundation предпочтительным выбором.

Мощный CSS-фреймворк для основной роли

Foundation содержит все компоненты, необходимые для быстрого прототипирования, которые является основным использованием CSS-фреймворка. Возможность создания сайтов наивысшим приоритетом для фронтальных разработчиков, ограниченных жесткими сроками сдачи проектов. Foundation был разработан для того, чтобы вам быстро собирать прототипы и формировать код для современных сайтов и приложений, которые прекрасно смотрятся на любых устройствах.Взгляните на различные темы от ZURB, чтобы получить немного вдохновения.

Быстрое создание сайтов с помощью обновленных фронт-энд инструментов

Если вы когда-либо формы создавали выпадающие меню или с нуля, то, скорее всего, у вас уже был печальный опыт, когда вам хотелось выколоть себе глаза . Именно такой опыт и подтолкнул меня к использованию CSS-фреймворков. Foundation особенно хорош, когда дело доходит до создания комплексных элементов пользовательского интерфейса.Также Foundation включает в себя некоторые инновационные пользовательские jQuery-плагины, которые вы не найдете в других фреймворках.

Вот быстрый обзор самых примечательных моделей Foundation:

• Жидкий макет, поддерживающий способ, средства, смещение, а также представление устройств.
• Многочисленные стили навигации, включая комплексную главную панель, которая поддерживает трехуровневую выпадающую навигацию для простых панелей, сайдбаров и дополнительных участков навигации.
• Элементы пользовательского интерфейса для всех важных материалов, включая уведомления, кнопки, подсказки, аккордеоны, таблицы, видео, миниатюры, формы, таблицы цен и т.д.
• Произвольный плагин Очистка для вывода на адаптивных лайтбоксов
• Reveal — произвольный плагин jQuery, позволяющий выводить простые модальные окна для всех устройств.
• Joyride — кроссбраузерный плагин, позволяющий создать экскурсию по вашему сайту или плагину.

Как сравнить Foundation с Twitter Bootstrap?

Нельзя сказать, что это война двух фреймворков, да и рассматривать их как конкурентов невозможно, учитывая, что они свободно распространяются: Bootstrap под лицензией Apache, Фонд под лицензией MIT.

Однако чем популярнее становится фреймворк, тем более широко он используется, то есть поднимается уровень его дистрибуции. В этой сфере Bootstrap побеждает благодаря своей более широкой экосистеме, которая трансформируется в большее число инструментов, доступных разработчикам WordPress. Если звездочки на github можно рассматривать как индикатор использования двух фреймворков, то мы получим следующее сравнение:

.

Быстрое сравнение:

Таблица показывает некоторые наиболее важные различия двух фреймворков:

Семантические классы

Оба фреймворка содержат в себе внушительное количество компонентов пользовательского интерфейса и javascript-дополнений. Однако если семантические классы являются общением для вас, то в таком случае Foundation будет являться предпочтительным выбором.

Вот простой пример разделения в классах, используется для того, чтобы установить ширину столбцов:

 Bootstrap:.span1

Foundation: .one.column 

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

Классы видимости для мобильных устройств

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

К примеру, вот адаптивные классы, которые имеются в Bootstrap:

• .visible-phone
• .visible-tablet
• .visible-desktop
• .hidden-phone
• .hidden-tablet
• .hidden- desktop

Foundation включает примерно в три раза больше различных классов видимости:

Основанные на размере экрана:

• .show-for-xlarge
• .show-for-large
• .show-for-large-up
• .show-for-medium
• .show-for-medium-down
• .show-for-small
• .hide-for-xlarge
• .hide-for-large
• .hide-for-large-up
• .hide-for-medium
• .hide-for-medium-down
• .hide-for-small

Основанные на ориентации:

• . выставка для пейзажей
• .show для портретов

Основанные на сенсорных возможностях:

• .show-for-touch
• .hide-for-touch

Основные возможности печати:

• . только для печати
• .hide-on-print

LESS против Sass

Сравнение LESS с SASS хватило бы для полноценной статьи. Ваши предпочтения в препроцессорах во многом зависят от предпочтений. Sass имеет Compass, CSS-фреймворк с открытым исходным кодом, который помогает писать чистый код, область, в которой Bootstrap несколько проигрывает.Фронт-энд разработчики, обладающие навыками работы с Ruby, не столкнулись с проблемами при работе с Sass и Foundation, хотя всестороннее знание Ruby и не требуется.

Варианты использования Foundation в WordPress

Этот забытый аспект начинает набирать обороты в сообществе разработчиков тем. На самом деле, есть довольно много различных тем WordPress, основанных на Foundation, однако безусловными победителями являются три следующие темы:

Требуется +

Требуется + — родительская тема для WordPress, построенная на базе Foundation.Тема очень хорошо сделана, имеет комментарии, обширную документацию и примерами кода, которые позволяют вам создать что-либо интересное и уникальное.

Возможности Требуется +:

• 6 произвольных шаблонов страниц
• 4 области виджетов
• Шорткоды для столбцов, окон с предупреждениями, модальными окнами Reveal, слайдером Orbit, галереями Очистка и подсказки
• Улучшенный редактор записей с выпадающим списком произвольных стилей

Reverie

Reverie — это универсальный адаптивный WordPress фреймворк, поддерживающий HTML5 и основанный на базе Foundation.Этот фреймворк хранит все файлы Foundation отдельно от других, таким образом, вы можете обновлять их в любое время без каких-либо проблем. Reverie использует шаблонов, навеянную корневую систему — с циклами, отделенными от шаблонов. Также эта тема поддерживает популярные плагины, такие как bbPress и BuddyPress.

Преимущества Reverie:

• Чистый HTML-вывод изображений в TinyMCE, возвращается только класс и атрибут Alt.
• Вывод произвольного меню для вложенной навигации ZURB
• Вывод произвольных заголовков для HTML5-тегов figure и figcaption.
• Две области виджетов: сайдбар и футер
• Два меню: главное навигационное меню и информационное меню в футере
• Несколько произвольных шаблонов страниц в пакете
• Поддержка bbPress 2.0 и BuddyPress 1.5

WP-Foundation

Простая стартовая тема, которая включает в себя список базовых возможностей, таких как:

• Четыре шаблона страниц
• Панель Настроек темы для простых стилей заголовков, стилей основного текста, цветов ссылок, отключения и подключения слайдера Orbit с последними руководми и т .д.
• Несколько шорткодов, обладающих начальной стилизацией Foundation

Как вы можете видеть, Foundation — это прекрасный многообещающий CSS-фреймворк. Foundation предлагает нам инструменты для быстрого создания веб-сайтов, возможно, будет расти точно так же, как и экосистема Bootstrap. Масштабная база пользователей чаще всего влияет на прирост тем и плагинов, открывает многочисленные варианты использования Foundation и WordPress.

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

Источник: wpmu.org

Фреймворк Foundation — Знакомство — Zencoder

Начинаем изучение фреймворка Foundation. Этот фреймворк входит в двойку самых популярных и распространенных CSS-фреймворков на момент написания статьи (еще один — Twitter Bootstrap).

Можно по разному относиться к фреймворкам — любить их или не любить. Однако, они есть и ими пользуются при создании сайтов. Данный факт говорит о том, что фреймворки — это все-таки не такое уж и Зло. Скорее всего, нужно выработать для себя такое отношение к фреймворкам, что это быстрый способ создать не слишком оригинальное по дизайну, со стандартизированными элементами и не слишком оптимизированным кодом ( читай — с большой долей мусора ).А вот если к шаблону предъявляются повышенные требования, вот тогда нужно писать весь код вручную.

, как говорилось уже выше, фреймворки — они есть, и факт их существования говорит сам за себя. А поэтому любой профессиональный веб-разработчик обязан работать с ними. В этой статье будет положено начало посильного знакомства с одним из двух популярных фреймворков — ZURB Foundation.

Сайт проекта Foundation

Официальный сайт проекта находится по этому адресу — Фонд.Если внимательно присмотреться, то можно заметить, что на странице проекта и в других местах мелькает слово ZURB — это название дизайнерской, которая и создала фреймворк.

Если бегло пробежаться по документации, то можно увидеть множество «плюшек» у данного фреймворка:

• фирменную консольную утилитку Foundation для разворачивания или обновления проекта на Foundation
• коллекцию сниппетов под Sublime Text для быстрого создания различных компонентов HTML-страницы
• тесная интерграция с препроцессором Sass

Естественно, Foundation заявляет как полностью адаптивный фреймворк, нацеленный прежде всего на создание мобильных версий сайтов (Mobile First).

Способы установки Foundation

Как говориться на странице документации, существует три способа установки фреймворка на локальном компьютере:

• Начало работы с Foundation CSS — самый простой и быстрый способ установки и начала работы. Нужно просто скачать и распаковать архив с готовым фреймворком
• Начало работы с Sass — разворачивание фреймворка с поддержкой Sass / Compass. Установка на локальный компьютер автоматически, с помощью уже известной консольной утилиты Foundation
• Applications — это что-то связано с разработкой приложений под Foundation.В общем, для front-end это не интересно

В дальнейшей статье приступить к установке Foundation вторым способом, так как мы уже хорошо знаем и умеем пользоваться препроцессором Sass и его библиотекой Compass.

Установка Foundation c поддержкой Sass

Для установки фреймворка на локальный компьютер с поддержкой Sass / Compass предварительное начилие на нем таких программных продуктов, как:

• Git — нужен для работы Bower
• Ruby — нужен для работы Sass / Compass
• Nodejs — нужен для работы Grunt

Foundation версии 5 использует для установки своих компонентов, а также для обновления самого в целом менеджер пакетов Bower, поэтому его наличие также жизненно необходимо в системе.Помимо этого, фреймворк может работать совместно с менеджером задач Grunt для конкатенации файлов; но наличие Grunt не является обязательным.

Проверяю наличие трех вышеназванных пакетов в своей системе Linux Mint 17. Все три пакета были установлены гораздо раньше. Как выполнить установку Git, Ruby, Nodejs, Grunt и Bower под Linux Mint 17, можно почитать в этой статье — «Установка Node.js, npm и Bower под Linux Mint»:

  $ git --version
git версия 1.9.1
$ ruby ​​--version
рубин 1.9.3p484 (22.11.2013, редакция 43786) [x86_64-linux]
$ nodejs - версия
Версия 0.10.25
$ bower --version
1.3.3  

Установка Bower и Grunt, если они еще не были инсталлированы в системе, создается простой командой:

  $ npm install -g bower grunt-cli  

Все готово для установки консольной утилиты . Вы спросите — что это еще за утилита такая и зачем она нужна? Все просто — это фирменная утилитка от Foundation и ее задача — автоматизированное разворачивание готового проекта на локальной машине.

Устанавливаем утилиту фундамент:

  $ gem install фундамент  

Сама утилитка фундамент очень проста. Вызову команду и все станет понятно без слов:

  $ помощь фонда
Команды:
  Foundation help [КОМАНДА] # Опишите доступные команды или одну конкретную команду
  фундамент новый # создать новый проект
  фундамент update # обновить существующий проект
  Обновление фундамента # Обновите свой проект компаса Foundation 4
  Основная версия # Показать версию интерфейса командной строки  

Разворачивание Foundation c поддержкой Compass

C помощью фонда утилиты можно развернуть на локальной машине фреймворк c поддержкой:

Я воспользуюсьым запустить и запустить установку Foundation c поддержкой Compass.Для этого нужно выполнить команду:

  $ foundation new new_project_name  

В моем случае имя нового проекта было оригинальным — foundation)) Пару секунд ожидания и я получаю папку с таким содержимым:

  $ ls -l
drwxr-xr-x bower_components
-rw-r - r-- bower.json
-rw-r - r-- config.rb
-rw-rw-rw- Foundation.md
-rw-r - r-- people.txt
-rw-r - r-- index.html
drwxr-xr-x js
-rw-r - r-- README.md
-rw-r - r-- robots.txt
drwxr-xr-x scss  

Видим здесь файлы , , ; папки , , .Другими словами — это готовый проект!

Немного подредактирую файл и запускю Compass на мониторинг изменений в текущем проекте:

  $ часы с компасом.  

Проект готов для работы! В следующем обзоре будет рассмотрен самый простой пример работы с данными фреймворком — я с вами научусь кнопки на Foundation.

фундаментcss .

Верстать быстро и красиво: 15 популярных CSS-фреймворков

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

Классический CSS фреймворк — набор базовых стилей для вёрстки веб-страницы:

• сетка;
• иконок;
• таблицы;
• элементов форм и кнопок;
• типографика;
• интерфейсные паттерны, например, карточки и модальные окна;
• вспомогательные классы оформления элементов: отступы, цвета и т.д.

Можно начать работу над проектом, не тратя время копирование шаблонного кода написание с чистого листа. CSS фреймворк — фундамент системы стилей.

Зачем нужен фреймворк?

Чем сложнее приложение, тем больше оснований воспользоваться готовым инструментом. Фреймворк необходим в следующих случаях:

• Нужно быстро создать сайт .Кастомизировать компоненты проще, чем создать с нуля.
• Если вы плохо знаете CSS . Берите готовые классы и наслаждайтесь стандартным, но элегантным и продуманным интерфейсом.
• Хотите протестировать дизайн-гипотезу . Создать прототип и проверить идею в деле.

Выбираем CSS-фреймворк

Бутстрап

Популярнейшая библиотека компонентов.В 2018 году вышел Bootstrap 4. В нём ещё больше удобных утилит и модификаторов. Четвертая версия написана на SASS, так что можно использовать в разработке все преимущества препроцессоров.

Bootstrap — самый популярный CSS-фреймворк

Главные фичи Bootstrap:

• Проработанная адаптивная сетка, основанная на Flex-модели, прошла испытание временем на всех разрешениях.Решает большинство задач компоновки контента.
• На Bootstrap созданы тысячи шаблонов, тем и готовых компонентов. Можно собрать сайт, не написав ни строчки CSS-кода.
• Простота обучения. Очевидные концепции, подробная документация серами. Масса пособий для разработчиков с разной степенью погружения в тему.
• Готовый JavaScript для популярных интерактивных компонентов. Аккордеоны и карусели уже написаны за вас.
• Препроцессоры SASS и LESS.

Фундамент

Foundation — вероятно, второй по распространенности CSS-фреймворк. Утонченный и гибкий инструмент подойдёт для очень больших проектов. Им пользуются Facebook, eBay, Mozilla, Adobe, HP, Cisco и Disney.

Фреймворк также построен на препроцессоре SASS и имеет отличную JavaScript-составляющую. Кривая обучения по сравнению с Bootstrap более крутая, но есть и преимущества.

Фонд — идеальное решение для крупных проектов

Главные фичи Фонд:

• Адаптивная система сеток. В создании отзывчивого дизайна не уступает Bootstrap.
• Мощный email-фреймворк. Адаптивный-дизайн не только в веб-приложениях, но и в письмах. Никаких громоздких табличек — використовуйте Foundation для электронной почты.
• Техническая поддержка. Компания-разработчик предлагает обучающие онлайн-тренинги и консультации по продукту. Увы, не бесплатно 🙁
• Простая кастомизация. Фонд гибок. Вы полностью контролируете интерфейс проекта.
• JavaScript-компоненты.
• Легкое создание анимаций.
• Вертикальный контроль разметки.
• Инструменты для разработчика.
• Препроцессор SASS.

Чистый

Этот легковесный (3.8 Кб) CSS-фреймворк создан Yahoo в 2014 году. За легкость приходится платить универсальностью. Pure не предлагает богатую библиотеку компонентов — он сконцентрирован на лейаутах и ​​меню. И конечно, ни капли JavaScript.

Pure.css — легкое решение для отзывчивых макетов

Главные фичи Pure.css:

• Крошечный размер.
• Чистый CSS — для встраивания нужен лишь один файл.
• Меню на любой вкус — вертикальные, горизонтальные, выпадающие.
• Удобная работа с элементами форм.

Бульма

Серьезный игрок на CSS рынке — Bulma.Гармоничная смесь качеств: маленький, отзывчивый, удобный и интуитивно понятный фреймворк. Написан на SASS, сетка на флексах, сначала мобильный подход, чистый CSS — JavaScript не прилагается.

Bulma — гармоничный CSS-фреймворк

Главные фичи Bulma:

• Логичные и запоминающиеся имена классов.
• Чистый CSS — весь фреймворк в одном файле.
• Большое и дружелюбное сообщество, легко найти ответы на все вопросы.
• Просто изучать. Идеальный выбор для начинающих верстальщиков.
• Препроцессор SASS.

Семантический интерфейс

Фреймворк, как следует из названия, трепетно ​​относится к семантике интерфейса. В Semantic UI 3000 настраиваются числа и 50 компонентов для создания сайтов.

Semantic UI — фреймворк для создания интерфейсов, понятных каждому

Главные фичи Semantic UI:

• Интеграция с React, Angular, Meteor, Ember и другими фронтенд-инструментами. Семантический UI легко в существующий проект, не переписывая его заново.
• «Человекопонятный» HTML, упор на семантику веба, легко читаемые имена классов.
• Красивые макеты «из коробки». Даже некастомизированный фреймворк выглядит превосходно.
• Широкий простор для настройки.
• Интуитивно понятный JavaScript.

UI Kit

Еще один добротный CSS-фреймворк с классическим набором полезностей и удобств. Небольшой размер, встроенные интерфейсные компоненты, поддержка препроцессоров, отзывчивая сетка и возможность кастомизации — всё это UI Kit.

UI Kit — чистый код и минимализм

Главные фичи UI Kit:

• Минимализм. Фреймворк Воспетет создание чистого кода и ясных интерфейсов.
• Отличный набор компонентов из коробки с шаблонами, полезные методы и возможности кастомизации.
• Препроцессоры LESS и SASS.

Материализовать CSS

Детище Google появилось на свет в 2014 году и до сих пор занимает лидирующие места в гонке фреймворков. Materialize CSS предлагает набор готовых к использованию компонентов в стиле Material Design.

Materialise CSS — современный фронтенд-фреймворк, основанный на Material Design

Главные фичи Materialise CSS:

• Материальный дизайн.Это по праву один из самых популярных языков дизайна в мире.
• Фреймворк использует сетку Bootstrap. Можно не разбираться в новых концепциях.
• Компоненты мобильного меню.
• Препроцессор SASS.

Миллиграмм

Один из самых миниатюрных CSS-фреймворков. В сжатом виде Миллиграмм весит всего 2Кб. Но мал, да удал — в вашем распоряжении полный набор инструментов верстальщика.

Миллиграмма — миниатюрный CSS-фреймворк.

Главные фичи Миллиграмм:

• Маленький размер файла.
• Классные темы.

Скелет

Всего 400 строк кода — а на выходе мы имеем полноценный CSS-фреймворк.Скелет — это не только лейауты, как можно было бы подумать. Здесь весь стандартный набор: типографика, таблицы, формы, кнопки и т. д. Можно брать и создавать полноценный веб-сайт.

Skeleton — идеальный CSS-фреймворк для небольших приложений

Главные фичи Skeleton:

• Только самая необходимая функциональность.
• Просто изучить.

Попутный ветер CSS

Низкоуровневый CSS-фреймворк, открыты все возможности кастомизации. Tailwind CSS подходит для нестандартных дизайн-решений. Представление о концепции ядерного CSS. Фреймворк написан на PostCSS и конфигурируется на JS.

Tailwind CSS — низкоуровневый фреймворк с множеством утилитарных классов

Главные фичи Tailwind CSS:

• Множество утилитарных классов.Простая кастомизация элементов.
• Набор адаптивных опций.

Спектр

Spectre — классический компонентный CSS-фреймворк с элегантным дефолтным оформлением.

Spectre — элегантный CSS-фреймворк

Главные фичи Spectre:

• Чистый CSS, без JavaScript-кода.
• Препроцессор SASS.

База

Base — компактный и легкий, но довольно мощный фреймворк, который может стать надежным фундаментом для ваших проектов.

База — надежный CSS-фундамент для вашего сайта

Главные фичи База:

• Основан на последней версии Нормализовать.css.
• Разбитые на независимые друг от друга модули.

Пикник CSS

Небольшая библиотека статических и интерактивных компонентов. Picnic включает в себя сетку, формы, табы, всплывающие подсказки, модальные элементы и т. п.

Picnic — легкий CSS-фреймворк с симпатичным дизайном

Главные фичи Picnic CSS:

1. Симпатичный дефолтный дизайн.
2. Настраиваемые переменные.
3. Препроцессор Sass.

Горчичный UI

Ищете CSS-фреймворк для новичков? Вы его нашли. Опенсорсный легкий Горчичный создан специально для начинающих разработчиков.

Mustard UI — CSS фреймворк для начинающих верстальщиков

Главные фичи Mustard UI:

1. Отдельные модули.Можно работать только с компонентами, которые действительно нужны.
2. Отличная документация.
3. Маленький размер.

Мертвая простая сетка

Однозначный чемпион в номинации Самый крохотный CSS-фреймворк. Dead Simple Grid — это по большому счету, и не фреймворк вовсе. Весит всего 250 байт (!) И состоит лишь из двух классов. Все, что умеет Dead Simple Grid, — строить сетки, но иногда только это вам и требуется.

Dead Simple Grid — убийственно простой инструмент для построения сеток

Главные фичи Dead Simple Grid:

• Элементарная структура. Вряд ли вам вообще потребуется документация.
• Адаптивные колонки и фиксированные отступы.
• Поддержка бесконечной вложенности.

Бонус

В качестве награды за прочтение еще 3 интересных библиотеки CSS, которые могут вам пригодиться:

• Animate.css. Создание CSS анимаций с огромным набором эффектов.

• NES.css. Библиотека компонентов, выполненных в 8-битном стиле.

• Простая сетка.Классическая 12-колоночная сетка для быстрого построения макетов.

Как сделать выбор?

CSS-фреймворки предоставляется много готового кода, уже проверенного в различных браузерах и на разных разрешениях, чем здорово экономят время. При выборе задаваться не вопросом « какой из этих инструментов лучше? », а« какой из них лучше подходит для моего проекта? ».

Основные значащие факторы:

• Размер файлов фреймворка или библиотеки.
• Необходимый набор компонентов.
• Наличие или отсутствие JavaScript-сопровождения.
• Поддержка препроцессоров.
• Концептуальный подход.

Разобравшись в своих потребностях, вы без труда подберёте CSS-фреймворк. Возможно, даже из нашего списка.

С какими CSS-фреймворками вы работаете? Поделитесь впечатлениями!

.

Популярные css фреймворки в 2020 для мобильных устройств

Популярные css фреймворки в 2020 для мобильных устройств

Как фронтенд-разработчик, я часто говорю о фронтенд-фреймворках и столь же часто забываю о важности CSS-фреймворков и о том, сколько времени они могут сэкономить.

Когда мы строим пользовательский интерфейс, нам нужно написать последовательный и эффективный CSS, а это непростая цель, ее сложно достичь. Вот почему многие фронтенд-разработчики находят решение в применении CSS-фреймворков, например, Bootstrap.

CSS-фреймворки позволяют нам создать красивый фронтенд. Но дело не только в подборе цветов и создание красивых таблиц: большинство фреймворков имеют отзывчивый дизайн. Это делает нашу работу комфортнее, поскольку нам не приходится создавать еще один CSS-код для мобильных версий.

При выборе CSS-фреймворка, подходящего для нашего проекта, следует учитывать следующие аспекты:

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

В этой статье я расскажу о достоинствах и недостатках шести CSS-фреймворков, как известных, так и не очень.

Начальный загрузчик

Последние несколько лет на рынке ценится обеспечение от разработчиков Twitter — Bootstrap . Сегодня на его основе сделаны сайты таких брендов и организаций, как:

• Netflix;
• Toyota, Ford и Volkswagenag;
• Sony;
• Pepsi;
• л.с.;
• ФБР, НАСА;
• cftc.gov — комиссия США по торговле товарными фьючерсами.

В каждой из этих компаний сидят высококвалифицированные специалисты и они доверяют Bootstrap.

Популярные css-фреймворки в 2020 для мобильных устройств

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

Преимущества Bootstrap

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

Недостатки Bootstrap

Идеальных не существует, верно? Данный фреймворк не исключение. За свою относительно небольшую историю он уже попал под шквал критики. И вот почему:

• однообразие UX : Bootstrap и обладает пусковой массой макетов и встроенных модулей, они довольно похожи. Потому все сайты этого фреймворка выглядят несколькими скучными и знакомыми. Веб-дизайнерам, как своего рода, деятелям искусства, это не по душе;
• заставляет работать : фреймворк имеет множество дефолтных значений.Для их переопределения нужно усердно постараться, хотя этот процесс можно было бы упростить.

Это программное обеспечение отлично подойдет как для начинающих, так и разработчиков, предпочитающий надежный интерфейс.

Бульма

Bulma — относительно новый фреймворк на рынке, в сравнении с большинством конкурентов. Но за короткое время он сделал себе известное имя. Привлекательно обоснована строгим подходом, основанным исключительно на CSS (без элементов Javascript, как в Bootstrap) и элегантных дефолтных конфигурациях.

Bulma

Сетка данного фреймворка полностью основывается на Flexbox. Bulma не особо требовательно к началу проекта веб-разработки. Потому что ее считают очень хорошим хорошим для круглых новичков. С этим программным средством можно достаточно быстро настроить сайт.

Преимущества

• простой синтаксис;
• адаптивный дизайн;
• созданы для повседневных задач, с сталкиваются небольшие команды, потому простая в изучении;
• большая коллекция компонентов;
• популярна: на Github имеет более 30 тысяч звезд.Конечно, это не говорит о качестве. Но это отображает высокий уровень доверия пользователей.

Недостатки

• из его новизны есть множество неисправных багов;
• небольшой опыт использования — требует проверки временем;
• отсутствие префиксов Flexbox для разных браузеров.

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

Фонд

Как говорят сами чики , если бы программирование было религией, разработчики Foundation и Bootstrap стали бы по разным сторонам баррикад. Тем не менее, ни одно обсуждение современного CSS фреймворков не обходится без упоминания Foundation.

Первое, что видно на главной странице сайта — фраза «Наиболее адаптивный Front-end фреймворк в мире». Звучит дерзко, но сторонники этого программного обеспечения знают, что слова не брошены на ветер.Это подтверждается тем, что Foundation используется такими компаниями, как Facebook, eBay, Mozilla, Adobe и другими.

Foundation

Фреймворк отлично работает в сочетании с GPU-ускорением для молниеносной и плавной анимации. Также, он предлагает инструмент Fastclick.js для более быстрой визуализации на мобильных устройствах.

Преимущества

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

Недостатки

Foundation — один из примеров использования, в котором сильные стороны могут проявиться как слабые и вот почему:

• комплексная основа: множество внутренних слоев, сдвоенные компоненты, бесконечные возможности сделать работу с фреймворком невероятно сложной;
• разнообразие: иногда просто хочется побыстрее закончить проект, но обилие вариантов сильно мылит глаза, из-за чего финальная стадия может слишком затянуться;
• небольшое сообщество: поскольку изучить Фонд сложнее, в нем не так много специалистов.При возникновении проблем будет трудно найти решение.

Если Вы новичок, это программное обеспечение точно не для Вас. Foundation имеет слишком обширные возможности, с большим не разобраться без большого опыта работы с фреймворками. Но если Вы уже не первый год в этом варитесь, то Foundation будет хорошим выбором благодаря своей гибкости, отличной семантике и действительно высокому уровню адаптивности.

Материализовать

Современная адаптивная среда разработки, основанная на спецификациях дизайна материалов Google.Многие программисты ставят ее на третье место после Bootstrap и Foundation. Если Вы хотите создать сайт в стиле Google, то нужно использовать именно этот фреймворк .

Materialise

В этой среде достаточно компонентов и классов. В Materialize используется 12-колонный формат сетки, как и в Bootstrap.

Преимущества

• большой выбор компонентов;
• хорошо смотрится на любом устройстве;
• удобная кастомизация;
• открытый код.

Недостатки

• большой размер;
• отсутствие flexbox;
• однообразие дизайна готовых сайтов.

Несмотря на то, что на основе этого фреймворка получаются одинаковые проекты, многие пользователи ему доверяют. С Materialise можно начинать верстать сайты имея минимальный опыт работы с CSS.

UIkit

Минимализм — один из сегодняшних трендов в любом дизайне, включая веб-разработки.Потому что UIkit уверенно набирает популярность среди многих верстальщиков. Обеспечивая элегантный внешний вид с использованием максимума пустого пространства эта среда разработки обладает преимуществами всех фреймворков.

UIkit

UIkit — легкая и адаптивная среда разработки. Она помогает создать расширенный интерфейс с помощью таких компонентов, как Nestables (позволяет сортировать элементы путем перетаскивания, что облегчает организацию панелей навигации).

Преимущества

• расширенные возможности кастомизации;
• адаптивность к любым устройствам;
• структурированный код;
• простое добавление любых компонентов без ущерба общему внешнему виду;
• заготовки тем.

Недостатки

• некоторые классы сложны для чтения, потому что тяжелее достигли результата;
• большинство шаблонов платные;
• маленькое количество пользователей.

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

Семантический интерфейс

Известен своими простыми и элегантными дизайнами, а также невероятными тематическими эффектами. Этот фреймворк имеет в наличии более 3000 разных тем и порядка 50 вариантов пользовательского интерфейса. Таким образом, Semantic UI — отличная среда разработки для создания адаптивных сайтов.

Semantic UI

Он очень молод, однако смог заработать популярность благодаря своей простоте. Код этой среды разработки не требует пояснений, потому что хорошо подойдет многим новичкам. В Semantic UI довольно просто узкие места кода, не копаясь в следах стека.

Преимущества

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

Недостатки

• несмотря на загрузку лишь необходимых компонентов, размер файла все еще велик;
• не подойдет пользователю, не знающему Javascript;
• содержит немало багов вроде невозможности смешивания классов;
• небольшой выбор классов.

Semantic UI, отличная среда разработки для сообщества новичков благодаря своей простоте. Тем не менее, многие функции (вроде модальных) используют настройку Javascript, потому что без опыта работы с этим языком Семантический пользовательский интерфейс будет недоступен.

Какая среда разработки лучше?

Вероятно, задавались этим вопросом не один раз. Скорее всего, ответ во всех случаях был «никакая». Bootstrap самый популярный по оценкам пользователей, однако его нельзя назвать наилучшим. Выбор фреймворка зависит от множества факторов.

Если Вам нужен совет по выбору, вот он: изолируйте себя от информационного шума. Ведь Вы не обязаны использовать продукт, по все сходят с ума. Испытывать что-то новое — это здорово, но бегать постоянно кругами в поисках чего-то идеального — пустая трата времени.

Поставьте перед собой желаемый результат и выбирайте под него среду разработки. Тогда работать станет намного проще. Вероятно, что в итоге вы остановитесь на фреймворке , которого даже нет в списке выше. Ну и что? Главное — справиться с соблюдением на все 100%.

источник

.

No related posts.