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.
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.
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.
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.
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.
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ť.
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.
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.
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ť.
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.
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.
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.
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.
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.
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ť.
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.
Bijou
Bijou je mriežka 10 stĺpcov schopných reagovať na svetlo (
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.
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.
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.
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.
Ľ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é!