10 лучших CSS-фреймворков для разработчиков

Однажды я услышал шутку переднего разработчика: «НАСА посадило роботов на Марс, и здесь мы все еще изо всех сил пытаемся выровнять наши деления по центру!» И мне неприятно, что в этой шутке много правды. Делать что-то, что звучит так же просто и основано на здравом смысле, как центрирование прямоугольника внутри прямоугольника, невероятно трудно реализовать в CSS. Если вы не сталкивались с этим раньше. И где-то сохранил фрагмент кода. И даже если вам удастся это осуществить, всегда есть скрывающийся страх, что он может просто ужасно сломаться в каком-нибудь дурацком браузере! CSS связывает первое место «необходимого зла» вместе с JavaScript. Это стандарт, который развивался непредсказуемо, по-разному интерпретировался разными производителями браузеров и теперь настолько полон противоречий, что никто не смеет называть себя «экспертом по CSS».


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

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

Эта статья бросает быстрый взгляд на среду разработки front-end и сравнивает лидеров среди CSS-фреймворков. Так что, если вы устали от ручного кодирования CSS-правил, погрузитесь для некоторого быстрого облегчения!

начальная загрузка

Инициатива от Твиттера, начальная загрузка берет кредит на введение адаптивного дизайна в больших масштабах. Это была первая основа для продвижения философии «сначала мобильный». Больше не проектировал для маленьких экранов отдельный проект сам по себе; все, что вам нужно было сделать, это включить соответствующие классы Bootstrap, и дизайн автоматически адаптировался бы к разным размерам экрана (ну, почти).

Адаптивный дизайн в Bootstrap (4.0 против 3.0)

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

Один из трех столбцов

Один из трех столбцов

Один из трех столбцов

В настоящее время популярной версией Bootstrap является 4, которая была капитально переработана в серии 3.3. Вышеупомянутый синтаксис – это то, как вы кодируете в Bootstrap 4, который во многом благодаря своей элегантности обязан сырой мощи Flexbox и другие современные функции макета, поддерживаемые браузерами напрямую. В более низких версиях Bootstrap сетка была определена как 12 столбцов, что привело к появлению такого кода, как

чтобы div занимал треть ширины экрана на устройствах большого размера и половину ширины на устройствах среднего размера. Синтаксис теперь намного приятнее, хотя и требует знакомства с Flexbox.

Bootstrap Pros

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

  • Быстрое прототипирование: С Bootstrap практически не нужно задумываться о хитром позиционировании CSS и несовместимости браузеров. Все, что вам нужно сделать, это написать HTML, а затем применить соответствующие классы CSS, чтобы оживить реакцию.
  • Большая экосистема: На сегодняшний день Bootstrap имеет самую большую экосистему среди интерфейсных сред. Количество макетов веб-сайтов, тем, панелей администратора, компонентов пользовательского интерфейса и т. Д., Созданных с помощью Bootstrap, ошеломляет и продолжает улучшаться. Для консультантов и компаний-производителей это означает, что готовых изделий и поддержки сообщества всегда будет достаточно.
  • При поддержке Twitter: Появляющаяся тенденция в открытом исходном коде – рост проектов, спонсируемых коммерческой организацией. Чаще всего эти организации строят прибыльные бизнесы на основе своих предложений. Котлин (JetBrains), WordPress (Automattic, Inc.), Angular (Google), React (Facebook) и т. Д., Вот некоторые примеры. Когда проект поддерживается созданной организацией и не является показом для одного человека, он дает веру сообществу (особенно корпоративным клиентам), что проект будет иметь четкую дорожную карту и долгосрочное будущее.
  • Большая коллекция компонентов: Bootstrap предлагает из коробки практически все компоненты пользовательского интерфейса, которые вам когда-либо могут понадобиться. Навигация, формы, карточки, модалы, кнопки, значки, индикаторы выполнения, оповещения. , , Вы называете это, и Bootstrap это имеет. Для многих компаний это практически избавляет от необходимости иметь специальную команду.
  • LESS и SASS поддержка: Среди чрезвычайно популярных CSS-фреймворков Bootstrap – единственная, которая поддерживает как LESS, так и SASS. Да, я знаю, вы не используете LESS (как не должен уважающий себя разработчик, верно?), Но, эй, существуют масштабные проекты, которые полагаются на LESS. Конечно, вы не можете выбрать ни один и записать ваши простые файлы CSS.

