10 най-добри CSS рамки за Front-End разработчици

Веднъж чух шега на разработчиците от предния край: „НАСА е кацнало роботи на Марс и тук все още се борим да изравним нашите центрове!“ И ме кара да се чувствам зле, че тази шега има много истина в нея. Правенето на нещо, което звучи толкова лесно и управлявано от здравия разум, като центрирането на кутия в кутия, е изключително трудно да се работи в CSS. Освен ако не сте го срещали преди. И запази фрагмента на кода някъде. И дори ако успеете да го издърпате, винаги има дебнещ страх, че може да се счупи ужасно на някой глупав браузър някъде! CSS обвързва първото място на „необходимите уеб злини“ заедно с JavaScript. Това е стандарт, който се е развил случайно, е интерпретиран по различен начин от различни производители на браузъри и сега е толкова пълен с противоречия, че никой не смее да се нарече „експерт по CSS“.


Не е чудно, че с времето CSS рамките се появиха и отнеха по-голямата част от болката. Днес не можем да си представим кодирането без любимата ни CSS рамка, тъй като насочването към множество размери на екрана се превърна в необходимост.

Но откъде знаете, че вашата рамка е най-добрата за работата в момента? Освен това, ако сте нови в разработката на предния край, коя рамка трябва да ви помогне да изберете?

Тази публикация хвърля поглед върху пейзажа на предния край и сравнява предните бегачи между CSS рамки. Така че, ако ви е писнало от ръчно кодиране на CSS правила, потопете се за кратко облекчение!

за първоначално зареждане

Инициатива от Twitter, за първоначално зареждане взема кредит за въвеждането на отзивчив дизайн в голям мащаб. Това беше първата рамка за популяризиране на философията на „мобилен-първи“. Вече не е проектирал за по-малки размери на екрана самостоятелен проект; всичко, което трябваше да направите, е да включите съответните класове Bootstrap и дизайнът автоматично ще се коригира за различни размери на екрана (добре, почти).

Чувствителен дизайн в Bootstrap (4.0 срещу 3.0)

Bootstrap постигна отзивчив дизайн, като въведе идеята за решетка. Една решетка е невидим дял на екрана в колони (заедно с ширината). Например, ако имате три „кутии“, които искате да позиционирате рамо до рамо на големи екрани, но вертикално на по-малки екрани, това ще направите:

Една от три колони

Една от три колони

Една от три колони

В момента популярната версия на Bootstrap е 4, което беше основен ремонт над серията 3.3. Горният синтаксис е как да кодирате в Bootstrap 4, който дължи много на своята елегантност на суровата сила на Flexbox и други модерни функции за оформление, поддържани директно от браузърите. В по-ниските версии на Bootstrap решетката беше определена като общо 12 колони, което доведе до код като

за да направите div да заеме една трета от ширината на екрана на устройства с голям размер и половината от ширината в устройства със среден размер. Синтаксисът сега е много по-приятен, въпреки че изисква запознаване с Flexbox.

Плюсове на Bootstrap

Има много неща за харесване на Bootstrap, особено за разработчиците на пълен стек:

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

Bootstrap минуси

Нищо не е без цена, а? Е, Bootstrap не е изключение. С течение на времето Bootstrap попадна под силен огън от дизайнери и експерти от потребителския интерфейс. Ето защо:

  • UX монотонност: Самият факт, че Bootstrap има толкова голяма колекция от вградени резултати, води до уебсайтове, които изглеждат твърде познати и съвсем честно казано скучни. Трябва само да се насочите към официални примери за да видите колко голяма част от очите са по подразбиране. Просто потърсете „всички уебсайтове за зареждане изглеждат еднакво“ и ще разберете какво имам предвид. ��
  • Стилистични неволи: Bootstrap е това, което може да се счита за убедена рамка. С други думи, той има идеи за оформления и ви кара да работите допълнително, ако искате той да изглежда / да се държи по различен начин. Помислете за стандартните CSS точки на прекъсване за ширината на екрана: средният размер на екрана за Bootstrap е този, който започва с ширина на устройството от 768px. А какво ще стане, ако искате да се насочите, да речем, лимита от 600px? Е, късмет с това! Същото е с почти всеки друг компонент в началната лента: редовете и контейнерите имат подреждането по подразбиране, бутоните имат цветове и рамки, които са много трудни за отмяна без много работа и т.н..

