3 Fantastiske CSS-rammer, du vil ikke savne
Personligt foretrækker jeg at starte kodning af ethvert projekt med et net og bygge derfra. Jeg er nøjagtig sådan, og jeg har lyst til at have kontrol over så mange variabler som muligt.
Der er imidlertid tidspunkter, når dette bare ikke er praktisk. Måske opbygger du en app eller et usædvanligt stort og kompliceret websted. Måske har du bare ikke tid til at style hvert enkelt element fra bunden, og du behøver ikke. Det er da du vil have en komplet ramme, med ekstramateriale.
Nå er der meget skrevet om "store navn" rammerne-Bootstrap, Foundation, Gumby-så vi vil ikke tale om dem her. Jeg har spillet wi ... Jeg mener nøje at teste tre af de mindre kendte muligheder. Tag et kig, en af dem kan være præcis, hvad du har brug for.
Kube
Kube er absolut et redskab til den moderne front-end-udvikler. Kun moderne browsere - og IE9 + - understøttes. Standardformaterne er smukke, men intetsigende nok til at blive tilpasset til brug med næsten enhver branding.
Det er kort sagt en smuk, men ren og simpel ramme, designet med næsten universel visuel appel og med til stor tilpasning.
Funktionerne
For at beskrive alle funktionerne i dybden, eller endda blot at liste dem alle, ville sandsynligvis tage for meget plads i denne artikel, så jeg giver dig højdepunkterne: Rammen selv er mindre baseret og modulær. Hvis du vil have alt undtagen knapper, er det for eksempel et meget simpelt spørgsmål at "kompilere" din egen. Bare fjern den tilsvarende @import regel fra kube.less, og gå. Det er sikkert at sige, at der er stilarter til næsten alle HTML-elementer, du kan tænke på, og de sædvanlige ekstrafunktioner som knapper, grundlæggende navigationsbjælker, hjælperklasser og et smukt solidt layoutsystem.
På en måde defineres kube delvist af det, den ikke har. For eksempel har det ikke en overflod af UI-elementer og ekstra stilarter. Der er ingen jQuery-plugins til UI-funktionalitet overhovedet. Og det kommer bestemt ikke med indtryk af, at du er "fast" med noget af det.
Konklusion
Kube er et solidt tilbud. Dens skabere skumbede ikke på fundamentet, men der er en klar følelse af "kun hvad du har brug for", der følger med denne ramme. Det er et godt sted at starte, og det belyser det egentlige formål med enhver ramme. Far mig imponeret.
IVORY Framework
ELFENBEN, som Cube, er designet til at blive let forstået og hurtigt implementeret. Typografien ser godt ud, men er intetsigende nok til brug med næsten ethvert projekt, og de generelle standardstile er også.
Det er en ramme designet til at give dig lige nok til at komme i gang, og et par ekstrafunktioner.
Funktionerne
Funktionerne er, hvad du normalt ville forvente: Solidt og fleksibelt rutenet system, stilarter til typografi og alle former, og så videre. Men IVORY adskiller sig fra Kube, da du får et par ekstra UI-elementer: knapper, advarselsbokse, paginering, skifteknap, værktøjstips, breadcrumb navigation, faner og accordeon.
Hvad der er disse UI-komponenter bortset fra mange andre er, at de alle er implementeret med CSS3, og ingen JavaScript. Den eneste grund til, at jQuery-brugergrænsefladen er knyttet til, er at gøre datoen-picker-arbejdet.
Bare to ting, jeg ikke kan lide: En del af UI-komponentformaterne minder meget om Bootstrap 2.0-stilarter. Så ja, du vil nok gerne ændre dem. Derudover kræver rutenettet brugen af en ekstra klasse i den sidste kolonne i en række; Jeg hader bare det.
Konklusion
Disse to små advarsler til side, IVORY Framework er en god mulighed for ethvert antal projekter. Det er ikke den mest let tilpassede af muligheder, men hvis du bare skal komme i gang med et godt sæt standardindstillinger og nogle ekstra UI-komponenter, så giv det en hvirvel.
Grundlag
Grundlag, ved Matthew Hartman , tager en noget mere trendy (i øjeblikket, under alle omstændigheder) tilgang til CSS-rammen. Baseret på Normalize.css , det starter med tynde overskriftsfonte og flade bokse til knapper. Der kan ikke benægtes, at standardstile er ret smukke.
Dette kan ikke være til alles smag, afhængigt af branding bekymringer, men det er simpelt nok at ændre. Når alt kommer til alt handler Base om tilpasning.
Funktionerne
Base leveres i både LESS og SASS-versioner, så du hurtigt kan ændre variablerne og "genkompilere" den efter dine behov. Indbyggede variabler omfatter skriftstørrelser, brudpunkter, hovedbeholderbredder for hvert brudpunkt og mere.
Masser af ekstra klasser leveres til at hjælpe dig med at oprette dine mobilspecifikke layouter, og der er "mixins" i en separat fil for at hjælpe dig på vej.
Ligesom Cube er der ingen ekstra UI-komponenter ud over dem der leveres med HTML som standard, så hvis du vil have fladskærme, harmonika og lignende, skal du selv lave dem. Base synes at være rettet mod at bygge smukke hjemmesider i modsætning til web apps.
Konklusion
Hvis du opbygger et websted, der ikke behøver for mange appspecifikke brugerinterface-komponenter, er Base en fantastisk ressource. Sider bygget med det ser allerede smukke ud; men hvis du ikke kan lide standardstil, er det ikke for svært at ændre dem.
