Za zmienku stoj├ş aj ─żahk├í a ─żahk├í ┼ítrukt├║ra CSS

Pou┼żitie responz├şvnej kvalitnej ┼ítrukt├║ry CSS v├ím m├┤┼że pom├┤c┼ą za─Źa┼ą s ak├Żmko─żvek projektom webdizajnu. Niektor├ę, napr├şklad Bootstrap, s├║ trochu naf├║knut├ę s pr├şli┼í ve─żk├Ż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├Ż pon├║ka dostatok zdrojov, ktor├ę v├ím pom├┤┼żu za─Źa┼ą, bez toho, aby v├ís ohromili nespo─Źetn├Żmi mo┼żnos┼ąami, 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 ┼ítrukt├║r CSS, ktor├ę poskytuj├║ z├íklady, bez cel├ęho objemu.

FICTOAN

FICTOAN m├í v ├║mysle by┼ą skvelou vo─żbou pre t├Żch, ktor├ş nie s├║ fan├║┼íikmi v├Ą─Ź┼í├şch a komplexnej┼í├şch obr├ízkov. Vyzna─Źuje sa ┼żivou farebnou sch├ęmou, vlastn├Żmi ikonami a mno┼żstvom svetl├Żch dizajnov├Żch prvkov.

FICTOAN

lav├şna

lavina je r├ímec, ktor├Ż si m├┤┼żete prisp├┤sobi┼ą pod─ża svojich potrieb. K dispoz├şcii s├║ bal├ş─Źky na aktiv├íciu konkr├ętnych funkci├ş, ako s├║ napr├şklad syst├ęm s tekutinovou mrie┼żkou, triedy posunu, kontajnery, vertik├ílne rozstupy a ─Ćal┼íie.

lav├şna

Beauter

S menej ako 5 tis├şce tabliet, Beauter ur─Źite preber├í v├Żzvu, aby bola ve─żmi ─żahk├í. To v┼íak neznamen├í, ┼że neexistuj├║ ┼żiadne zdroje. Z├şskate z├íklady, ako napr├şklad responz├şvnu mrie┼żku, ale aj niektor├ę doplnky, ako napr├şklad posun paralaxy, sp├┤soby spr├ívania, popisy a niektor├ę pekn├ę kontajnery.

Beauter

Vanilkov├Ż r├ím

Program Vanilla Framework je svojim dizajnom jednoduch├Ż a poskytuje vynikaj├║ci v├Żchodiskov├Ż bod pre v├í┼í projekt. Existuje ve─ża kontajnerov a kon┼ítruk─Źn├Żch prvkov, ktor├ę vyzeraj├║ skvele, ale daj├║ sa tie┼ż ─żahko prisp├┤sobi┼ą tak, aby zodpovedali po┼żadovan├ęmu vzh─żadu.

Vanilkov├Ż r├ím

Bulma

Bulma je zalo┼żen├í na CSS Flexbox a je plne responz├şvnou modul├írnou ┼ítrukt├║rou, ktor├í v├ím umo┼ż┼łuje pou┼ż├şva┼ą iba to, ─Źo potrebujete. Z├şskate v┼íetky v├Żhody Flexboxu vr├ítane st─║pcov a blokov, 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. Obsahuje v┼íetky z├íklady, ktor├ę by ste o─Źak├ívali, a je navrhnut├Ż tak, aby minimalizoval po─Źet ┼ít├Żlov, ktor├ę budete musie┼ą predefinova┼ą.

miligram

InvisCss

InvisCss bol postaven├Ż ako alternat├şva k zlo┼żitej┼í├şm kon┼ítrukci├ím. 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 predstaven├Ż verejnosti ako minimalistick├í ┼ítrukt├║ra CSS, ktor├í sl├║┼żi ako z├íkladn├Ż v├Żchodiskov├Ż bod pre v├Żvoj webovej str├ínky. 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 mobilnou a flexibilnou sie┼ąovou ┼ítrukt├║rou. Je modul├írny, tak┼że mus├şte pou┼ż├şva┼ą iba funkcie, ktor├ę potrebujete. Podpora Flexboxu je zahrnut├í a existuje nieko─żko variantov mrie┼żky, z ktor├Żch si m├┤┼żete vybra┼ą.

unlimitedGrid

Vitálny

Vzh─żadom na ÔÇ×sp├Ątn├Ż pr├şstupÔÇť pre v├Ą─Ź┼í├ş person├íl je Vital ─żahk├Ż a ┼ík├ílovate─żn├Ż. V─Ćaka funkcii Sass n├íjdete efekt├şvne rozlo┼żenie mrie┼żky, vlastn├ę tla─Źidl├í a naklada─Źe. Zahrnut├ę je aj nieko─żko ┼ít├Żlov dizajnu u┼żito─Źn├Żch pre veci, ako s├║ fotografick├ę kol├í┼że, dr┼żiaky kariet 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 pre r├Żchle spustenie v├í┼ího ─Ćal┼íieho webov├ęho projektu.

PowerToCSS

Kouto Swiss

Kouto Swiss je kompletn├Ż CSS framework od Stylusu, ktor├Ż pon├║ka ve─ża kombin├íci├ş, funkci├ş a pom├┤cok pre r├Żchlej┼íie k├│dovanie a okrem toho zah┼Ľ┼ła silu webovej str├ínky Caniuse, aby va┼íe ┼ít├Żlov├ę listy vyhovovali va┼íim potreb├ím kompatibility.

