5 лучших альтернатив Bootstrap

от

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

Если в наши дни вы случайно проверите исходный код внешнего интерфейса веб-сайта, скорее всего, вы найдете Bootstrap внизу. Мы все настолько привыкли к таким понятиям, как container-fluid, row, col-sm-6 и т. д., что трудно представить, что возможен какой-либо другой стиль разработки внешнего интерфейса. И поэтому, когда нам нужно построить следующий проект, мы неосознанно тянемся к Bootstrap. Тем не менее, популярность не делает Bootstrap подходящим для всех проектов и потребностей.

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

У этой статьи две цели:

  • Предоставлять живые альтернативы Bootstrap, не похожие на Bootstrap.
  • Объясните, почему вы можете захотеть рассмотреть эти альтернативы Bootstrap.

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

    И с этим, давайте посмотрим, какие альтернативы у нас есть.

    Сетка Flexbox

    Задумайтесь об этом на минутку: главная причина, по которой вы начали использовать Bootstrap и до сих пор используете его, — это его сеточная система. Конечно, потребовалось некоторое время, чтобы привыкнуть к классам row, col-md-6 и т. д., но теперь это вторая натура — думать о макете с точки зрения строк, столбцов, смещений и т. д.

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

    Если да, вы могли бы сделать намного лучше с Сетка Flexbox.

    Flexbox Grid, как следует из названия, представляет собой систему сеток, основанную на CSS. Флексбокс характеристики. Однако, в отличие от техники CSS, вся сложность абстрагируется, так что вы можете сосредоточиться только на размещении элементов так, как вам нужно. Самое приятное то, что весь код и имена классов имитируют то, что вы хотели бы видеть в Bootstrap 4, а это означает, что переключение между этими двумя инструментами не требует никаких умственных усилий. Например, вот как выглядит код «пространства вокруг» во Flexbox Grid:

    <div class="row around-xs">
    <div class="col-xs-2">
        <div class="box">
            around
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            around
        </div>
    </div>
    <div class="col-xs-2">
        <div class="box">
            around
        </div>
    </div>
</div>

    Размер минимизированного файла CSS для этой системы сетки составляет всего 10,7 КБ, что позволяет сэкономить несколько сотен КБ при окончательном размере загружаемого файла. В настоящее время Flexbox Grid является моим фаворитом, поскольку я не хочу бороться с Bootstrap, чтобы полностью настроить его. Мне нравится начинать с ванильных элементов и стилизовать их самостоятельно, используя Flexbox Grid везде, где мне нужно.

    Учиться Flexbox здесь, онлайн.

    Чистый CSS

    Было бы неплохо, если бы Bootstrap был разделен на модули, и вы могли бы импортировать только тот модуль, который вам нужен?

    Что ж, Чистый CSS пошел дальше и сделал именно это — это набор модулей, охватывающих различные функциональные области веб-сайта. Вы можете скачать один или все, но размер загружаемого файла не будет превышать 3,7 КБ!

    Да, вы правильно прочитали.

    Все модули, собранные вместе и сжатые с помощью gzip, весят 3,7 КБ, хотя по отдельности они составляют больше. Модуль сетки весит всего 0,8 КБ, а модуль Base — 1,0 КБ. Команда разработчиков PureCSS говорит, что он был создан исключительно с учетом мобильных устройств, поэтому каждая строка CSS была тщательно проверена на предмет эффективности, прежде чем была включена.

    Допустим, вам нужен только модуль сетки и форм. Что ж, просто загрузите эти два (вместе с базовым модулем), и все будет готово менее чем за 3,4 КБ! Нет необходимости включать CSS из модулей «Кнопки», «Таблицы» и «Меню», если вы не собираетесь их использовать.

    Однако в PureCSS есть свои классы, и полученный код не имитирует Bootstrap, к которому вы, возможно, привыкли:

    <div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Lorem Ipsum</h3>
        </div>
    </div>
    
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
       <div class="l-box">
           <h3>Dolor Sit Amet</h3>
       </div>
    </div>
    
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
       <div class="l-box">
           <h3>Proident laborum</h3>
       </div>
    </div>
    
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
       <div class="l-box">
           <h3>Praesent consectetur</h3>
       </div>
    </div>
