Топ 5 алтернативи на Bootstrap

Bootstrap е навсякъде, но това не винаги е правилният инструмент за работата. Ето няколко страхотни алтернативи!


Ако проверите изходния код на предния край на уебсайта на случаен принцип тези дни, има вероятност да намерите Bootstrap отдолу. Всички сме толкова свикнали с понятия като контейнер-флуид, ред, col-sm-6 и т.н., че е трудно да си представим, че всеки друг стил на разработване на предния край е дори възможен. И така, когато трябва да изградим следващия проект, несъзнателно посягаме към Bootstrap. Въпреки това популярността не прави Bootstrap подходящ за всички проекти и нужди.

Всъщност за наистина постни фронтове, зареждащи всички CSS за зареждане и JS може да причини голям подуване.

Тази статия има две цели:

  1. Осигурете алтернативи на Bootstrap, подобни на Bootstrap
  2. Обяснете защо може да искате да разгледате тези алтернативи над Bootstrap

Мисля, че частта за обяснение е наистина важна, тъй като в повечето случаи хората дори не осъзнават, че имат проблем или че затрудняват работата си, като взимат Bootstrap. И накрая, моля, имайте предвид, че това не е анти-Bootstrap публикация по никакъв начин. Обичам Bootstrap 4 и го използвам, когато мога. Но тогава аз съм индивидуален разработчик, който трябва да мисли да използва най-популярното решение; също така, аз не съм разработчик на потребителски интерфейс сам по себе си, така че не се притеснявам за твърде много неща, когато изграждам предните си части.

И с това нека да разгледаме какви алтернативи имаме.

Flexbox Grid

Помислете за малко: най-голямата причина, поради която сте започнали да използвате Bootstrap и все още го използвате, е неговата мрежова система. Разбира се, трябваше да свикнем с редовете, col-md-6 и др., Класове, но сега е второ естество да мислим за оформление по отношение на редове, колони, компенсации и т.н..

И ако сте честни със себе си, ще откриете, че всичко останало в Bootstrap е малко труд за работа. Има много класове, които да запомните, независимо дали правите формуляри, навигация, бутони, таблици или нещо друго. Ако сте като мен, все още не сте свикнали с всички класове и какво правят, а често използвате Bootstrap само за мрежата и сами пишете всички останали CSS.

Ако да, бихте могли да се справите много по-добре Flexbox Grid.

Flexbox Grid, както подсказва името, е мрежова система, базирана на CSS Flexbox Имоти. Въпреки това, за разлика от CSS техниката, цялата сложност е добре абстрахирана, така че да се съсредоточите само върху поставянето на елементи, както искате. Най-хубавото е, че всички имена на код и клас имитират това, което бихте искали в Bootstrap 4, което означава, че превключването между тези два инструмента изисква нулево ментално триене. Например, ето как изглежда кодът за „пространството наоколо“ в Flexbox Grid:

около

около

около

Минимизираният CSS файл за тази мрежова система е само 10,7 KB, което ви спестява няколкостотин KB в крайния размер за изтегляне. В наши дни Flexbox Grid е любимият ми, тъй като не искам да се боря с Bootstrap, за да го персонализираме напълно. Обичам да започвам с ваниловите елементи и да ги стилизирам сами, използвайки Flexbox Grid където трябва.

Уча Flexbox тук, онлайн.

PureCSS

Не би ли било хубаво, ако Bootstrap беше разделен на модули и бихте могли да импортирате само необходимия модул?

добре, PureCSS продължи напред и направи точно това – това е набор от модули, покриващи различни функционални области на уебсайт. Можете да изберете да изтеглите един или всички и въпреки това размерът на изтеглянето няма да надвиши 3,7 KB!

Да, прочетохте това право.

Всички модули, когато са свързани и gzipped са 3,7 KB, въпреки че поотделно те възлизат на повече. Модулът на решетката е само 0,8 KB, докато основният модул е ​​1,0 KB. Екипът, който стои зад PureCSS, казва, че той е изграден изцяло с мобилни устройства и затова всяка линия от CSS е внимателно проверена за ефективност, преди да бъде включена.

Нека да кажем, че се нуждаете само от модула за решетка и формуляри Е, просто изтеглете тези две (заедно с модула Base) и ще свършите с по-малко от 3,4 KB! Не е необходимо да включвате CSS от бутони, таблици и менюта, ако няма да ги използвате.

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

Lorem Ipsum

Dolor Sit Amet

Пробивна радова сила

Praesent consectetur

Ще забележите, че вече няма мрежа с 12 колони. PureCSS има своята мрежова система, която определя колко ширина трябва да заеме колоната. Така че, pure-u-lg-1-4 означава, че този елемент трябва да заеме 1/4 или 25% от наличната ширина на големите екрани. Предлагат се и ширини, кратни на 1/5.

