5 лепшых альтэрнатыў Bootstrap

Bootstrap паўсюль, але гэта не заўсёды правільны інструмент для працы. Вось некалькі выдатных альтэрнатыў!

Калі вы ў нашы дні выпадковым чынам правяраеце зыходны код інтэрфейсу вэб-сайта, хутчэй за ўсё, вы знойдзеце пад ім Bootstrap. Мы ўсе настолькі прызвычаіліся да такіх паняццяў, як container-fluid, row, col-sm-6 і г.д., што цяжка ўявіць, што любы іншы стыль распрацоўкі інтэрфейсу наогул магчымы. І таму, калі нам трэба стварыць наступны праект, мы несвядома цягнемся да Bootstrap. Аднак папулярнасць не робіць Bootstrap прыдатным для ўсіх праектаў і патрэб.

Фактычна, для сапраўды эканомных інтэрфейсаў загружаюцца ўсе Bootstrap CSS і JS можа выклікаць сур’ёзнае ўздуцце.

Гэты артыкул мае дзве мэты:

  • Забяспечце жывыя альтэрнатывы Bootstrap, не падобныя на Bootstrap
  • Растлумачце, чаму вы можаце разгледзець гэтыя альтэрнатывы замест Bootstrap
  • Я думаю, што частка тлумачэння вельмі важная, таму што ў большасці выпадкаў людзі нават не разумеюць, што ў іх ёсць праблемы або што яны ўскладняюць сваю працу, выбіраючы Bootstrap. Нарэшце, звярніце ўвагу, што гэта ні ў якім разе не паведамленне супраць Bootstrap. Я люблю Bootstrap 4 і выкарыстоўваю яго, калі магу. Але, у такім выпадку, я індывідуальны распрацоўшчык, які павінен думаць аб выкарыстанні найбольш папулярнага рашэння; акрамя таго, я сам па сабе не з’яўляюся распрацоўшчыкам карыстальніцкага інтэрфейсу, таму не турбуюся аб занадта многіх рэчах, калі ствараю інтэрфейсы.

    І з гэтым давайце паглядзім, якія ў нас ёсць альтэрнатывы.

    Сетка Flexbox

    Падумайце аб гэтым на хвіліну: самая галоўная прычына, па якой вы пачалі выкарыстоўваць Bootstrap і ўсё яшчэ выкарыстоўваеце яго, гэта яго сеткавая сістэма. Вядома, спатрэбілася некаторы час прызвычаіцца да класаў радкоў, слупкоў-md-6 і г. д., але цяпер думаць пра макет з пункту гледжання радкоў, слупкоў, зрушэнняў і г. д. стала другой натурай.

    І калі вы будзеце сумленныя з самім сабой, вы ўбачыце, што ўсё астатняе ў Bootstrap – гэта крыху цяжкая праца. Ёсць маса заняткаў, якія трэба запомніць, незалежна ад таго, працуеце вы з формамі, навігацыяй, кнопкамі, табліцамі ці чымсьці іншым. Калі вы падобныя на мяне, вы ўсё яшчэ не прызвычаіліся да ўсіх класаў і таго, што яны робяць, і часта выкарыстоўваеце Bootstrap толькі для сеткі, а ўсе астатнія CSS пішаце самі.

    Калі так, вы маглі б зрабіць нашмат лепш з Сетка Flexbox.

    Flexbox Grid, як вынікае з назвы, – гэта сеткавая сістэма, заснаваная на CSS Flexbox ўласцівасці. Аднак, у адрозненне ад тэхнікі CSS, уся складанасць прыгожа абстрагуецца, так што вы засяроджваецеся толькі на размяшчэнні элементаў так, як хочаце. Лепшая частка заключаецца ў тым, што ўвесь код і назвы класаў імітуюць тое, што вы хацелі б у Bootstrap 4, што азначае, што пераключэнне паміж гэтымі двума інструментамі не патрабуе разумовага трэння. Напрыклад, вось як выглядае код «прасторы вакол» у сетцы Flexbox:

    <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 усюды, дзе мне трэба.

    Праверце гэта:  Як пераўсталяваць Microsoft Visual C++ Redistributable

    вучыцца Flexbox тут, онлайн.

    Чысты CSS

    Ці не было б добра, калі б Bootstrap быў падзелены на модулі і вы маглі б імпартаваць толькі той модуль, які вам патрэбны?

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

    Так, вы правільна прачыталі.

    Усе модулі ў камплекце і сціснутыя ў gzip складаюць 3,7 КБ, хаця паасобку яны складаюць больш. Модуль сеткі складае ўсяго 0,8 КБ, а базавы модуль – 1,0 КБ. Каманда, якая стаіць за PureCSS, кажа, што ён быў створаны выключна з улікам мабільных прылад, і таму кожны радок CSS перад уключэннем старанна правяраўся на прадмет эфектыўнасці.

    Такім чынам, скажам, вам патрэбны толькі модуль сеткі і формаў. Ну, проста спампуйце гэтыя два (разам з модулем Base), і ўсё будзе зроблена менш чым за 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.

    Праверце гэта:  Як праверыць, калі і дзе апошні раз выкарыстоўваўся ваш уліковы запіс Netflix

    Увогуле, PureCSS – гэта вызваляючы і дзіўны інструмент CSS (фреймворк?), які вы можаце выбіраць па меры неабходнасці. Тым не менш, ён пастаўляецца з дастатковай колькасцю бай-інаў і крывой навучання, бо вам трэба навучыцца новаму (крыху іншаму) спосабу рабіць рэчы.

    PureCSS таксама мае ўласныя класы і стыль па змаўчанні, так што ў гэтым ён не занадта адрозніваецца ад Bootstrap.

    Зіміт

    The Зіміт 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 – гэта нашмат большы памер загрузкі, і выніковы дызайн, ну, ліпкі.

    Праверце гэта:  Як кіраваць уліковым запісам Hulu

    HTML KickStart

    У большасці праектаў, якія вы ствараеце, хуткасць мае вырашальнае значэнне. Самай вялікай перашкодай для паскарэння вэб-распрацоўкі з’яўляецца франтальная частка, а самай вялікай «затрымкай» у франтальнай распрацоўцы з’яўляецца неабходнасць кодаваць элегантныя на выгляд інтэрактыўныя кампаненты. Паколькі ёсць шмат спосабаў, якімі можа паводзіць сябе кампанент, і ёсць шмат памераў экрана, якімі трэба кіраваць, кадаванне і кіраванне кампанентамі можа стаць кашмарам для распрацоўшчыка.

    HTML KickStart прапануе альтэрнатыву.

    Прасцей кажучы; гэта калекцыя сапраўды гладкіх кампанентаў, якія вы можаце проста ўключыць у свае праекты і значна скараціць час распрацоўкі. Вось некаторыя добрыя кампаненты, якія я знайшоў:

    Падаць

    Гузікі

    Укладкі (па цэнтры і са значкамі)

    Матэрыялізавацца

    Калі вам падабаецца Bootstrap за тое, што ён мае гатовае рашэнне для ўсіх распаўсюджаных праблем вэб-дызайну, але вы прыхільнік стылю матэрыяльнага дызайну, вам варта паспрабаваць Матэрыялізавацца.

    Materialize больш за ўсё нагадвае Bootstrap — 12-кропкавая сетка, зрухі і знаёмыя кампаненты, такія як формы, карткі і г.д. Аднак у яго ёсць некаторыя перавагі, якія могуць спадабацца многім.

    Штурхай-цягні

    Функцыя push/pull матэрыялізацыі 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 абмяжоўвае вас і вашы патрэбы асаблівыя, вам дапаможа адзін з пералічаных тут варыянтаў. 🙂