</div>

    Вы заметите, что больше нет сетки из 12 столбцов. PureCSS имеет свою систему сетки, которая определяет ширину столбца. Итак, pure-u-lg-1-4 означает, что этот элемент должен занимать 1/4 или 25% доступной ширины на больших экранах. Также доступны значения ширины, кратные 1/5.

    В общем, PureCSS — это освобождающий и удивительный CSS-инструмент (фреймворк?), который вы можете выбирать по мере необходимости. Тем не менее, это связано с изрядной долей участия и кривой обучения, поскольку вам нужно научиться новому (немного другому) способу ведения дел.

    PureCSS также имеет свои собственные классы и стили по умолчанию, так что в этом он не слишком отличается от Bootstrap.

    Зимит

    Зимит framework является своего рода лишним в этом списке. Да, это фреймворк для создания пользовательского интерфейса, но он нацелен на определенные типы пользовательского интерфейса: мокапы.

    Бывают случаи, когда вам нужно разработать интерфейс для демонстрации функционирования продукта. Идеальным способом сделать это, конечно же, было бы привлечь дизайнера/разработчика пользовательского интерфейса и создать мокапы с помощью одного из продвинутых инструментов каркасного моделирования (на ум приходят Moqups, Blasmic и т. д.). Страницы будут идеальными до пикселя, цветовая схема будет гладкой и хорошо подобранной, и страницы будут открыты для участия, обзоров, комментариев и т. д.

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

    • Позволяет кодировать в HTML/CSS
    • легкий
    • Имеет обширную коллекцию основных компонентов
    • Имеет достойный и последовательный язык стиля
    • Если возможно, напоминает «сероватый» тон каркасного дизайна.
    • Легко учиться
    • Имеет встроенный препроцессор CSS

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

    В виде дерева

    хлебные крошки

    Вкладки

    Есть еще много вкусностей для изучения. Проверь их здесь.

    Давайте посмотрим, как выглядит код. Вот как можно использовать сетку в Zimit:

    <div class="row">
   <div class="c12">
      <div class="row">
         <div class="c4">4 columns</div>
         <div class="c4">4 columns</div>
      </div>
      <div class="row">
         <div class="c4">4 columns</div>
         <div class="c4">4 columns</div>
      </div>
   </div>
</div>

    «c» здесь означает «столбец», поэтому «c4» означает столбец, который охватывает четыре единицы (сетка имеет размер 12, как в Bootstrap). Очень похоже на Bootstrap и, на мой взгляд, очень интуитивно понятно.

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

    HTML Кикстарт

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

    HTML Кикстарт предлагает альтернативу.

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

    Падать

    Кнопки

    Вкладки (по центру и со значками)

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

    Если вам нравится Bootstrap за то, что в нем есть готовое решение для всех распространенных проблем веб-дизайна, но вы поклонник стиля дизайна Material, вам стоит попробовать Материализоваться.

    Materialise во многом похож на Bootstrap — 12-точечная сетка, смещения и знакомые компоненты, такие как формы, карточки и т. д. Однако у него есть определенные преимущества, которые могут понравиться многим.

    Тяни-Толкай

    Функция push/pull в Materialize CSS позволяет изменять порядок столбцов. Это напоминает новый стандарт CSS Grid, где макет отличается от порядка элементов.

    <div class="row">
      <div class="col s7 push-s5"><span class="flow-text">This div is 7-columns wide on pushed to the right by 5-columns.</span></div>
      <div class="col s5 pull-s7"><span class="flow-text">5-columns wide pulled to the left by 7-columns.</span></div>
</div>

    Это приводит к следующему:

    Вы заметите, что столбцы поменялись местами, что, возможно, недостижимо в традиционном CSS на основе Bootstrap.

    Вкусности JavaScript

    Существует довольно много функций и эффектов JavaScript, которые поставляются с Materialize. Всплывающие подсказки, всплывающие подсказки (эфемерные уведомления в стиле Android), Parallex, Pushpin и т. д. — вот некоторые из них. Один действительно удивительный эффект, который мне понравился, — это FeatureDiscovery, который в основном позволяет выделить элемент на странице при каком-то событии (скажем, при нажатии кнопки), чтобы привлечь внимание пользователя к этому элементу. Трудно полностью описать это словами, поэтому зайдите на https://materializecss.com/feature-discovery.html, чтобы понять, что я имею в виду.

    В общем, Materialize — отличная альтернатива Bootstrap или для тех, кто хочет внедрить полнофункциональную инфраструктуру Material CSS.

    Вывод

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