Като цяло, PureCSS е освобождаващ и невероятен CSS инструмент (рамка?), От който можете да избирате и избирате според нуждите. Това каза, тя идва с доста голяма крива на вход и обучение, тъй като трябва да научите нов (малко по-различен) начин на правене на нещата.

PureCSS също има свои класове и стилове по подразбиране, така че по този начин той не е твърде различен от Bootstrap.

Zimit

Най- Zimit рамката е нещо странно в този списък. Да, тя е рамка за изграждане на потребителски интерфейси, но е насочена към конкретни типове потребителски интерфейси: макети.

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

Но реалният живот не е идеален и често сте единственият човек в работата и трябва да носите всички шапки и да свършите работата. По това време искате рамка, която:

  • Позволява ви да кодирате в HTML / CSS
  • Лек е
  • Има богата колекция от основни компоненти
  • Има приличен и последователен език за стил
  • Ако е възможно, прилича на “сивкавия” тон на дизайна на телените рамки
  • Учи се лесно
  • Има вграден CSS препроцесор

Zimit проверява всички тези полета. Размер е само 84 KB и има богат набор от компоненти за избор. Ето няколко примера, които намерих наистина привлекателни, тъй като кодирането им самостоятелно ще отнеме много време.

Изглед на дърво

Breadcrumb

Tabs

Има още много екстри, които да проучите. Провери ги тук.

Нека да разгледаме как изглежда кодът Ето как ще използвате мрежовата система в Zimit:

4 колони
4 колони

4 колони
4 колони

Тук “c” означава “колона”, така че “c4” означава колона, която обхваща четири единици (решетката е 12-размера, точно като Bootstrap). Много подобен на Bootstrap и според мен много интуитивен.

Като цяло, Zimit е цялостна и лесна рамка за разработване на прототипи на потребителски интерфейс, които са отзивчиви и изглеждат добре бързо. По-добре е от Bootstrap (когато става дума за прототипиране), защото Bootstrap е много по-голямо изтегляне и полученият дизайн е, добре, лепкав.

HTML KickStart

В повечето проекти, които изграждате, скоростта е критична. Най-голямото препятствие за бързината в уеб разработката е предната част, а най-голямото „забавяне” при разработването на предния край е необходимостта от кодиране на елегантно изглеждащи интерактивни компоненти. Тъй като има много начини, по които даден компонент може да се държи и има много размери на екрана за управление, кодиране и управление на компоненти, може да се превърне в кошмар за разработчика.

HTML KickStart предлага алтернатива.

Казано просто; това е колекция от наистина елегантни компоненти, които можете просто да включите в проектите си и да намалите драстично времето за разработка. Ето някои хубави компоненти, които намерих:

Падащо

Бутони

Раздели (в центъра и с икони)

материализирам

Ако ви харесва Bootstrap поради факта, че има готово решение за всички често срещани проблеми с уеб дизайна, но сте почитател на стила Material design, трябва да изпробвате материализирам.

Материализирането е най-вече като Bootstrap – 12-точкова решетка, компенсиране и познати компоненти като формуляри, карти и т.н. Въпреки това, тя има някои предимства, които могат да се харесат на много.

Натисни Дръпни

Функцията push / pull на Materialize CSS ви позволява да пренареждате колони. Това напомня на новия стандарт за CSS Grid, където оформлението е различно от подредбата на елементите.

Този div е широк 7 колони при натиснат надясно от 5 колони.
5-колони широки издърпани отляво от 7 колони.

Това води до следното:

Ще забележите, че колоните са сменили места, което е нещо може би непостижимо в традиционния CSS, базиран на Bootstrap.

Добродетели с JavaScript

Има доста функции и ефекти на JavaScript, които се доставят с Materialize. Подсказки, тостове (подобни на Android ефемерни известия), Parallex, Pushpin и др., Са някои от тях. Един наистина невероятен ефект, който ми хареса, е FeatureDiscovery, който в основата ви позволява да подчертаете елемент на страницата при някакво събитие (да речем, натискане на бутони), за да привлечете вниманието на потребителя към този елемент. Трудно е да го опиша с думи напълно, така че преминете към https://materializecss.com/feature-discovery.html, за да видите какво имам предвид.

Като цяло, Materialize е чудесна алтернатива на Bootstrap или за тези, които искат да приемат пълнофункционална материална CSS рамка.

заключение

Bootstrap е синоним на отзивчив дизайн. Именно Bootstrap популяризира термина „мобилен първи дизайн“ и показа как може да се направи. Но докато Bootstrap върши работата през повечето време, просто изпълнението на работата не винаги е достатъчно. Ако чувствате, че Bootstrap ви ограничава и че вашите нужди са специални, една от изброените тук опции ще ви помогне. ��

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