Bootstrap Минусы

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

  • UX монотонность: Тот факт, что Bootstrap имеет такую ​​большую коллекцию встроенных модулей, приводит к тому, что веб-сайты выглядят слишком знакомыми и, честно говоря, скучными. Вам нужно только направиться к официальные примеры чтобы увидеть, насколько глаза по умолчанию. Просто найдите «все сайты начальной загрузки выглядят одинаково», и вы поймете, что я имею в виду. ��
  • Укладка бед: Bootstrap – это то, что можно считать самоуверенной основой. Другими словами, у него есть идеи по макетам, и он заставляет вас работать очень усердно, если вы хотите, чтобы он выглядел / вел себя по-другому. Рассмотрим стандартные точки останова CSS для ширины экрана: средний размер экрана для Bootstrap начинается с ширины устройства 768 пикселей. А что если вы хотите нацелиться, скажем, на ограничение в 600 пикселей? Что ж, удачи в этом! То же самое происходит почти со всеми другими компонентами в начальной загрузке: строки и контейнеры имеют отступы по умолчанию, кнопки имеют цвета и границы, которые очень сложно переопределить без особой работы и т. Д..

Хочу освоить Bootstrap? Проверьте это онлайн курс от Брэда Траверси.

Фонд

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

Возглавьте Фонд Веб-сайт, и вы не можете не заметить подпись: «Самая совершенная адаптивная интерфейсная среда в мире». На первый взгляд это выглядит как претензия на маркетинговую кампанию.

Однако сторонники структуры Фонда знают, что в этом есть хоть какая-то правда. Foundation был разработан для естественного использования инфраструктуры Rails, и некоторые из «дзен-подобных» руководящих принципов Rails можно увидеть на работе.

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

По сравнению с более ранними версиями Bootstrap, я нахожу это очень интуитивно понятным и легко запоминающимся. Не более двенадцати столбчатых сеток и выяснение того, что должно быть 4/12!

Хотя Foundation гораздо менее популярен, чем Bootstrap, он является коммерческим секретом для многих опытных разработчиков..

Плюсы фонда Framework

Foundation имеет некоторые необычные характеристики из всех CSS-фреймворков, которые мы рассмотрим в этой статье:

  • Полный набор инструментов: Технически неправильно утверждать, что Foundation – это фреймворк CSS. Я имею в виду, что это так, но он был создан как большой и модульный набор инструментов, предназначенный для решения практически всех видов интерфейсных задач. Существуют отдельные базовые предложения для веб-сайтов и электронных писем, которые в значительной степени оптимизированы для соответствующих доменов. Foundation также поставляется с интерфейсом командной строки (CLI), который будет звучать как музыка для ушей разработчиков, привыкших работать с Webpack или другими пакетами модулей.
  • Чрезвычайная гибкость: В отличие от Bootstrap, Foundation был создан, чтобы предоставить внешнему разработчику полный контроль над их пользовательскими интерфейсами. В результате Фонд будет чувствовать себя мягким и чрезвычайно сложным для новичка. Однако причина в том, что Foundation не навязывает вам какой-либо язык стилей, а стремится быть именно тем, чем он является: отличной платформой CSS.
  • Больше, чем просто компоненты пользовательского интерфейса: В то время как Фонд имеет обычную коллекцию элементов пользовательского интерфейса, он выходит далеко за рамки служебного долга. Разработчики включили усовершенствованную систему адаптивных изображений, компонент таблицы цен (да, тот, который использовался для отображения различных тарифных планов), проверку формы, поддержку справа налево, адаптивные встраивания и многое другое. Я хотел бы еще раз подчеркнуть, что это является излишним для большинства простых веб-сайтов, но для крупных – это благо, которое признают опытные разработчики..
  • Обучение и консалтинг: Теперь, хотя Bootstrap создан Twitter, это побочный проект и очень маленькая часть общей картины. Компания, стоящая за Фондом (ZURB), однако, стремится использовать, развивать и продвигать ее. Для крупных клиентов предлагаются учебные курсы и профессиональные консультации, что отлично подходит для компаний, которые нацелены на масштабные проекты и готовы платить.

