Je potrebn├ę zv├í┼żi┼ą 20 citliv├Żch a ─żahk├Żch r├ímcov CSS

Pou┼żit├şm responz├şvnej kvalitnej ┼ítrukt├║ry CSS sa m├┤┼żete dosta┼ą k dobr├ęmu ┼ítartu v akomko─żvek projekte webdizajnu. Niektor├ę, napr├şklad Bootstrap, s├║ trochu naf├║knut├ę s nadmern├Żm k├│dom, zatia─ż ─Źo in├ę vy┼żaduj├║ pomerne strm├║ krivku u─Źenia.

V ide├ílnom pr├şpade by ste chceli pracova┼ą s bal├şkom, ktor├Ż v├ím poskytne dostatok funkci├ş, ktor├ę v├ím pom├┤┼żu za─Źa┼ą s prev├ídzkou, a z├írove┼ł v├ís neza┼ąa┼żuj├║ mno┼żstvom mo┼żnost├ş, ktor├ę nepotrebujete.

Tie┼ż by sa v├ím mohli p├í─Źi┼ą tieto webov├ę kon┼ítrukcie materi├ílov├ęho dizajnu alebo tieto v├Żvojov├ę r├ímce s otvoren├Żm zdrojom WordPress.

S t├Żmto cie─żom je tu 20 r├ímcov CSS, ktor├ę poskytuj├║ z├íklady, bez toho, aby sa hromadili.

FICTOAN

Cie─żom FICTOAN je by┼ą skvelou vo─żbou pre t├Żch, ktor├ş nie s├║ fan├║┼íikmi v├Ą─Ź┼í├şch a komplexnej┼í├şch sn├şmok. Vyzna─Źuje sa ┼żivou farebnou sch├ęmou, vlastn├Żmi ikonami a mnoh├Żmi ─żahk├Żmi ┼ítylizovan├Żmi dizajnov├Żmi prvkami.

lav├şna

lavina je r├ím, ktor├Ż si m├┤┼żete prisp├┤sobi┼ą pod─ża svojich potrieb. Bal├şky s├║ k dispoz├şcii na povolenie konkr├ętnych funkci├ş, ako je syst├ęm mrie┼żky tekut├şn, triedy ofsetov, kontajnery, vertik├ílne rozstupy a ─Ćal┼íie.

lav├şna

Beauter

Pri menej ako 5 000 tablet├ích sa spolo─Źnos┼ą Beauter ur─Źite chopila v├Żzvy, ┼że je ve─żmi ─żahk├í. To v┼íak neznamen├í, ┼że neexistuj├║ ┼żiadne funkcie. Z├şskate z├íklady ako responz├şvnu mrie┼żku, ale aj niektor├ę doplnky, ako napr├şklad offset paralaxy, sp├┤soby spr├ívania, popisy a niektor├ę pekn├ę kontajnery.

Beauter

Vanilkov├Ż r├ím

Aplik├ícia Vanilla Framework je navrhnut├í jednoducho, aby v├ím poskytla vynikaj├║ci v├Żchodiskov├Ż bod pre v├í┼í projekt. Existuje ve─ża zahrnut├Żch kontajnerov a kon┼ítruk─Źn├Żch prvkov, ktor├ę vyzeraj├║ skvele, ale tie┼ż ich mo┼żno ─żahko prisp├┤sobi┼ą, aby vyhovovali po┼żadovan├ęmu vzh─żadu.

Vanilkov├Ż r├ím

Bulma

Bulma je zalo┼żen├Ż na CSS Flexbox a je plne responz├şvnym modul├írnym r├ímcom, ktor├Ż umo┼ż┼łuje pou┼ż├şva┼ą iba to, ─Źo potrebujete. Z├şskate v┼íetky v├Żhody Flexboxu vr├ítane st─║pcov a dla┼żd├şc, ktor├Żch ve─żkos┼ą sa automaticky zmen├ş pod─ża po─Źtu a v├Żrezu.

Bulma

miligram

Milligram v├í┼żi takmer rovnako ako jeho menovec, iba pri stla─Źen├ş 2 k. Zah┼Ľ┼ła v┼íetky z├íkladn├ę predpoklady a je navrhnut├Ż tak, aby minimalizoval po─Źet ┼ít├Żlov, ktor├ę mus├şte resetova┼ą.

miligram

InvisCss

InvisCss bol postaven├Ż ako alternat├şva k komplikovanej┼í├şm r├ímcom. Bal├ş─Źek obsahuje jednoduch├ę n├ízvy selektora CSS a minim├ílne, ale atrakt├şvne u┼ż├şvate─żsk├ę rozhranie.

InvisCss

