3 Fantastiske CSS-rammer du ikke vil savne
Personlig foretrekker jeg å begynne å kode et prosjekt med bare et rutenett og bygge derfra. Jeg er kresen slik, og jeg liker å ha kontroll over så mange variabler som mulig.
Det er imidlertid tid, når dette bare ikke er praktisk. Kanskje du bygger en app, eller et svært stort og komplisert nettsted. Kanskje du bare ikke har tid til å style hvert enkelt element fra bunnen av, og du trenger ikke. Det er da du vil ha et komplett rammeverk, med statister.
Vel, mye har blitt skrevet om "store navn" rammene-Bootstrap, Foundation, Gumby-så vi kommer ikke til å snakke om de her. Jeg har spilt med ... Jeg mener nøye å teste tre av de mindre kjente alternativene. Ta en titt, en av dem kan være akkurat det du trenger.
Kube
Kube er definitivt et verktøy for den moderne front-end-utvikleren. Bare moderne nettlesere - og IE9 + - støttes. Standardstilene er ganske, men blid nok til å bli tilpasset for bruk med nesten hvilken som helst merkevarebygging.
Det er kort sagt et snyggt, men rent og enkelt rammeverk, designet med nær universell visuell appell, og ment for tung tilpasning.
Funksjonene
For å beskrive alle funksjonene i dybden, eller til og med for å bare liste dem alle, vil det nok ta for mye plass i denne artikkelen, så jeg gir deg høydepunktene: Rammen selv er MINDER basert og modulær. Hvis du vil ha alt unntatt knappestiler, er det for eksempel en veldig enkel sak å "kompilere" din egen. Bare fjern den tilsvarende @import-regelen fra kube.less, og gå. Det er trygt å si at det er stiler for omtrent hvert HTML-element du kan tenke på, og de vanlige ekstramateriale som knapper, grunnleggende navigasjonsbjelker, hjelperklasser og et ganske solidt gridlay-system.
Kube er på en måte delvis definert av hva den ikke har. For eksempel har det ikke en overflod av brukergrensesnittelementer og ekstra stilarter. Det er ingen jQuery-plugins for UI-funksjonalitet overhodet. Og det kommer absolutt ikke med inntrykk av at du er "fast" med noe av det.
Konklusjon
Kube er et solid tilbud. Dens skapere sprang ikke på grunnleggende, men det er en klar følelse av "bare det du trenger" som følger med dette rammene. Det er et godt sted å begynne, og så er det den virkelige hensikten med et hvilket som helst rammeverk. Farge meg imponert.
IVORY Framework
ELFENBEIN, som Kube, er designet for å bli lett forståelig og raskt implementert. Typografien ser bra ut, men er blid nok til bruk med nesten alle prosjekter, og de generelle standardstilene er også.
Det er et rammeverk laget for å gi deg akkurat nok til å komme i gang, og noen ekstra.
Funksjonene
Funksjonene er det du vanligvis forventer: Solid og fleksibelt rutenett, stiler for typografi og alle former, og så videre. IVORY er imidlertid forskjellig fra Kube fordi du får noen ekstra UI-elementer: knapper, varslingsbokser, paginering, byttebrytere, verktøytips, breadcrumb navigering, faner og trekkspill.
Hva setter disse brukergrensesnittkomponentene bortsett fra mange andre er at de alle er implementert med CSS3, og ingen JavaScript. Den eneste grunnen til at jQuery-brukergrensesnittet er knyttet til, er å gjøre datoperatørens arbeid.
Bare to ting jeg ikke liker: Noen av UI-komponentstilene minner veldig om Bootstrap 2.0-stiler. Så ja, du vil sannsynligvis ønske å endre dem. I tillegg krever rutenettet bruk av en ekstra klasse i den siste kolonnen i en hvilken som helst rad; Jeg hater det bare.
Konklusjon
Disse to små advarslene til side, IVORY Framework er et godt alternativ for noen antall prosjekter. Det er ikke det enklest tilpassbare alternativet, men hvis du bare trenger å komme i gang med et godt sett med standardinnstillinger, og noen ekstra UI-komponenter, gi det en virvel.
Utgangspunkt
Utgangspunkt, av Matthew Hartman , tar en noe mer trendy (for øyeblikket, i alle fall) tilnærming til CSS-rammeverket. Basert på Normalize.css , det starter med tynne overskriftskrifter, og flate bokser for knapper. Det er ikke nektet at standardstilene er ganske fine.
Dette kan ikke være til alles smak, avhengig av branding bekymringer, men det er enkelt nok til å endre. Tross alt handler Base om tilpasning.
Funksjonene
Base er tilgjengelig i både LESS og SASS-versjoner, slik at du raskt kan endre variablene og "kompilere" den til dine behov. Innebygde variabler inkluderer skriftstørrelser, bruddpunkter, hovedbeholderbredder for hvert bruddpunkt og mer.
Mange ekstra klasser er gitt for å hjelpe deg med å konfigurere mobilspesifikke oppsett, og det finnes "mixins" i en egen fil for å hjelpe deg på veien.
Som Cube, er det ingen ekstra UI-komponenter utover de som leveres med HTML som standard, så hvis du vil ha flippede grensesnitt, trekkspill og lignende, må du lage dem selv. Base ser ut til å være rettet mot å bygge vakre nettsteder i motsetning til webapps.
Konklusjon
Hvis du bygger et nettsted som ikke trenger for mange appspesifikke brukergrensesnittkomponenter, er Base en fantastisk ressurs. Sider som er bygget med den ser allerede pen ut; men hvis du ikke liker standardstilene, er det ikke så vanskelig å endre dem.