Искам да овладейте Bootstrap? Вижте това онлайн курс от Брад Травърси.

фундамент

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

Ръководител на фондацията уебсайт, и няма как да не забележите байла: „Най-модерната отзивчива фронтална рамка в света.“ На пръв поглед изглежда като висока претенция да тръгнем с маркетингова кампания.

Привържениците на рамката на Фондацията обаче знаят, че има поне някаква истина за това. Фондацията е разработена така, че да върви по естествен начин с рамката на релсите и някои от ръководните принципи на релсите могат да се видят на работа..

Например, ако искате ред, който съдържа два елемента на малки екрани, три на средни и четири на големи, еквивалентният код във Foundation ще изглежда така:

В сравнение с по-ранните версии на Bootstrap, намирам това за много интуитивно и лесно за запомняне. Няма повече от дванадесет решетъчни решетки и да разберем какъв трябва да бъде 4/12!

Въпреки че Foundation е много по-малко популярен от Bootstrap, това е търговска тайна за много експертни предни разработчици.

Плюсове на рамката на фондацията

Фондацията има някои необичайни характеристики от всички CSS рамки, които ще разгледаме в тази статия:

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

Минуси на рамката на фондацията

Силните страни на една рамка стават нейните слабости, когато се гледа от противоположната гледна точка. Ето защо Фондацията може да не е най-добрият избор за вашия проект:

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

Bulma

Bulma е сравнително нов участник в бойното поле на CSS рамките и си направи име за кратко време. Атрактивността му се крие в строгия подход, само за CSS (няма JavaScript компоненти) и елегантните настройки по подразбиране, което е нещо, с което много разработчици с добро око за дизайн имат проблем, когато работят с Bootstrap.

Голяма част от инерцията на Bulma идва от високите проценти на възприемане с общността Laravel (PHP уеб рамка, в случай че не знаехте) общността, което съм сигурен, че е почти това, което помогна на Vue.js да се издигне до висотата на популярността сред JavaScript рамки.

Защо да изберем Bulma CSS Framework

Има много причини да харесате Bulma и да го използвате за следващия си проект:

  • Доста популярен: Добре, той не е по-популярен от Bootstrap, но е по-популярен от Foundation. Докато пише, Bulma има 30k + звезди на Github, около 3k + повече от фондации. Разбира се, редица звезди на Github не са показател за достойнството, но всъщност се казва, че общността одобрява Булма.
  • Изключително четими класове: За мен Bulma има най-четените CSS класове от всички рамки, които съм опитвал. Има и нелепо мощна и проста система за създаване на решетки в стил метро, ​​наречени плочки (просто погледнете кода във втората половина на екрана и ми кажете, че не сте впечатлени!).

  • Плоска крива на обучение: Bulma е силно модулна и е създадена за решаване на практическите, ежедневни проблеми, пред които се срещат по-малки екипи и отделни разработчици. Ще откриете, че Bulma е много лесна за научаване, въпреки че мисля, че приличен фон в CSS винаги е добре да имате представа какво може да се случва под капака. Това ще ви помогне, когато искате да отмените поведението по подразбиране.
  • Елегантна: Е, вижте по-долу секцията по подразбиране Hero за Bulma. Достатъчно казано!

Bulma има малка, но изключително страстна общност, така че ако искате да премахнете целия пух и все пак искате да излезете с елегантно изглеждащи потребителски интерфейси за рекордно кратко време, Bulma е този път. За разработчиците на Bootstrap Bulma има отделен раздел, за да ги убеди и да им помогне да мигрират.

UIkit

Нещото, което идва на ум, когато мислим UIkit е минимализъм. Минимализъм не в характеристики (всъщност той предлага може би най-много характеристики на всички рамки), а в дизайна. Ако вашите неща са супер изчистени, елегантни, не-бели пространства, UIkit ви покри.

Например, разгледайте компонента на лентата за напредък:

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

Или дори скромната HTML форма:

Ако това не крещи елегантност в горната част на белите дробове, не знам какво прави. Просто преминете към уебсайта на UIkit и разгледайте всички невероятни компоненти, които предлага. Освен ако вашият ръководител на проекти или клиент не налага на вас определен език за стил, мисля, че Uikit е короната за дизайна на потребителския интерфейс и е на няколко мили напред от материалния дизайн на Google.

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