Pozrite sa

V├Żsledok osobn├ęho projektu, Look bol spr├şstupnen├Ż pre verejnos┼ą ako minimalistick├Ż r├ímec CSS, ktor├Ż sl├║┼żi ako z├íkladn├Ż v├Żchodiskov├Ż bod pre v├Żvoj str├ínok. Dizajnov├ę prvky s├║ jednoduch├ę a daj├║ sa prisp├┤sobi┼ą pod─ża va┼íich predst├ív.

Pozrite sa

unlimitedGrid

UnlimitedGrid je zalo┼żen├Ż na syst├ęme Sass a je flexibiln├Żm a mobiln├Żm sie┼ąov├Żm r├ímcom ako prv├Żm. Je modul├írny, tak┼że mus├şte pou┼ż├şva┼ą iba funkcie, ktor├ę potrebujete. S├║─Źas┼ąou je stojan Flexbox a na v├Żber je nieko─żko variantov mrie┼żky.

unlimitedGrid

Vitálny

Vzh─żadom na ÔÇ×sp├Ątn├Ż pr├şstupÔÇť pre v├Ą─Ź┼íie sn├şmky je Vital ─żahk├Ż a ┼ík├ílovate─żn├Ż. V─Ćaka funkcii Sass n├íjdete efekt├şvne rozlo┼żenie mrie┼żky, vlastn├ę tla─Źidl├í a nab├şja─Źky. Zahrnut├ę je aj nieko─żko u┼żito─Źn├Żch ┼ít├Żlov dizajnu, ako s├║ fotografick├ę kol├í┼że, n├ídoby na karty a formul├íre.

Vitálny

PowerToCSS

Na z├íklade princ├şpov SMACSS a DRY je PowerToCSS ─żahk├Ż r├ímec CSS, ktor├Ż poskytuje sol├şdny z├íklad na r├Żchle za─Źatie ─Ćal┼íieho webov├ęho projektu.

PowerToCSS

Kouto Swiss

Kouto Swiss je kompletn├Ż CSS framework pre Stylus, ktor├Ż v├ím pon├║ka ve─ża kombin├íci├ş, funkci├ş a util├şt na r├Żchlej┼íie k├│dovanie, a tie┼ż zah┼Ľ┼ła silu webovej str├ínky Caniuse, aby va┼íe ┼ít├Żly vyhovovali va┼íim potreb├ím kompatibility.

Kouto Swiss

Sneaky CSS

Furtive je prv├Ż mobiln├Ż syst├ęm s ve─żmi mal├Żmi rozmermi. Tento r├ímec sa net├Żka predch├ídzaj├║cich verzi├ş prehliada─Źa, ─Źo znamen├í, ┼że m├┤┼żete pou┼ż├şva┼ą ÔÇ×┼ípi─Źkov├║ technol├│giuÔÇť, ako s├║ flexbox, SVG a predpony od obmedzen├Żch poskytovate─żov. Je tie┼ż k dispoz├şcii v SCSS, CSS a prich├ídza so s├║borom Gulp na prisp├┤sobenie zostavenia.

Sneaky CSS

Webová doska

R├ímec Webplate obsahuje v┼íetko od robustn├ęho responz├şvneho rozlo┼żenia, cez glob├ílne tla─Źidlov├ę prvky, prisp├┤sobite─żn├ę formul├íre a podporu pre p├şsma ikon IcoMoon. V predvolenom nastaven├ş je tie┼ż dod├ívan├í s jQuery, Modernizr a Typeplate.

Webplate web ─Żahk├Ż front-end framework robustn├Ż responz├şvny n├ístroj na n├ívrh motora css html

plynulos┼ą

Plynulos┼ą je pravdepodobne naj─żah┼íou r├Żchlou odozvou syst├ęmu CSS v┼íetk├Żch ─Źias! HTML odpovie takmer 100% z get-go a 115-byte CSS s├║bor oprav├ş ‘takmer’ ─Źas┼ą. To nem├┤┼że by┼ą ─żah┼íie.

/* FLUIDITY v0.1.0 @mrmrs - http://mrmrs.cc MIT
*/
/*
 Responsive Utilities

*/
img, canvas, iframe, video, svg { max-width: 100%; }

/* Wrap tables or pre elements in a div with this class */
.overflow-container { overflow-y: scroll; }

syst├ęm

Sch├ęma je postaven├í na LESS a je responz├şvnym rozhran├şm pou┼ż├şvate─żsk├ęho rozhrania frontend, ktor├ę sa dod├íva s kompletnou kolekciou komponentov CSS (tla─Źidl├í, rozba─żovacie ponuky, formul├íre …), ktor├ę v├ím pom├┤┼żu r├Żchlo za─Źa┼ą.