Минусы Фонда Основы

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

  • Небольшое (эр) сообщество: Сообщество Foundation намного меньше, чем сообщество Bootstrap, и если вы пытаетесь что-то экзотическое и застряли, шансы найти соответствующую помощь ниже. Тем не менее, я бы добавил, что для всех практических целей; там достаточно сообщества. Просто он на несколько порядков меньше, чем у Bootstrap, поэтому вы можете не найти решения сразу.
  • Сложность: Если вы привыкли к Bootstrap или чему-то простому или, что еще хуже, к ванильному CSS, Foundation будет ощущаться как бесконечный взрыв сложности. Слои внутри слоев, компоненты с компонентами, бесконечные возможности настройки. , , Довольно скоро вы начнете сомневаться в полезности самой жизни! Но опять же, у Фонда совсем другая цель, и в этом нельзя винить.
  • Слишком много вариантов: Иногда вы просто хотите закончить с дерьмом и потом беспокоиться о совершенстве. В такие времена расстраивает то, что у вас слишком много вариантов с небольшими изменениями. Например, подумайте о том, чтобы заказать сэндвич Subway, когда вы так голодны, что можете есть грязь. Естественно, Фонд не для таких времен.
  • Наличие талантов: Поскольку Foundation (намного) менее популярен, чем Bootstrap, доступные таланты намного меньше. Как правило, любой новый сотрудник, скорее всего, знает Bootstrap, но понятия не имеет о Foundation. Обучение требует времени, и это роскошь, которую не все команды могут иметь.

Бульма

Бульма является относительно новым участником битвы CSS-фреймворков и за короткое время сделал себе имя. Его привлекательность заключается в строгом подходе, основанном только на CSS (нет компонентов JavaScript), и в элегантных настройках по умолчанию, с которыми сталкиваются многие разработчики, хорошо разбирающиеся в дизайне, при работе с Bootstrap..

Большая часть импульса Bulma исходит от высокого уровня принятия в сообществе Laravel (веб-фреймворк PHP, если вы не знали), что, я уверен, во многом помогло Vue.js подняться на вершины популярности. среди фреймворков JavaScript.

Почему стоит выбрать Bulma CSS Framework

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

  • Довольно популярно: Хорошо, он не более популярен, чем Bootstrap, но он более популярен, чем Foundation. На момент написания статьи, у Булмы на Github было более 30 тысяч звезд, что примерно на 3 тысячи больше, чем у фондов. Конечно, количество звезд Github не является показателем качества, но в нем говорится, что сообщество одобряет Булму.
  • Чрезвычайно читаемые классы: Булма, для меня, имеет самые читаемые классы CSS из всех каркасов, которые я пробовал. Существует также невероятно мощная и простая система для создания сеток в стиле Metro, называемая плитками (просто посмотрите на код во второй половине скриншота и скажите, что вы не впечатлены!).

  • Плоская кривая обучения: Bulma имеет модульную структуру и был создан для решения практических повседневных задач, с которыми сталкиваются небольшие команды и отдельные разработчики. Вы обнаружите, что Bulma очень легко выучить, хотя я думаю, что приличный фон в CSS всегда полезен, чтобы иметь представление о том, что может происходить под капотом. Это поможет вам, когда вы хотите переопределить поведение по умолчанию.
  • Элегантный: Что ж, взгляните на раздел «Герой» по умолчанию для Булмы ниже. Достаточно сказано!

Bulma имеет небольшое, но чрезвычайно страстное сообщество, поэтому, если вы хотите избавиться от всего этого пуха и все же хотите создать элегантный интерфейс в рекордно короткие сроки, Bulma – это то, что нужно. Для разработчиков Bootstrap в Bulma есть отдельный раздел, чтобы убедить и помочь им перейти.

UIKit

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

Например, взгляните на компонент индикатора выполнения:

Или компонент маркера изображения (управляемый JS интерактивный маркер для изображений):

Или даже скромная форма HTML:

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

