Så här ändrar du Bootstrap enkelt och effektivt
bootstrap är inte den enda HTML / CSS-gränssnittsramen där ute, men jag tror att det är säkert att säga att det förändrade spelet. Den här köksdisken har tagit in design och utveckling av många en app (och hemsida) mycket enklare och populariserat den massiva HTML-ramen som en biprodukt.
Tyvärr appellerar den omfattande utsträckningen av dess särdrag till de lazier aspekterna av den mänskliga naturen, och många av de personer som väljer att använda den håller sig till standardinställningarna. Nu tänker du, standardstilarna och layoutnätet är inte dåliga av någon sträcka av fantasin. De är resultatet av mycket hårt arbete och omfattande testning av Twitter-laget. De är lika solida grund att bygga på som någon.
Men det är allt de är: en grund. Ramar, som deras namn skulle föreslå, är inte avsedda att användas som en helt och hållet lösning för dina UX-behov. Det enda undantaget från denna regel kan vara om du utvecklar något internt som allmänheten aldrig kommer att se. Men även då ... Hela ideen är att ta dem vidare, expandera på och ändra dem.
Bootstraps utvecklare har faktiskt gjort ett mycket bra jobb för att göra det enkelt att göra: deras kod är modulär; och du kan ladda ner enskilda komponenter i ramen för användning som du tycker är lämplig. De har även lämnat en grundläggande anpassningsverktyg På deras hemsida kan du redigera alla variabler efter behov.
Resten är dock upp till oss. Och mannen har några riktigt imponerande designers och utvecklare intensifierats genom att skapa mods och verktyg som lämnar resten av oss utan ursäkter. Det finns ingen anledning att bosätta sig för standardinställningarna.
Utvärdera dina enskilda projekt kanske Bootstraps standard typografi passar dig, men färgschemat och rutnätet är inte, kanske behöver du olika ikoner. Identifiera de platser där Bootstrap faller under dina behov och ta en titt på följande resurser.
Bootstrap mods
Dessa är fullfjädrad mods som tar det grundläggande uppstartsgränssnittet och gör det till något nästan oigenkännligt. Deras användningar är något specifika och begränsade; men om de uppfyller dina behov kan de spara tid och pengar.
Platt UI
Den första moden på den här listan är Platt UI. Släppt av killarna på Designmodo , Flat UI uppnådde omedelbar popularitet i designgemenskapen och med god anledning: det är vackert.
Skapat för dem som älskar plattform - i motsats till Bootstraps något skeuomorfa tendenser - har varje UI-element omformats från grunden med en helt ny estetik.
Med vektorikoner, en ny glyph-ikonstyp, anpassade användargränssnitt (till exempel en att göra-lista) och flera lättförändrade färgscheman har Flat UI gjort mig, och troligen många andra, ompröva vad Bootstrap kan se ut.
Min ena husdjur: Textstorleken för ditt grundläggande styckeelement är lite liten för en webbplats. För att vara rättvis är det nog bara rätt för ett appgränssnitt där du kan lägga text i ganska små utrymmen.
Flat UI är gratis, men du kan betala för en pro version med extra element, funktionalitet och PSD-filer.
Fbootstrapp
Kom ihåg hur jag sa att några av dessa mods hade ganska specifika användningsfall? Jo jag skojade inte. Fbootstrapp har blivit helt omarbetad för att vara kompatibel med Facebooks användargränssnitt.
Varför skulle någon göra det? Tja, i egna ord, "Fbootstrapp är en verktygslåda som är utformad för att starta utvecklingen av Facebook iFrame-appar i båda relevanta storlekarna. Den innehåller bas CSS och HTML för typografi, blanketter, knappar, tabeller, rutor, navigering och mer, stilad i det typiska Facebook-utseendet. "
Facebook apputvecklare, notera: ditt jobb har precis blivit enklare.
Jumpstart UI adminmallar
Bootstrap kan vara avsedd att användas i applikationer, men det behöver lite arbete om du tänker skapa ett klassiskt "admin-gränssnitt" med det. Jumpstart UI ger dig tre olika mallar som gör det här beundransvärt.
Admin-användargränssymboler, widgetstilar, jQuery-baserade datavisningsinställningar och mer samlas i rena, anpassningsbara och fullt reagerande layouter.
Dessa mods skiljer sig emellertid från de andra på ett större sätt. Det finns ingen fri version; du måste betala för dem direkt. De är dock inte så dyra, de varierar mellan $ 15 och $ 20 USD. För den stora ansträngningen som har gått in i dem, skulle jag säga att det är värt det, om de uppfyller dina specifika behov.
BootMetro
Vissa människor älskar det, och många avskyr det med en passion; men det finns ingen förnekande att Windows 8 och dess Metro UI har orsakat en rörelse i designvärlden. Jag, för livet av mig, kan inte riktigt tänka på något användarfall (utanför någon form av mjukvaruaffär) där denna typ av användargränssnitt skulle vara särskilt användbart. Men hej, i BootMetro vi har en!
Det är gratis, och verkar vara ganska funktionellt, så kolla in det. Det kan inte vara särskilt användbart för de flesta, men det är ett intressant kodexperiment. (Jag menar verkligen? Bootstrap och Metro? Jag såg inte att komma.)
Verktyg för anpassningsverktyg för uppstart
Så, du vill skräddarsy din Bootstrap-inställning för att bättre kunna uppfylla dina UI / UX-behov. Var börjar du? Nåväl, du kan dyka rakt in i koden. Jag har gjort det. Jag ska berätta för dig, men det kan vara grovt.
Om du vill ändra all typografi, eller knapparna och länkfärgerna, eller navbarstilarna manuellt, kommer du att vara där ett tag. Du kan redigera alla variablerna i anpassningsapplikationen på Bootstraps webbplats, men du måste känna till HEX-koderna för alla färger, och du får ingen visuell återkoppling när du gör ändringar.
Lyckligtvis för oss finns det ganska många Bootstrap-temstillverkare som skapades speciellt för detta ändamål. Det här är de två bästa som jag hittat hittills.
StyleBootstrap
Om du kan ignorera det oskäliga gränssnittet, StyleBootstrap är ett kraftfullt verktyg för redigering av de flesta av de standardgränssnitt som du hittar i ramen. Om du vill komma igång snabbt, ändra bara de mest uppenbara sakerna, då är det här stället att börja.
Bootstrap Magic
Bootstrap Magic är verktyget att använda om du vill göra en djupgående ombrandning av ramverket. Den har ett trevligare, enklare gränssnitt och ger dig möjlighet att tweak mycket mer element än StyleBootstrap. Varnas, men ... det tar längre tid. Som sagt skulle det inte ta nästan så länge som det skulle ändra allt manuellt.
Add-ons & snippets
Det räcker med att säga att det finns saker som Bootstrap inte har som du kanske tycker är användbar. Till att börja med har vi ikoner.
Typsnitt Awesome
Bootstraps glyph ikoner är coola, men begränsade. Du har mörka ikoner, då har du lätta ikoner, alla uppställda i en fin liten spritbild. Ikon typsnitt är dock mycket mer mångsidiga. Något som du kan göra med text med CSS3, kan du göra med dessa ikoner. Ändra storlek, färg, ge dem en drop-skugga; Det är ganska bokstavligen lika lätt som att skriva CSS. Med ungefär 361 ikoner vid tidpunkten för detta skrivande, Typsnitt Awesome är värt att kolla in.
Bootsnipp
Bootsnipp är ett bibliotek med HTML-fragment som är utformade för att fungera med Bootstrap, förmodligen utan att lägga till några extra bibliotek. Snippets inkluderar: Signed-inloggning och inloggningsformulär, karuseller, bättre kalendrar, ett e-postgränssnitt som liknar Gmail, en mediespelare-gränssnitt och mer.
Om du sitter fast försöker du räkna ut hur man sätter element ihop i ditt användargränssnitt, ta en titt genom Bootsnipp-biblioteket. Om de inte har precis vad du behöver kan kodexemplen hjälpa dig att räkna ut hur du gör det.
Det är inte allt ...
Med Twitters favoritramar är så allmänt antagna som det är, finns det förmodligen mer information om hur man anpassar Bootstrap än någon lista kan innehålla.
Det är trots allt vad Internet är för, eller hur? Det och ... katter.
Har du ändrat Bootstrap? Har du gjort det manuellt eller använt en resurs? Låt oss veta i kommentarerna.