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.
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.
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.
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.
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ť.
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.
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.
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.
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.
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.
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.
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.
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.
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ť.
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.
Bijou
Bijou je 10-stĺpcový mriežkový rám s citlivosťou na svetlo (
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čí.
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.
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.
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.
Ľ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é!