Kouto Swiss

Sneaky CSS

Furtive je prv├í mobiln├í kon┼ítrukcia s ve─żmi mal├Żmi rozmermi. T├íto ┼ítrukt├║ra 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 obmedzen├ę predpony dod├ívate─żov. Je tie┼ż k dispoz├şcii v SCSS, CSS a prich├ídza so s├║borom Gulp na prisp├┤sobenie kompil├ície.

Sneaky CSS

Webov├Ż r├ím

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

─Żahk├Ż front-end framework Webplate s n├şzkou hmotnos┼ąou, robustn├Ż n├ístroj na tvorbu grafick├Żch n├ístrojov reaguj├║ci na html

plynulos┼ą

Creep je mo┼żno naj─żah┼íou a najr├Żchlej┼íou CSS ┼ítrukt├║rou! HTML reaguje od za─Źiatku takmer 100% a 115-bajtov├Ż s├║bor CSS opravuje ÔÇ×takmerÔÇť ─Źas┼ą. To nem├┤┼że by┼ą ─żah┼íie.

/ * FLUIDITY v0.1,0 @mrmrs – http://mrmrs.cc MIT * / / * responz├şvne pom├┤cky * / img, pl├ítno, iframe, video, svg {maxim├ílna ┼í├şrka: 100%; } / * Zoskupte tabu─żky alebo pred elementy do divu s touto triedou * / .overflow-container {overflow-y: scroll; }

syst├ęm

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

Menej reaguj├║ce rozlo┼żenie pou┼ż├şvate─żsk├ęho rozhrania

smaragd

Emerald je N├ŹZK├Ł Pragmatick├Ż mrie┼żkov├Ż syst├ęm. Je zalo┼żen├í na blokov├Żch prvkoch (na rozdiel od plav├íkov) a je p├şsan├í pomocou metodiky OOCSS pomocou syntaxe BEM.

N├ŹZKY smaragdov├Ż pragmatick├Ż responz├şvny sie┼ąov├Ż syst├ęm

Bijou

Bijou je mrie┼żka 10 st─║pcov schopn├Żch reagova┼ą na svetlo (

─Żahk├Ż responz├şvny r├ím st─║pcov CSS s 10 st─║pcami

Spark – iskra

Spark je ─żahk├í kon┼ítrukcia zalo┼żen├í na prvom mobilnom pr├şstupe k responz├şvnemu dizajnu. R├ím je dod├ívan├Ż vopred vyroben├Ż s nieko─żk├Żmi farebn├Żmi mot├şvmi, ktor├ę s├║ zamenite─żn├ę, v jasn├Żch a ploch├Żch ┼ít├Żloch. V s├║─Źasnosti s├║ z├íkladn├ę farby strieborn├ę (predvolen├ę), modr├ę, zelen├ę, oran┼żov├ę, ─Źerven├ę, fialov├ę, citr├│nov├ę a dra─Źie.

Pour light a design mobiln├ęho webu, prv├Ż mobiln├Ż r├ím

Typebase

typebase.css je minim├ílna prisp├┤sobite─żn├í ┼íabl├│na typu CSS. Najd├┤le┼żitej┼íia vec, ktor├║ typebase.css pon├║ka, je n├║ten├Ż vertik├ílny ┼ítrajk na v├Ą─Ź┼íine obrazoviek zariaden├ş, ─Ź├şm sa zabezpe─Ź├ş, ┼że text v st─║pcoch a v dlhej k├│pii nebude nerovnomern├Ż. K dispoz├şcii s├║ verzie Menej a Sass.

minim├ílne prisp├┤sobite─żn├ę p├şsmo, opakuj├║ca sa typografia CSS

hoisin

Hoisin, postaven├Ż so spolo─Źnos┼ąou Sass, je jednoduch├Ż a pohotov├Ż mini-front-end, vytvoren├Ż ako alternat├şva k zlo┼żitej┼í├şm a naf├║knut├Żm front-end r├ímom. Mimochodom, neobsahuje komponenty, ale zameriava sa na poskytnutie organizovan├ęho z├íkladu, z ktor├ęho si m├┤┼żete vytvori┼ą svoju vlastn├║ kni┼żnicu.

Sass Hoisin jednoduch├Ż a vn├şmav├Ż minir├ímec

Roztomil├ę bary

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

Cute Grids for mobile - sie┼ąov├Ż syst├ęm citliv├Ż na prv├Żch 12 st─║pcov

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

├Ü─Źelom pou┼żitia ak├ęhoko─żvek typu ┼ítrukt├║ry je u─żah─Źenie va┼íej pr├íce. Zd├í sa teda, ┼że ├şs┼ą a nutnos┼ą zmeni┼ą ┼ít├Żl mnoh├Żch CSS alebo na─Ź├ştanie nieko─żk├Żch skriptov, ktor├ę nebudete pou┼ż├şva┼ą, s├║ v rozpore so v┼íetkou logikou.

Pou┼żitie jednej z najz├íkladnej┼í├şch ┼ítrukt├║r vy┼í┼íie v├ím m├┤┼że pom├┤c┼ą za─Źa┼ą r├Żchlo, bez bolesti hlavy. A ke─Ć┼że niektor├ę z nich pou┼ż├şvaj├║ modul├írny pr├şstup, m├┤┼żete si vybra┼ą prvky potrebn├ę pre konkr├ętny projekt. Je to sk├┤r tak├ę!