Slik endrer du Bootstrap enkelt og effektivt
Bootstrap er ikke den eneste HTML / CSS-grensesnittrammen der ute, men jeg synes det er trygt å si at det endret spillet. Denne kjøkken-sink-innebygde haug med kode har gjort utformingen og utviklingen av mange en app (og nettsted) mye lettere, og popularisert det massive HTML-rammeverket som et biprodukt.
Dessverre appellerer den utrolige omfanget av funksjonssettet til de dårligere aspektene av menneskets natur, og mange av de som velger å bruke den, holder seg til standardinnstillingene. Nå, husk, standard stiler og layout grid er ikke dårlig av noen strekk av fantasien. De er resultatet av mye hardt arbeid og omfattende testing av Twitter-teamet. De er like solide grunnlag for å bygge videre som noe.
Men det er alt de er: et fundament. Rammer, som deres navn tilsier, er ikke ment å bli brukt som en helt og holdent løsning for UX-behovene dine. Det ene unntaket til denne regelen kan være hvis du utvikler noe internt som publikum aldri vil se. Men selv da ... Hele ideen er å ta dem videre, utvide og endre dem.
Bootstraps utviklere har faktisk gjort en veldig god jobb med å gjøre det enkelt å gjøre: Koden er modulær; og du kan laste ned individuelle komponenter i rammen som skal brukes som du vil. De har selv gitt en grunnleggende tilpasningsverktøy på deres nettside som lar deg redigere alle variablene etter behov.
Resten er imidlertid opp til oss. Og mann, noen virkelig imponerende designere og utviklere har styrket seg ved å skape mods og verktøy som lar resten av oss uten unnskyldninger. Det er ingen grunn til å avgjøre for standardinnstillingene.
Vurder dine individuelle prosjekter; kanskje Bootstraps standard typografi passer for deg, men fargeskjemaet og rutenettet er ikke, kanskje du trenger forskjellige ikoner. Identifiser stedene hvor Bootstrap faller under dine behov, og ta en titt på følgende ressurser.
Bootstrap mods
Disse er fullverdige mods som tar det grunnleggende oppstartsgrensesnittet, og gjør det til noe nesten uigenkjenelig. Deres bruk er noe spesifikk og begrenset; men hvis de møter dine behov, kan de spare tid og penger.
Flat UI
Den første moden på denne listen er Flat UI. Utgitt av gutta på Designmodo Flat UI oppnådde umiddelbar popularitet i design samfunnet og med god grunn: det er vakkert.
Laget for de som elsker flat design - i motsetning til Bootstraps noe skeuomorfe tendenser - har hvert UI-element blitt omformet fra grunnen av med en helt ny estetikk.
Med vektorikoner, en ny glyph-ikonfont, tilpassede brukergrensesnittelementer (som en gjøremålsliste) og flere enkelt endrede fargeskjemaer, har Flat UI gjort meg, og sannsynligvis mange andre, omtanke hva Bootstrap kan se ut.
Mitt kjæledyrstegn: Tekststørrelsen for ditt grunnleggende avsnittelement er litt lite for et nettsted. For å være rettferdig, er det sannsynligvis bare rett for et appgrensesnitt der du kan legge inn tekst i ganske små mellomrom.
Flat UI er gratis, men du kan betale for en pro-versjon med ekstra elementer, funksjonalitet og PSD-filer.
Fbootstrapp
Husk hvordan jeg sa at noen av disse modene hadde ganske spesifikke bruksområder? Vel, jeg tullet ikke. Fbootstrapp har blitt fullstendig omarbeidet for å være kompatibel med Facebooks brukergrensesnittelementer.
Hvorfor ville noen gjøre det? Vel, i sine egne ord, "Fbootstrapp er et verktøykasse designet for å starte utviklingen av Facebook iFrame-programmer i begge relevante størrelser. Den inneholder base CSS og HTML for typografi, skjemaer, knapper, tabeller, grids, navigasjon og mer, stilet i det typiske Facebook-utseendet. "
Facebook app utviklere, ta notat: jobben din har nettopp blitt lettere.
Jumpstart UI admin maler
Bootstrap kan være beregnet for bruk i applikasjoner, men det trenger litt arbeid hvis du har tenkt å lage et klassisk "admin-grensesnitt" med det. Jumpstart brukergrensesnitt bringer deg tre forskjellige maler som gjør dette beundringsverdig.
Admin UI ikoner, widget stiler, jQuery-baserte data visualisering plugins og mer blir samlet sammen i rene, tilpassbare og fullt responsive layouter.
Disse mods er imidlertid forskjellige fra de andre på en stor måte. Det er ingen gratis versjon; du må betale for dem direkte. De er ikke veldig dyre, skjønt: de varierer mellom $ 15 og $ 20 USD. For den store innsatsen som er gått inn i dem, vil jeg si at det er verdt det, hvis de oppfyller dine spesifikke behov.
BootMetro
Noen mennesker elsker det, og mange avskyr det med en lidenskap; men det er ikke nektet at Windows 8 og Metro UI har forårsaket en røre i designverdenen. Jeg, for livet av meg, kan egentlig ikke tenke på noe brukssaker (utenfor en slags programvarebutikk) der denne typen brukergrensesnitt ville være spesielt nyttig. Men hei, i BootMetro vi har en!
Det er gratis, og synes å være ganske funksjonelt, så sjekk det ut. Det kan ikke være spesielt nyttig for de fleste, men det er et interessant kodeeksperiment. (Jeg mener egentlig? Bootstrap og Metro? Jeg så ikke det som kommer.)
Bootstrap tilpasningsverktøy
Så, du vil skreddersy Bootstrap-oppsettet ditt for bedre å møte dine UI / UX-behov. Hvor begynner du? Vel, du kan dykke rett inn i koden. Jeg har gjort det. Jeg vil fortelle deg, selv om det kan være grovt.
Hvis du vil endre all typografi, eller knappene og lenkefargene, eller navbarstilene manuelt, kommer du til å være der en stund. Du kan redigere alle variablene i tilpasningsprogrammet på Bootstrap-nettstedet, men du må kjenne HEX-kodene for alle fargene, og du får ingen visuell tilbakemelding når du gjør endringer.
Heldigvis for oss er det ganske mange Bootstrap tema beslutningstakere som ble laget spesielt for dette formålet. Dette er de to beste jeg har funnet hittil.
StyleBootstrap
Hvis du kan ignorere det ugudelige grensesnittet, StyleBootstrap er et kraftig verktøy for redigering av de fleste av standardbrukerelementene som du finner i rammen. Hvis du vil starte raskt, bare endre de mest åpenbare tingene, så er dette stedet å starte.
Bootstrap Magic
Bootstrap Magic er verktøyet å bruke hvis du vil gjøre en grundig rebranding av rammen. Den har et bedre og enklere grensesnitt, og gir deg muligheten til å finjustere langt flere elementer enn StyleBootstrap. Vær advart, skjønt ... dette vil ta lengre tid. Når det er sagt, ville det ikke ta nesten så lenge det ville forandre alt manuelt.
Add-ons & snippets
Det er nok å si at det er ting som Bootstrap ikke har som du kan finne nyttig. Til å begynne med har vi ikoner.
Font Awesome
Bootstraps glyph ikoner er kule, men begrenset. Du har mørke ikoner, så har du lyse ikoner, alt satt opp i et fint lite spritbilde. Ikonfonter er imidlertid langt mer allsidige. Alt du kan gjøre med tekst med CSS3, kan du gjøre med disse ikonene. Endre størrelsen, fargen, gi dem en dråpe-skygge; det er ganske bokstavelig så enkelt som å skrive CSS. Med noen 361 ikoner på tidspunktet for denne skrivingen, Font Awesome er verdt å sjekke ut.
Bootsnipp
Bootsnipp er et bibliotek med HTML-utdrag designet for å fungere med Bootstrap, antagelig uten å legge til noen ekstra biblioteker. Snippets inkluderer: faneblogg og påloggingsskjemaer, karuseller, bedre kalendere, et e-postgrensesnitt som ligner på Gmail, en mediespiller-brukergrensesnitt og mer.
Hvis du sitter fast, prøver å finne ut hvordan du kan sette elementer sammen i brukergrensesnittet ditt, ta en titt gjennom Bootsnipp-biblioteket. Hvis de ikke har akkurat det du trenger, kan kodeeksemplene hjelpe deg med å finne ut hvordan du gjør det.
Det er ikke alt ...
Med Twitters favorittramme er så vidt vedtatt som det er, er det sannsynligvis mer informasjon om hvordan du tilpasser Bootstrap enn noen liste kan inneholde.
Tross alt, det er hva Internett er for, ikke sant? Det og ... katter.
Har du endret Bootstrap? Har du gjort det manuelt eller bruk en ressurs? Gi oss beskjed i kommentarene.