Също така, Uikit е самостоятелна система и няма да можете да я модифицирате или разширите, без да полагате значителни усилия.

Семантичен потребителски интерфейс

Друг претендент в състезанието е Семантичен потребителски интерфейс, който се опитва да се разграничи с много теми и персонализиране. Има повече от 3000 тематични променливи, което води до огромна широта. Или така казват документите.

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

Освен това той има една от най-стръмните криви на обучение, а конвенциите за кодиране са много по-строги. Опитай; Бих казал и вижте дали изглежда като нещо, което може би предпочитате.

Сузи

Сузи е малко известна рамка в този момент, но е увлекателна и освежаваща идея. Друга рамка с чисто оформление, Сузи премахва всички предварително зададени идеи за поплавък, мрежа, Flexbox, таблици или всичко друго и ви позволява да съставите вида на оформлението, което искате. „Създайте“ е ключовата дума тук, тъй като Сузи е предназначена за създаване на силно модулни, залитащи оформления с ултра сложни, необичайни и точни нужди.

В ръцете на експертния разработчик, Сузи е като огнемет, отколкото раздухва всичко останало. Разбира се, по-малките смъртни ще успеят да изгорят ръцете си.

За да получите представа за силата на Susy, пробвайте тази настройка по подразбиране (SASS):

// 4 симетрични, флуидни колони
// улуците са с 1/4 размер на колона
// елементи обхващат 1 по-малко улук от колоните
// контейнерите обхващат и 1 по-малко улук
$ susy: (
‘колони’: суси-повторение (4),
‘улуци’: 0,25,
‘разпространение’: ‘тясно’,
‘контейнер-разпространение’: ‘тесен’,
);

Мисля, че кодът е доста обяснителен, макар че не е за бързащите. �� Сузи има идеален смисъл, ако ви е омръзнало от цялото раздуване, което модерните рамки ви налагат и имате нужди от оформление, за които знаете, че никоя обикновена рамка не може да служи.

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

Ако сте влюбени в материалния дизайн на Google, Materialize е a рамка ще се насладите Най-хубавото е, че има само шепа компоненти и класове, които трябва да научите, и е фокусиран върху това да постигнете максимална производителност. Има няколко възможности за персонализиране и Materialize следва популярния формат на решетките с 12 колони, създаден от Bootstrap.

Ако ме питате обаче, a Материален дизайн става толкова често и е така. , , По подразбиране е плосък, че доста скоро ще се оплакваме от него, както и от всички уебсайтове на Bootstrap – изглеждат един и същ проблем. И все пак, това е хубава рамка, за да започнете.

чист

Мъртъв ли е Yahoo?

Не, този въпрос не е отклонение, но подчертава важно наблюдение: Yahoo изгради Чиста рамка и освободен под лиценза на BSD.

Бърз поглед ме впечатлява и се чудя защо това предлагане не е известно на повече хора. Както и да е, това, което прави Pure, добре, чисто, е, че това е чиста CSS рамка. �� Всъщност разработчиците са изминали допълнителната миля и са го разделили на различни CSS модули, които можете да импортирате при нужда. Така че, ако имате нужда само от мрежовата система, няма нужда да импортирате целия CSS и да добавите към времето за зареждане на сайта.

Pure решетката се предлага в няколко вкуса: 5-точкова, 2-точка, 24-точка и т.н., така че когато става дума за създаване на колони, имате много повече гъвкавост. Pure не е най-добре изглеждащата CSS рамка по подразбиране, но виждам как тя добавя стойност за онези, които искат да разрешат малък CSS проблем в потребителския си интерфейс и се насочват към „полезните“ по подразбиране, с които идват други рамки.

скелет

Както можете да видите на снимката на екрана, скелет е толкова минимален, че дори не нарича себе си CSS рамка, библиотека или дори модул. Това е котел и съдържа само 400 реда изходен код! Невероятен? Мисля, че е така, но за да гледам нещата в перспектива, Skeleton е създаден за малки или малки проекти, които се нуждаят от малко повече от оформления и позициониране.

Заслужава поглед; в крайна сметка, кой знае, скелетът може да е това, което търсите през цялото време!

милиграм

Последният в списъка е милиграм, CSS рамка, проектирана за скорост и производителност. Разработчиците са го поддържали под 2 KB в размер, което по днешните стандарти означава много.

Милиграм е малко забавно приемане на 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