Но есть ли подвох, вам интересно. Да, есть. Как Bootstrap, UIkit работает со своим JavaScript, и хотя вы можете использовать jQuery для манипулирования DOM, использование виртуальной структуры DOM, такой как React, невозможно.

Кроме того, Uikit – это автономная система, и вы не сможете изменить или расширить ее без значительных усилий..

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

Еще один соперник в гонке Семантический интерфейс, который пытается отличиться большим количеством тем и настроек. Существует более 3000 переменных тем, что приводит к огромной ширине. Или так говорят в документах.

Bootstrap 4 охватывает все это и полностью настраивается, но одно преимущество Semantic UI заключается в том, что по умолчанию он имеет привлекательные макеты. Тем не менее, это не самый красивый из коробки, поэтому я поместил его позже в свой список.

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

Сюзи

Сюзи на данный момент это малоизвестная структура, но это увлекательная и освежающая идея. Еще одна структура чистого макета, Susy покончила со всеми предопределенными идеями с плавающей точкой, сеткой, Flexbox, таблицами или чем-либо еще, и позволяет вам составить тот макет, который вы хотите. «Compose» – ключевое слово здесь, так как Susy предназначена для создания высокомодульных, ошеломляющих макетов с ультра-сложными, необычными и точными потребностями..

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

Чтобы получить представление о силе Susy, попробуйте эту настройку по умолчанию (SASS):

// 4 симметричных жидкостных столба
// желоба составляют 1/4 размера столбца
// элементы на 1 меньше, чем столбцы
// контейнеры также на 1 меньше желоба
$ susy: (
‘column’: susy-repeat (4),
желоба: 0,25,
«распространение»: «узкий»,
«контейнерный спред»: «узкий»,
);

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

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

Если вы влюблены в дизайн материалов Google, Materialise – это фреймворк вам понравится. Лучше всего то, что у него есть только несколько компонентов и классов для изучения, и он направлен на то, чтобы максимально быстро повысить производительность. Есть несколько вариантов настройки, и Materialize следует популярному 12-колоночному формату сетки, установленному Bootstrap.

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

чистый

Yahoo мертв?

Нет, этот вопрос не отвлекает, но подчеркивает важное наблюдение: Yahoo построил Чистые рамки и выпущен под лицензией BSD.

Беглый взгляд меня впечатляет, и я удивляюсь, почему это предложение не известно большему количеству людей. В любом случае, что делает Pure, ну, в общем, чистым, это то, что это чистый CSS-фреймворк. �� Фактически, разработчики приложили дополнительные усилия и разбили их на различные CSS-модули, которые можно импортировать по мере необходимости. Таким образом, если вам нужна только сеточная система, вам не нужно импортировать весь CSS и увеличивать время загрузки сайта..

Сетка Pure поставляется в нескольких вариантах: 5-точечная, 2-точечная, 24-точечная и т. Д., Поэтому, когда дело доходит до создания столбцов, вы получаете гораздо больше гибкости. По умолчанию Pure не является самой привлекательной платформой CSS, но я вижу, как она добавляет ценность тем, кто хочет решить крошечную проблему CSS в своем пользовательском интерфейсе и недоволен «полезными» настройками по умолчанию, которые поставляются с другими платформами..

остов

Как вы можете видеть на скриншоте, остов настолько минимален, что даже не называет себя фреймворком, библиотекой или даже модулем CSS. Это шаблон и содержит только 400 строк исходного кода! Невероятный? Я так думаю, но для того, чтобы представить вещи в перспективе, Skeleton был разработан для крошечных или небольших проектов, которые требуют чуть больше, чем макеты и позиционирование..

Стоит посмотреть; в конце концов, кто знает, скелет может быть тем, что вы искали все время!

миллиграмм

Последний в списке миллиграмм, CSS-фреймворк, разработанный для скорости и производительности. Разработчики сохранили его размером менее 2 КБ, что по современным меркам много значит.

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

Итак, какой CSS-фреймворк является лучшим?

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

Итак, какие из этих рамок вы пробовали? Или, может быть, что-то удивительное, что я только что пропустил? Дайте мне знать в комментариях, пожалуйста. Любовь, ненависть, случайные приветы, все добро пожаловать!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map