CSS-ramverk har funnits i flera år, men ankomsten av lyhörda designpraxis har gjort många av våra gamla favoriter värdelösa. Lyckligtvis har massor av riktigt begåvade utvecklare hoppat in för att fylla klyftan med nästa generations CSS-ramar och pannplattor.
Det finns redan ett ton av dessa saker som flyter runt. Alla har en lista, men ingen går verkligen igenom hur varje ram och panna skiljer sig från nästa så att du kan fatta ett välgrundat beslut. Det är vårt mål idag. Följ med när vi tittar på vad som gör var och en av dessa 22 responsiva CSS-ramar och pannplattor unika.
Gumby
Gumby-ramverket tar 960-gallret som vi alla skar våra tänder för år sedan och tar den i modern tid med webbdesign med en lyhörd touch. Det har också förbyggda stilar för saker som former, knappar, växlar, dropdowns, flikar och mer.
Semantic Grid System
Om du hatar rutnät och deras uppblåsta, icke-semantiska markering, är den här för dig. Semantic Grid System utnyttjar kraften i CSS preprocessorer (LESS, Sass och Stylus) för att skapa anpassningsbara variabler för saker som rännor och kolonnbredd. Allt du behöver göra är att använda några förbyggda mixins i din CSS, ingen extra markering krävs!
Gridless
Gridless är en kraftfull pannplatta som använder mobilens första responsiva webbdesign för att anpassa sig till enhetens bredd. Det är också fullt med bra funktioner som CSS normalisering, IE buggfixar och typografi stilar.
ramlösa
Frameless är svår att klassificera eftersom det är tekniskt mer av ett rekommenderat sätt att närma sig lyhörd design än en faktisk uppsättning filer som du kan ladda ner. Det finns tre steg: Först gör du ett vanligt fastbreddssnitt, gör sedan det oändligt, och avsluta med att centrera det i visningsporten.
På webbplatsen anges specifikt att Frameless inte är en ram och att det inte finns några filer som laddas ner, men trots det här är det faktiskt några grundläggande mallar som hjälper dig att komma igång.
Proportional Grids
Proportionella nät hanterar några stora problem som uppstår när man försöker svara på CSS-layout, nämligen nestningsnät och brottning med procentuella baserade värden över väldigt olika visningsportar.
Proportional Grids använder CSS-boxningsstorleken för att skapa en lösning som gör det möjligt att fasta rännor (ems / rems) blandas med vätskekolonner. Avståndet mellan kolumnerna kommer att vara lika vid varje brytpunkt, i förhållande till basstorleken. Kolumner definieras av proportionen, t.ex. en halv, en tredjedel, två tredjedelar och kan enkelt återanvändas så många gånger som du vill, även när du är kapslad.
The Goldilocks Approach
Goldilocks Approach syftar till att minska tendensen hos lyhörda konstruktioner för att luta sig mot stöd av specifika enheter. I stället skottar den för en universell design som inte är beroende av någon enhet.
Goldilocks Approach använder en kombination av ems, maxbredd, mediasökningar och mönsteröversättningar för att överväga tre stater som gör att dina mönster är oberoende av upplösning.
Twitter Bootstrap
Twitter Bootstrap behöver ingen introduktion. Det är en av de största, dåligaste CSS-pannan på webben och är utgångspunkten för otaliga professionella och personliga webbplatser från utvecklare över hela världen.
Twitter Bootstrap innehåller ett responsivt rutsystem förutom massor av stellar pre-styled element som former, knappar, navigeringsmenyer och mer. Kolla in vår fullständiga introduktion här.
Stiftelse från ZURB
Stiftelsen är den viktigaste konkurrenten till Twitter Bootstrap eftersom de två projekten är mycket lika. Liksom Bootstrap, Foundation ger dig ett lyhörd grid samt olika stilade UI-element.
Stiftelsen 3 lanserades nyligen, så om du inte har tittat på projektet på ett tag, är det dags att sluta och kolla in det. Det är händerna ner en av de mest användbara och grundliga ramarna som du hittar någonstans.
Skelett
Skelett var en av de tidigaste reagerande pannplattorna för att utse sig och det är fortfarande en av de bästa. I konceptet är det lite som Foundation bara det känns lättare (typ, knappar och former är de enda UI-elementen ingår).
Kolla in vårt skeletthandledning för att se hur otroligt enkelt det här verktyget gör det för att få en responsiv design upp och köra i minuter.
Amazium
Amazium är mycket som Gumby ovanför, eftersom det är ett lyhörd grid byggt på toppen av 960-teknikerna i gammal tid. Nyligen om ramverket har uppdaterats för att sträcka sig hela vägen till 1.200px så att du kan dra nytta av stora skärmar. Det inkluderar även stöd för näthinnans skärmar!
Golden Grid System
Golden Grid System kallar sig ett? Foldningsnät ,? vilket egentligen bara är ett fint sätt att säga att mediefrågor används för att kollapsa den ursprungliga sexton kolumnlayouten i åtta och sedan fyra kolumner som utsikten sänks.
Gilla några av de andra rutorna som vi har sett hittills använder Golden Grid System rännor baserat på ems så att rännorna alltid håller sig i proportion till innehållet.
1140px CSS Grid System
Den här är ett ganska vanligt nätverkssystem utan något som helst. Det börjar med ett 12 kolonnens vätskegrid som använder procentuella rännor och fungerar bra på 1 280 och 1 140 px bildskärmar. Eftersom utsikten blir mindre används ett par enkla mediefrågor för att återställa innehållet.
StackLayout
StackLayout är för rebellerna, det kommer att vara väldigt annorlunda än andra ramar som du har försökt. Faktum är att det uppstod ur en motvilja mot typiska CSS-layoutramar.
Grundprincipen på jobbet här är att StackLayout använder inline-block som hörnstenen i ett unikt layoutsystem. Systemet är lite knäppt men det är ganska imponerande ändå. Kolla in ett genombrott här.
SimpleGrid
SimpleGrid är ett annat unikt layoutsystem som du kan njuta av om du älskar att leka med dessa saker lika mycket som jag gör. Rutenettet här baseras på fyra olika skärmområden: skärmar mindre än 720px breda, skärmar större än 720px breda, skärmar större än 985px breda och skärmar större än 1235px breda.
För att implementera systemet använder du? Slot? klasser från både en fyra och sex kolumnlayout. Det låter komplicerat men det är faktiskt sant att det heter och ganska enkelt att implementera.
Vätskegränssnitt
Fluid Baseline Grid är byggt med stor tonvikt på stark typografi som följer en grunnlinje. Det innehåller också ett tre kolonnvikningsnät som är avsett att vara en bra utgångspunkt, inte en standard som ska följas.
Columnal
Columnal är typ av ett hybridnät system som lånar de bästa elementen från olika andra ramar. Den har det elastiska DNA i 1140px CSS Grid System med några 960.gs kastade in också. Det är ganska vanliga saker men om de andra inte verkar som en bra passform kan du prova det.
Inuit.css
Inuit.css är en bra ram som faktiskt är byggd med töjbarhet i åtanke. Använd den anpassade rutnätbyggaren för att skapa ditt eget svarsnät och ladda ner några iglo (plugins) för att utöka ramen på användbara sätt.
320 och uppåt
320 och upp är som en samling av webbdesign buzz ord (på ett bra sätt). Den innehåller ett lyhörd layoutsystem som använder? Mobilen först? mentalitet, tillsammans med Bootstrap visuella stilar, Font Awesome ikoner, Modernizr, Selectivizr, LESS och Sass. Det är en imponerande liten verktygslåda med godisar som jag tycker att du kommer att njuta av.
Susy: Responsive nät för kompass
Den här är för supernorden som jag själv som kärlekslayoutsystem samt Sass och Compass. Bygg dina layouter på några minuter med magiken i mixins och variabler.
Med tanke på att Compass nyligen har tappat inbyggt stöd för gallret helt och hållet, skulle Susy komma till nytta för dem som saknar dem.
Initializr - Responsive HTML5 Template
Initializr är ett verktyg som hjälper dig att snabbt och enkelt starta dina HTML5-projekt med HTML5 Boilerplate, Bootstrap eller en ny responsiv boilerplate.
Att välja den responsiva mallen är bara början, därifrån anpassar du din nedladdning genom att välja bland alla de resurser du kanske vill ha som Modernizr och LESS.
Ännu en mobil Boilerplate
YAMB är en utmärkt utgångspunkt för dina lyhörda webprojekt, som bygger på några viktiga funktioner: ett lyhörd fluidgrid, rullgardinsmenyer som automatiskt blir till valda rutor på små skärmar och lyhörda bilder / bildspel.
Jag tycker att webbplatsen är ganska ful men själva verktyget är ganska praktiskt!
Wirefy
Wirefy är byggt specifikt med snabb responsiv wireframing experimentation i åtanke. Den använder en modifierad version av sexton kolumn 960-nätet tillsammans med några Bootstrap-liknande gränssnitt (menyer, former, bildspel, knappar, bilder, etc.).
Vilken är din favorit?
Oavsiktligt kommer dessa typer av inlägg att locka kommenterare som känner behovet av att försöka diskreditera hela uppfattningen att använda någon form av mall eller rutnät för webbdesign. De är helt enkelt inte för alla och jag respekterar din åsikt om du inte kan stå dem.
Om du är i nätverkssystem, skulle jag gärna höra din feedback om alternativen ovan. Vilka har du försökt och vad tyckte du om dem? Vilken är din favorit?