Sådan ændres Bootstrap enkelt og effektivt
bootstrap er på ingen måde den eneste HTML / CSS grænseflade ramme derude, men jeg synes det er sikkert at sige, at det ændrede spillet. Denne køkken-sink-inkluderet bunke kode har gjort designet og udviklingen af mange en app (og websted) meget nemmere, og populariseret den massive HTML-ramme som et biprodukt.
Desværre appellerer den høje udstrækning af dens træk til de lazier aspekter af den menneskelige natur, og mange af de mennesker, der vælger at bruge det, holder sig til standardindstillingerne. Nu, husk, standard stilarter og layout grid er ikke dårligt af enhver strækning af fantasien. De er resultatet af en masse hårdt arbejde og omfattende test af Twitter-teamet. De er så solidt et fundament at bygge på som nogen.
Men det er alt, de er: et fundament. Rammer, som deres navn tyder på, er ikke beregnet til at blive brugt som en helt komplet løsning til dine UX-behov. Den ene undtagelse til denne regel kan være, hvis du udvikler noget internt, som offentligheden aldrig vil se. Men selv da ... Hele ideen er at tage dem videre, udvide dem og ændre dem.
Bootstraps udviklere har faktisk gjort et meget godt stykke arbejde med at gøre det nemt at gøre: deres kode er modulær; og du kan downloade de enkelte komponenter i rammen til brug som du finder det passende. De har endda givet en grundlæggende tilpasningsværktøj på deres hjemmeside, som giver dig mulighed for at redigere alle variabler efter behov.
Resten er dog op til os. Og mand, nogle virkelig imponerende designere og udviklere er intensiveret ved at skabe mods og værktøjer, der efterlader resten af os uden undskyldninger. Der er ingen grund til at afregne for standardindstillingerne.
Vurder dine individuelle projekter; måske er Bootstraps standard typografi det rigtige for dig, men farveskemaet og nettet er ikke, måske har du brug for forskellige ikoner. Identificer de steder, hvor Bootstrap mangler dine behov, og tag et kig på følgende ressourcer.
Bootstrap mods
Disse er fuldt udviklede mods, der tager det grundlæggende bootstrap-brugerinterface og gør det til noget, der næsten ikke kan genkendes. Deres anvendelser er noget specifikke og begrænsede; men hvis de opfylder dine behov, kan de spare tid og penge.
Flad UI
Den første mod på denne liste er Flad UI. Udgivet af gutterne på Designmodo Flat UI opnåede øjeblikkelig popularitet i design samfundet og med god grund: det er smukt.
Lavet til dem, der elsker fladt design - i modsætning til Bootstraps noget skeuomorphic tendenser - er hvert UI-element blevet omdesignet fra bunden af med en helt ny æstetik.
Med vektorikoner, en ny glyph-ikon skrifttype, brugerdefinerede brugergrænseelementer (som en opgaveliste) og flere nemt ændrede farveskemaer, har Flat UI gjort mig og sandsynligvis mange andre omtanke, hvad Bootstrap kan se ud.
Min ene kattepære: Tekststørrelsen til dit grundlæggende afsnitelement er lidt lille for et websted. For at være retfærdig er det nok bare rigtigt for en app-grænseflade, hvor du måske lægger tekst i forholdsvis små rum.
Flat UI er gratis, men du kan betale for en pro version med ekstra elementer, funktionalitet og PSD filer.
Fbootstrapp
Husk, hvordan jeg sagde, at nogle af disse mods havde mere specifikke brugssager? Nå, jeg skød ikke. Fbootstrapp er blevet helt omarbejdet til at være kompatibel med Facebooks brugergrænsefladeelementer.
Hvorfor ville nogen gøre det? Nå, i deres egne ord, "Fbootstrapp er et værktøjssæt designet til at kickstart udviklingen af Facebook iFrame apps i begge relevante størrelser. Den indeholder base CSS og HTML til typografi, formularer, knapper, tabeller, grids, navigation og mere, stilet i den typiske Facebook look and feel. "
Facebook app udviklere, bemærk: dit job er lige blevet nemmere.
Jumpstart UI admin skabeloner
Bootstrap kan være beregnet til brug i applikationer, men det har brug for lidt arbejde, hvis du har til hensigt at lave en klassisk "admin interface" med den. Jumpstart UI bringer dig tre forskellige skabeloner, der gør dette beundringsværdigt.
Admin UI ikoner, widget stilarter, jQuery-baserede data visualisering plugins og mere er samlet i rene, tilpasses og fuldt responsive layouts.
Disse mods er imidlertid forskellige fra de andre på en stor måde. Der er ingen gratis version; du skal betale for dem direkte. De er ikke meget dyre, selvom de varierer mellem $ 15 og $ 20 USD. For den store indsats, der er gået ind i dem, vil jeg sige, at det er det værd, hvis de opfylder dine specifikke behov.
BootMetro
Nogle mennesker elsker det, og mange afskyr det med en lidenskab; men der er ingen benægtelse, at Windows 8 og dens Metro UI har skabt en rystelse i designverdenen. Jeg, for mit liv, kan ikke rigtig tænke på nogen brugssag (uden for en slags softwarebutik), hvor denne type brugergrænseflade ville være særlig nyttig. Men hej, i BootMetro vi har en!
Det er gratis og synes at være helt funktionskomplet, så tjek det ud. Det kan ikke være særlig nyttigt for de fleste mennesker, men det er et interessant kodeeksperiment. (Jeg mener virkelig? Bootstrap og Metro? Jeg så ikke, at der kommer.)
Bootstrap tilpasningsværktøjer
Så, du vil skræddersy din Bootstrap opsætning for bedre at opfylde dine UI / UX behov. Hvor starter du Nå, du kan dykke lige ind i koden. Det har jeg gjort. Jeg vil fortælle dig, at det kan være groft.
Hvis du vil ændre alle typografier, eller knapperne og linkfarverne, eller navbarstilet manuelt, vil du være der et stykke tid. Du kan redigere alle variablerne i tilpasningsappen på Bootstrap-webstedet, men du skal kende HEX-koderne for alle farverne, og du får ingen visuel feedback, når du foretager ændringer.
Heldigvis for os er der ganske mange Bootstrap tema beslutningstagere, der blev skabt til dette formål specifikt. Dette er de to bedste, jeg har fundet hidtil.
StyleBootstrap
Hvis du kan ignorere den ugudelige grænseflade, StyleBootstrap er et kraftfuldt redskab til redigering af de fleste af de standardbrugerelementer, som du finder i rammen. Hvis du vil komme i gang hurtigt, kun ændre de mest oplagte ting, så er dette stedet at starte.
Bootstrap Magic
Bootstrap Magic Er værktøjet til brug, hvis du vil gøre en dybtgående rebranding af rammen. Den har en pænere og enklere grænseflade og giver dig mulighed for at finjustere langt flere elementer end StyleBootstrap. Vær advaret, selvom ... det vil tage længere tid. Når det er sagt, ville det ikke tage næsten lige så længe som det ville ændre alt manuelt.
Tilføjelser og uddrag
Det er nok at sige, at der er ting, som Bootstrap ikke har, som du måske finder nyttige. Til at begynde med har vi ikoner.
Font Awesome
Bootstraps glyph ikoner er seje, men begrænsede. Du har mørke ikoner, så har du lyse ikoner, alt oprettet i et godt lille spritbillede. Ikon skrifttyper er imidlertid langt mere alsidige. Alt, hvad du kan gøre til tekst med CSS3, kan du gøre ved disse ikoner. Skift størrelse, farven, giv dem en drop-skygge; det er ret bogstaveligt så nemt som at skrive CSS. Med nogle 361 ikoner på tidspunktet for denne skrivning, Font Awesome er værd at tjekke ud.
Bootsnipp
Bootsnipp er et bibliotek med HTML-uddrag designet til at arbejde med Bootstrap, formodentlig uden at tilføje ekstra biblioteker. Uddrag omfatter: fanebladet tilmelding og login-formularer, karruseller, bedre kalendere, en e-mail-grænseflade, der ligner Gmail, en medieafspiller-brugergrænseflade og meget mere.
Hvis du sidder fast og forsøger at finde ud af, hvordan du sætter elementer sammen i din brugerflade, skal du kigge igennem Bootsnipp-biblioteket. Hvis de ikke har præcis det, du har brug for, kan kodeeksemplerne hjælpe dig med at finde ud af, hvordan du gør det.
Det er ikke alt ...
Med Twitters foretrukne ramme er så vidt vedtaget som det er, er der sandsynligvis flere oplysninger om, hvordan man tilpasser Bootstrap, end nogen liste kan indeholde.
Det er trods alt, hvad internettet er for, ikke? Det og ... katte.
Har du ændret Bootstrap? Har du gjort det manuelt eller brug en ressource? Lad os vide i kommentarerne.