Кое е подходящо за мен? Обяснени 22 отзивчиви CSS рамки и котли
CSS рамките съществуват от години, но идването на отзивчиви дизайнерски практики направи много от нашите стари любими безполезни. За щастие, много наистина талантливи разработчици влязоха, за да запълнят празнината със следващото поколение CSS рамки и котли.
Вече един тон от тези неща плава наоколо. Всеки има списък, но никой наистина не ви превежда как всяка рамка и котел се различава от следващата, за да можете да вземете информирано решение. Това е нашата цел днес. Следвайте, докато разгледаме това, което прави всяка от тези 22 отзивчиви CSS рамки и котлони уникални.
Gumby
Рамката Gumby приема решетката 960, на която всички сме си изрязали зъбите преди години и я привежда в модерната ера на уеб дизайна с отзивчиво докосване. Той също има предварително изградени стилове за неща като форми, бутони, превключватели, падащи менюта, раздели и други.
Системата на семантичната мрежа
Ако мразите мрежовите системи и техните раздути несемантични маркировки, това е за вас. Semantic Grid System използва силата на CSS препроцесори (LESS, Sass и Stylus), за да създава персонализируеми променливи за неща като улуци и ширина на колоните. Всичко, което трябва да направите, е да използвате няколко предварително изградени комбинации във вашия CSS, не се изисква допълнителна маркировка!
Gridless
Gridless е мощен котел, който използва мобилен първи отзивчив уеб дизайн, за да се адаптира към ширината на устройството. Освен това е снабден с чудесни функции като нормализиране на CSS, корекции на грешки в IE и стилове на типография.
Без рамки
Frameless е трудно да се класифицира, тъй като технически е по-препоръчителен начин за подход към отзивчив дизайн, отколкото действителен набор от файлове, които можете да изтеглите. Има три стъпки: Първо направете обикновена решетка с фиксирана ширина, след това я накарайте да се повтаря безкрайно и завършете, като я центрирате в екрана.
Сайтът конкретно заявява, че Frameless не е рамка и че няма файлове да се изтеглят, но въпреки това твърдение, всъщност има някои основни шаблони, които да ви помогнат да започнете.
Пропорционални мрежи
Пропорционалните мрежи се справят с някои големи проблеми, които възникват при опит за отзивчиво оформление на CSS, а именно влагане на решетки и борба със стойности, базирани на процент, в изключително различни гледни точки.
Пропорционалните Grids използват оразмеряване на CSS за създаване на решение, което позволява фиксирани улуци (ems / rems), смесени с колони с течност. Разстоянието между колоните ще остане равно във всяка точка на прекъсване, спрямо основния размер на шрифта. Колоните се дефинират по пропорция, например една половина, една трета, две трети и могат лесно да се използват повторно, колкото искате, дори когато са вложени.
Подходът на Златоделците
Подходът на Goldilocks е насочен към намаляване на тенденцията на отзивчивите дизайни да се облегнат на подкрепа на конкретни устройства. Вместо това се стреми към универсален дизайн, който не зависи от всяко устройство.
Подходът Goldilocks използва комбинация от ems, max-width, медийни заявки и преводи на модели, за да разгледа три състояния, които позволяват на вашите дизайни да бъдат независими от разделителна способност.
Twitter Bootstrap
Twitter Bootstrap няма нужда от въведение. Това е една от най-големите, най-лошите CSS котлони в мрежата и е отправна точка за безброй професионални и лични сайтове от разработчици от цял свят.
Twitter Bootstrap включва отзивчива система от мрежи в допълнение към тонове звездни предварително оформени елементи като форми, бутони, навигационни менюта и други. Вижте пълното ни въведение тук.
Фондация от ZURB
Фондацията е най-значимият конкурент на Twitter Bootstrap, тъй като двата проекта са много сходни. Подобно на Bootstrap, Foundation ви дава отзивчива мрежа, както и различни стилизирани UI елементи.
Фондация 3 току-що стартира наскоро, така че ако не сте разгледали проекта от известно време, е време да се спрете и да го проверите. Това дава ръцете на една от най-полезните и задълбочени рамки, които ще намерите навсякъде.
скелет
Скелетът беше един от най-ранните отзивчиви котелни плочи, за да се появи и все още е един от най-добрите. В концепция, това е малко като Foundation, само че се чувства по-лек (типът, бутоните и формулярите са единствените включени UI елементи).
Вижте нашия урок за скелета, за да видите колко невероятно лесен е този инструмент, за да получите отзивчив дизайн и да се изпълни за минути.
Amazium
Amazium много прилича на Gumby по-горе с това, че е отзивчива решетка, изградена на базата на 960 решетъчните техники от стари. Напоследък, въпреки че рамката е актуализирана, за да се простира изцяло до 1200px, така че можете да се възползвате от големи дисплеи. Той дори включва поддръжка за дисплеи на ретината!
Golden Grid система
Системата Golden Grid нарича себе си „сгъваема решетка“, което наистина е просто фантастичен начин да се каже, че медийните заявки се използват за свиване на оригиналното шестнадесет колонна подредба в осем и след това четири колони, тъй като прозорецът се стеснява.
Подобно на някои от другите решетки, които видяхме досега, Golden Grid System използва улуци на базата на ems, така че улуците винаги остават пропорционални на съдържанието.
CSS Grid система 1140px
Тази е доста стандартна решетъчна система, без нищо фантазия. Започва с течностна решетка с 12 колони, която използва улуци на базата на проценти и работи чудесно на 1280 и 1140px монитори. Тъй като прозорецът намалява, за презареждане на съдържанието се използват няколко прости медийни заявки.
StackLayout
StackLayout е за бунтовниците, той ще бъде много по-различен от другите рамки, които сте опитвали. Всъщност той възникна поради неприязън към типичните CSS рамки за оформление.
Основният принцип на работа тук е, че StackLayout използва вграден блок като основен камък на уникална система за оформление. Системата е малко причудлива, но въпреки това е доста впечатляваща. Вижте ръководство тук.
SimpleGrid
SimpleGrid е друга уникална система за оформление, от която ще се радвате, ако обичате да си играете с тези неща, колкото и аз. Решетката тук се основава на четири различни диапазона на екрана: екрани по-малки от 720px, екрани по-големи от 720px, екрани по-големи от 985px и екрани по-големи от 1235px.
За да внедрите системата, използвате класове „слот“ от оформление на четири и шест колони. Звучи сложно, но всъщност е вярно на името си и е доста лесно за изпълнение.
Течна основна решетка
Fluid Baseline Grid е изграден с подчертан акцент върху силната типография, която се придържа към основната мрежа. Той също така съдържа тригълна сгъваема решетка, която е предназначена да бъде полезна отправна точка, а не стандарт, който да се следва.
Columnal
Columnal е нещо като хибридна решетка, която заимства най-добрите елементи от различни други рамки. Той има еластичната ДНК на 1140px CSS Grid System с някои 960.gs. Това е доста стандартни неща, но ако другите не изглеждат добре, може да опитате.
Inuit.css
Inuit.css е чудесна рамка, която всъщност е изградена с предвид. Използвайте персонализирания конструктор на мрежи, за да създадете своя собствена отзивчива мрежа, след това изтеглете някои иглута (плъгини), за да разширите рамката по полезни начини.
320 и нагоре
320 и нагоре е като колекция от думи за уеб дизайн (по добър начин). Тя съдържа адаптивна система за оформление, която използва манталитета на "мобилния първи", заедно с визуални стилове Bootstrap, икони на шрифта Awesome, Modernizr, Selectivizr, LESS и Sass. Това е впечатляващ малък набор от инструменти, който мисля, че ще ви хареса.
Susy: отзивчиви решетки за компас
Този е за супер нервите като мен, които обичат системите за оформление, както и Sass и Compass. Изградете своите оформления за минути с магията на миксините и променливите.
Като се има предвид, че Compass наскоро отпадна изцяло от местната поддръжка за мрежи, Сузи трябва да е полезна за тези, които ги пропускат.
Initializr - отзивчив HTML5 шаблон
Initializr е инструмент, който ви помага да стартирате вашите HTML5 проекти бързо и лесно, използвайки HTML5 Boilerplate, Bootstrap или нов отзивчив котел.
Изборът на отзивчив шаблон е само началото, оттам вие персонализирате изтеглянето си, като избирате от всички ресурси, които обикновено може да искате, като Modernizr и LESS.
Още един мобилен котел
YAMB е чудесна отправна точка за вашите отзивчиви уеб проекти, изградени върху няколко основни функции: отзивчива флуидна мрежа, падащи навигационни менюта, които автоматично се превръщат в избрани полета на малки екрани и отзивчиви изображения / слайдшоу.
Мисля, че уебсайтът е доста грозен, но самият набор от инструменти е доста удобен!
Wirefy
Wirefy е създаден специално с бързи отзивчиви експерименти с телесни рамки. Той използва модифицирана версия на шестнадесет колона 960 решетка, заедно с някои UI елементи, подобни на Bootstrap (менюта, форми, слайдшоу, бутони, изображения и т.н.).
Кой е любимият ти?
Неизбежно тези типове публикации ще привлекат коментиращите, които изпитват необходимост да се опитат да дискредитират цялата представа за използване на какъвто и да е шаблон или решетъчна система за уеб дизайн. Те просто не са за всички и аз уважавам вашето мнение, ако не можете да ги издържате.
Ако обаче сте в мрежови системи, бих искал да чуя отзивите ви за горните опции. Кои от тях сте пробвали и какво мислите за тях? Кой е любимият ти?
