Bootstrap eenvoudig en effectief aanpassen
bootstrap is zeker niet het enige HTML / CSS interface-framework dat er is, maar ik denk dat het veilig is om te zeggen dat het de game heeft veranderd. Deze in de spoelbak opgenomen stapel code heeft het ontwerp en de ontwikkeling van veel apps (en websites) een stuk eenvoudiger gemaakt en het enorme HTML-framework gepopulariseerd als een bijproduct.
Jammer genoeg spreekt de enorme omvang van zijn functies de luie aspecten van de menselijke natuur aan, en veel van de mensen die ervoor kiezen om het te gebruiken blijven bij de standaardinstellingen. Welnu, de standaardstijlen en het lay-outraster zijn niet slecht voor de verbeelding. Ze zijn het resultaat van veel hard werk en uitgebreide testen door het Twitter-team. Ze zijn net zo solide als een fundament om op te bouwen als iedereen.
Maar dat is alles wat ze zijn: een fundament. Frameworks, zoals hun naam al doet vermoeden, zijn niet bedoeld om te worden gebruikt als een alles-en-nog-alles-oplossing voor uw UX-behoeften. De enige uitzondering op deze regel kan zijn dat je iets intern ontwikkelt dat het publiek nooit zal zien. Maar zelfs dan ... Het hele idee is om ze verder te brengen, uit te breiden en te veranderen.
De ontwikkelaars van Bootstrap hebben het erg gemakkelijk gemaakt om dit eenvoudig te doen: hun code is modulair; en je kunt individuele componenten van het framework downloaden om te gebruiken zoals je wilt. Ze hebben zelfs een basisaanpassingstool op hun website waarmee u alle variabelen naar behoefte kunt bewerken.
De rest is echter aan ons. En man, sommige echt indrukwekkende ontwerpers en ontwikkelaars zijn opgevoerd door mods en tools te maken die de rest van ons geen excuses laten. Er is geen reden om genoegen te nemen met de standaardwaarden.
Evalueer uw individuele projecten; misschien is de standaard typografie van Bootstrap geschikt voor u, maar het kleurenschema en het raster zijn dat niet, misschien hebt u andere pictogrammen nodig. Identificeer de plaatsen waar Bootstrap tekortschiet van uw behoeften, en bekijk de volgende bronnen.
Bootstrap mods
Dit zijn volwaardige mods die de standaard bootstrap-gebruikersinterface aannemen en veranderen in iets dat bijna onherkenbaar is. Hun gebruik is enigszins specifiek en beperkt; maar als ze aan uw behoeften voldoen, kunnen ze u tijd en geld besparen.
Platte gebruikersinterface
De eerste mod in deze lijst is Platte gebruikersinterface. Uitgebracht door de jongens bij Designmodo , Flat UI bereikte instant populariteit in de ontwerpgemeenschap en met een goede reden: het is prachtig.
Gemaakt voor diegenen die houden van plat ontwerp - in tegenstelling tot Bootstrap's enigszins skeuomorfe neigingen - is elk UI-element vanaf de grond af opnieuw ontworpen met een geheel nieuwe esthetiek.
Met vectorpictogrammen, een nieuw glyph-pictogram, aangepaste gebruikersinterface-elementen (zoals een takenlijst) en meerdere gemakkelijk te wijzigen kleurenschema's, heeft Flat UI me, en waarschijnlijk vele anderen, doen nadenken over hoe Bootstrap eruit kan zien.
Mijn enige stokpaardje voor huisdieren: de tekstgrootte voor uw elementaire alinea-element is een beetje klein voor een website. Om eerlijk te zijn, is het waarschijnlijk precies goed voor een app-interface waar je tekst in vrij kleine ruimtes zou kunnen plaatsen.
Flat UI is gratis, maar u kunt betalen voor een pro-versie met extra elementen, functionaliteit en PSD-bestanden.
Fbootstrapp
Weet je nog hoe ik zei dat sommige van deze mods nogal specifieke use-cases hadden? Nou, ik maakte geen grapje. Fbootstrapp is volledig opnieuw verwerkt om compatibel te zijn met de gebruikersinterface-elementen van Facebook.
Waarom zou iemand dat doen? Nou, in hun eigen woorden: "Fbootstrapp is een toolkit die is ontworpen om de kick-start van Facebook iFrame-apps in beide relevante formaten te starten. Het bevat basis-CSS en HTML voor typografie, formulieren, knoppen, tabellen, rasters, navigatie en meer, gestileerd in de typische Facebook-look en feel. "
Facebook-app-ontwikkelaars, let op: uw werk is nu nog eenvoudiger.
Jumpstart UI-beheerderssjablonen
Bootstrap is misschien bedoeld voor gebruik in toepassingen, maar het heeft een beetje werk nodig als u er een klassieke "admin-interface" mee wilt maken. Jumpstart-gebruikersinterface brengt je drie verschillende sjablonen die dit bewonderenswaardig doen.
UI-pictogrammen voor beheerders, widgetstijlen, plug-ins voor jQuery-gebaseerde gegevensvisualisatie en meer worden samengebracht in schone, aanpasbare en volledig responsieve lay-outs.
Deze mods verschillen echter op één belangrijke manier van de anderen. Er is geen gratis versie; je moet ze meteen betalen. Ze zijn echter niet erg duur: ze variëren tussen $ 15 en $ 20 USD. Voor de enorme hoeveelheid moeite die erin is gestopt, zou ik zeggen dat het de moeite waard is, als ze aan uw specifieke behoeften voldoen.
BootMetro
Sommige mensen houden ervan en velen verafschuwen het met een passie; maar het valt niet te ontkennen dat Windows 8 en zijn Metro UI de designwereld hebben beroerd. Ik kan voor het leven van mij niet echt denken aan een use-case (buiten een soort software-winkel) waar dit soort gebruikersinterface bijzonder nuttig zou zijn. Maar goed, in BootMetro we hebben er een!
Het is gratis en lijkt vrij compleet te zijn, dus kijk er eens bij. Het is misschien niet zo handig voor de meeste mensen, maar het is een interessant code-experiment. (Ik bedoel echt? Bootstrap en Metro? Dat zag ik niet aankomen.)
Bootstrap-aanpassingshulpmiddelen
U wilt dus uw Bootstrap-configuratie aanpassen om beter aan uw UI / UX-behoeften te voldoen. Waar begin je? Nou, je zou direct in de code kunnen duiken. Ik heb dat gedaan. Ik zal het je wel zeggen, het kan ruw zijn.
Als je alle typografie, of de knop en kleuren, of de stijlen op de navbar handmatig wilt wijzigen, ben je er een tijdje. U kunt alle variabelen in de aanpassings-app op de Bootstrap-website bewerken, maar u moet de HEX-codes voor alle kleuren kennen en u krijgt geen visuele feedback wanneer u wijzigingen aanbrengt.
Gelukkig voor ons zijn er nogal wat Bootstrap-thema-makers die specifiek voor dit doel zijn gemaakt. Dit zijn de twee beste die ik tot nu toe heb gevonden.
StyleBootstrap
Als je de lelijke interface kunt negeren, StyleBootstrap is een krachtige tool voor het bewerken van de meeste standaard UI-elementen die u in het kader zult vinden. Als je snel aan de slag wilt en alleen de meest voor de hand liggende dingen wilt veranderen, dan is dit de plek om te beginnen.
Bootstrap Magic
Bootstrap Magic is de tool om te gebruiken als je een grondige rebranding van het framework wilt doen. Het heeft een mooiere, eenvoudigere interface en biedt je de mogelijkheid om veel meer elementen te tweaken dan StyleBootstrap. Wees gewaarschuwd, hoewel ... dit duurt langer. Dat gezegd hebbende, het zou nog steeds niet zo lang duren als het alles handmatig zou veranderen.
Add-ons & fragmenten
Het volstaat om te zeggen dat er dingen zijn die Bootstrap niet heeft die je misschien handig vindt. Om te beginnen hebben we pictogrammen.
Font Awesome
De glyph-pictogrammen van Bootstrap zijn cool, maar beperkt. Je hebt donkere iconen, dan heb je lichte iconen, allemaal ingesteld in een leuke kleine sprite-afbeelding. Pictogramlettertypen zijn echter veel veelzijdiger. Alles wat u kunt doen om met CSS3 te sms'en, kunt u doen met deze pictogrammen. Verander de grootte, de kleur, geef ze een slagschaduw; het is letterlijk net zo eenvoudig als het schrijven van CSS. Met ongeveer 361 iconen op het moment van dit schrijven, Font Awesome is de moeite van het bekijken waard.
Bootsnipp
Bootsnipp is een bibliotheek met HTML-fragmenten die zijn ontworpen om met Bootstrap te werken, vermoedelijk zonder extra bibliotheken toe te voegen. Fragmenten zijn onder meer: aanmeldingsformulieren en aanmeldingsformulieren met tabs, carrousels, betere agenda's, een e-mailinterface die lijkt op Gmail, een gebruikersinterface voor mediaspelers en meer.
Als je vastzit in het proberen elementen te vinden in je gebruikersinterface, kijk dan eens in de Bootsnipp-bibliotheek. Als ze niet precies hebben wat u nodig heeft, kunnen de codevoorbeelden u helpen erachter te komen hoe dit moet.
Dat is niet alles ...
Omdat het favoriete kader van Twitter zo veel wordt toegepast als het is, is er waarschijnlijk meer informatie over het aanpassen van Bootstrap dan welke lijst dan ook kan bevatten.
Per slot van rekening is dat waar het internet voor is, toch? Dat en ... katten.
Heb je Bootstrap aangepast? Heb je het handmatig gedaan of een bron gebruikt? Laat het ons weten in de comments.