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é!