Sch├ęma pou┼ż├şvate─żsk├ęho rozhrania s menej citliv├Żm pou┼ż├şvate─żsk├Żm rozhran├şm

smaragd

Emerald je pragmatick├Ż responz├şvny gridov├Ż syst├ęm v LESS. Je zalo┼żen├Ż na blokov├Żch prvkoch (na rozdiel od plav├íkov) a je p├şsan├Ż s metodol├│giou OOCSS pomocou syntaxe BEM.

Emerald pragmatick├Ż responz├şvny sie┼ąov├Ż syst├ęm LESS

Bijou

Bijou je 10-st─║pcov├Ż mrie┼żkov├Ż r├ím s citlivos┼ąou na svetlo (

Bijou ─żahk├Ż css responz├şvny 10-st─║pcov├Ż mrie┼żkov├Ż r├ím

Iskra

Spark je ─żahk├Ż syst├ęm zalo┼żen├Ż na prvom mobilnom pr├şstupe k responz├şvnemu dizajnu. R├ím je dod├ívan├Ż so zabudovan├Żmi r├┤znymi farebn├Żmi mot├şvmi, ktor├ę s├║ vz├íjomne zamenite─żn├ę, a to v lesklom aj plochom ┼ít├Żle. V s├║─Źasnosti s├║ z├íkladn├ę farby strieborn├ę (predvolen├ę), modr├ę, zelen├ę, oran┼żov├ę, ─Źerven├ę, fialov├ę, limetov├ę a dra─Ź├ş.

Spark ─żahk├Ż webov├Ż mobiln├Ż dizajn reaguj├║ci na prv├Ż sn├şmok

Typebase

typebase.css je prisp├┤sobite─żn├í minim├ílna ┼íabl├│na p├şsma CSS. Najd├┤le┼żitej┼íia vec, ktor├║ v├ím typebase.css pon├║ka, je n├║ten├Ż vertik├ílny rytmus na v├Ą─Ź┼íine obrazoviek zariaden├ş, ─Ź├şm sa zabezpe─Ź├ş, ┼że text v st─║pcoch a dlh├í k├│pia sa nestan├║ nerovnomern├Żmi. K dispoz├şcii s├║ verzie Less aj Sass.

prisp├┤sobite─żn├í minim├ílna typografick├í opakuj├║ca sa typografia CSS

hoisin

Postaven├Ż s programom Sass, Hoisin je jednoduch├Ż a pohotov├Ż mini predn├Ż r├ím, ktor├Ż bol vytvoren├Ż ako alternat├şva k zlo┼żitej┼í├şm a naf├║knut├Żm predn├Żm r├ímom. Mimochodom, neobsahuje ┼żiadne komponenty, ale zameriava sa na poskytnutie organizovanej z├íkladne, z ktorej si m├┤┼żete vytvori┼ą svoju vlastn├║ kni┼żnicu.

Sass Hoisin mini jednoduch├Ż vn├şmav├Ż predn├Ż r├ím

Roztomil├ę mrie┼żky

Cute Grids je responz├şvny 12-st─║pcov├Ż mobiln├Ż prv├Ż mrie┼żkov├Ż syst├ęm, ktor├Ż sa zrodil z frustr├ície dne┼ín├Żch ve─żk├Żch sn├şmok, ktor├ę m├┤┼żu by┼ą pre v├Ą─Ź┼íinu projektov zbyto─Źn├ę a obmedzuj├║ kreativitu dizajn├ęrov.

Sie┼ąov├Ż syst├ęm responz├şvnej siete Cute Grids s mobiln├Żmi prv├Żmi 12 st─║pcami

─Żahk├ę, ale v├Żkonn├ę

Cie─żom pou┼żitia r├ímu ak├ęhoko─żvek druhu je u─żah─Źi┼ą pr├ícu. Zd├í sa teda, ┼że ├şs┼ą a potrebova┼ą zmeni┼ą ┼ít├Żl mnoh├Żch CSS alebo na─Ź├şta┼ą ve─ża skriptov, ktor├ę ani nepou┼ż├şvate, je v rozpore so v┼íetkou logikou.

Pou┼żitie jedn├ęho z vy┼í┼íie uveden├Żch z├íkladn├Żch r├ímcov v├ím pom├┤┼że r├Żchlo za─Źa┼ą bez bolesti hlavy. A ke─Ć┼że niektor├ę z nich pou┼ż├şvaj├║ modul├írny pr├şstup, m├┤┼żete si vybra┼ą prvky, ktor├ę potrebujete pre konkr├ętny projekt. To je viac podobn├ę!