So ändern Sie Bootstrap einfach und effektiv
Bootstrap ist bei weitem nicht das einzige Framework für HTML / CSS-Interfaces, aber ich denke, es ist sicher, dass es das Spiel verändert hat. Dieser im Küchenbecken enthaltene Code-Stapel hat das Design und die Entwicklung vieler Apps (und Websites) wesentlich vereinfacht und das riesige HTML-Framework als Nebenprodukt populär gemacht.
Leider appelliert das bloße Ausmaß seines Funktionsumfangs an die faulen Aspekte der menschlichen Natur, und viele der Leute, die es verwenden, bleiben bei den Standardwerten. Nun, wohlgemerkt, die Standardstile und das Layout-Raster sind in keiner Hinsicht schlecht. Sie sind das Ergebnis von viel harter Arbeit und umfangreichen Tests durch das Twitter-Team. Sie sind so solide eine Grundlage, auf der Sie aufbauen können.
Aber das ist alles, was sie sind: eine Stiftung. Frameworks sollen, wie ihr Name schon sagt, nicht als eine allumfassende Lösung für Ihre UX-Bedürfnisse dienen. Die einzige Ausnahme von dieser Regel könnte sein, dass Sie etwas internes entwickeln, das die Öffentlichkeit niemals sehen wird. Aber selbst dann ... Die Idee ist, sie weiter zu führen, zu erweitern und zu verändern.
Die Entwickler von Bootstrap haben tatsächlich sehr gute Arbeit geleistet, um dies einfach zu machen: Ihr Code ist modular; und Sie können einzelne Komponenten des Frameworks herunterladen, die Sie verwenden können, wie Sie es für richtig halten. Sie haben sogar eine grundlegende Anpassungstool auf ihrer Website, mit der Sie alle Variablen nach Bedarf bearbeiten können.
Der Rest liegt jedoch bei uns. Und man, einige wirklich beeindruckende Designer und Entwickler, haben sich durch die Entwicklung von Mods und Tools, die den Rest von uns ohne Ausreden lassen, verstärkt. Es gibt keinen Grund, sich mit den Vorgaben zufrieden zu geben.
Bewerten Sie Ihre individuellen Projekte; vielleicht ist Bootstrap's Standard-Typografie das Richtige für dich, aber das Farbschema und das Raster sind nicht, vielleicht brauchst du andere Symbole. Identifizieren Sie die Orte, an denen Bootstrap Ihre Anforderungen nicht erfüllt, und sehen Sie sich die folgenden Ressourcen an.
Bootstrap Mods
Dies sind vollwertige Mods, die die grundlegende Bootstrap-Benutzeroberfläche verwenden und sie in etwas fast Unkenntliches verwandeln. Ihre Verwendungen sind etwas spezifisch und begrenzt; Aber wenn sie Ihre Bedürfnisse erfüllen, können sie Ihnen Zeit und Geld sparen.
Flache Benutzeroberfläche
Der erste Mod auf dieser Liste ist Flache Benutzeroberfläche Veröffentlicht von den Jungs von Designmodo , Flat UI erreichte sofortige Popularität in der Design-Community und das aus gutem Grund: es ist wunderschön.
Entworfen für diejenigen, die flaches Design lieben - im Gegensatz zu Bootstrap's etwas skeuomorphen Tendenzen - wurde jedes UI-Element von Grund auf mit einer brandneuen Ästhetik neu entworfen.
Mit Vektor-Icons, einer neuen Glyphe-Icon-Schriftart, benutzerdefinierten UI-Elementen (wie einer To-Do-Liste) und mehreren einfach zu ändernden Farbschemata hat mich Flat UI und wahrscheinlich viele andere dazu gebracht, zu überdenken, wie Bootstrap aussehen kann.
Meine ein Pet ärgern: Die Textgröße für Ihre grundlegende Absatzelement ist ein wenig klein für eine Website. Um fair zu sein, ist es wahrscheinlich genau das Richtige für eine App-Oberfläche, wo Sie Text in eher kleine Bereiche einfügen können.
Flat UI ist kostenlos, aber Sie können für eine Pro-Version mit zusätzlichen Elementen, Funktionen und PSD-Dateien bezahlen.
Fbootstrapp
Erinnerst du dich, wie ich gesagt habe, dass einige dieser Mods ziemlich spezifische Anwendungsfälle hatten? Nun, ich machte keine Witze. Fbootstrapp wurde vollständig überarbeitet, um mit den Benutzeroberflächenelementen von Facebook kompatibel zu sein.
Warum sollte jemand das tun? Nun, mit ihren eigenen Worten: "Fbootstrapp ist ein Toolkit, mit dem die Entwicklung von Facebook iFrame-Apps in beiden relevanten Größen gestartet werden kann. Es enthält Basis-CSS und HTML für Typografie, Formulare, Schaltflächen, Tabellen, Raster, Navigation und mehr, gestaltet im typischen Facebook-Look & Feel. "
Facebook-App-Entwickler, aufgepasst: Dein Job ist jetzt einfacher geworden.
Jumpstart UI Admin-Vorlagen
Bootstrap ist möglicherweise für die Verwendung in Anwendungen gedacht, aber es erfordert ein wenig Arbeit, wenn Sie beabsichtigen, eine klassische "Admin-Schnittstelle" damit zu erstellen. Jumpstart-Benutzeroberfläche bringt Ihnen drei verschiedene Vorlagen, die das bewundernswert machen.
Admin-UI-Symbole, Widget-Stile, jQuery-basierte Datenvisualisierungs-Plugins und mehr werden in sauberen, anpassbaren und vollständig reaktionsfähigen Layouts zusammengeführt.
Diese Mods unterscheiden sich jedoch von den anderen auf eine wichtige Weise. Es gibt keine kostenlose Version; Sie müssen für sie direkt bezahlen. Sie sind jedoch nicht sehr teuer: Sie liegen zwischen $ 15 und $ 20 USD. Für die schiere Menge an Aufwand, die in ihnen steckt, würde ich sagen, es ist es wert, wenn sie Ihre spezifischen Bedürfnisse erfüllen.
BootMetro
Manche Leute lieben es, und viele verabscheuen es mit einer Leidenschaft; aber es ist nicht zu leugnen, dass Windows 8 und seine Metro UI in der Designwelt Aufsehen erregt haben. Ich, für das Leben von mir, kann nicht wirklich an irgendeinen Anwendungsfall denken (außerhalb irgendeiner Art von Softwareladen), wo diese Art von UI besonders nützlich wäre. Aber hey, in BootMetro wir haben einen!
Es ist kostenlos und scheint sehr Feature-Complete, also schau es dir an. Für die meisten Leute ist es vielleicht nicht besonders nützlich, aber es ist ein interessantes Code-Experiment. (Ich meine wirklich? Bootstrap und Metro? Ich habe das nicht kommen sehen.)
Bootstrap-Anpassungswerkzeuge
Daher möchten Sie Ihr Bootstrap-Setup so anpassen, dass es Ihren UI / UX-Anforderungen besser entspricht. Wo fängst du an? Nun, Sie könnten direkt in den Code eintauchen. Ich habe das getan. Ich werde es dir sagen, aber es kann hart sein.
Wenn Sie die gesamte Typografie oder die Schaltflächen- und Linkfarben oder die Navigationsleistenstile manuell ändern möchten, werden Sie eine Weile dort sein. Sie können alle Variablen in der Anpassungs-App auf der Bootstrap-Website bearbeiten, aber Sie müssen die HEX-Codes für alle Farben kennen und Sie erhalten kein visuelles Feedback, wenn Sie Änderungen vornehmen.
Zum Glück für uns gibt es einige Bootstrap Theme Maker, die speziell für diesen Zweck erstellt wurden. Dies sind die zwei besten, die ich bisher gefunden habe.
StilBootstrap
Wenn Sie die unbeholfene Schnittstelle ignorieren können, StilBootstrap ist ein leistungsstarkes Werkzeug zum Bearbeiten der meisten Standard-UI-Elemente, die Sie im Framework finden. Wenn Sie schnell anfangen wollen, nur die offensichtlichsten Dinge ändern, dann ist dies der richtige Ort für Sie.
Bootstrap-Magie
Bootstrap-Magie ist das Werkzeug, das Sie verwenden können, wenn Sie ein tiefgehendes Rebranding des Frameworks durchführen möchten. Es hat eine schönere, einfachere Schnittstelle und gibt Ihnen die Möglichkeit, weit mehr Elemente als StyleBootstrap zu optimieren. Sei gewarnt, aber ... das wird länger dauern. Das heißt, es würde immer noch nicht annähernd so lange dauern, wie es alles manuell ändern würde.
Add-ons & Schnipsel
Es genügt zu sagen, dass es Dinge gibt, die Bootstrap nicht hat, die Sie nützlich finden könnten. Zu Beginn haben wir Symbole.
Schrift Awesome
Bootstraps Symbole sind cool, aber begrenzt. Sie haben dunkle Symbole, dann haben Sie helle Symbole, alles in einem netten kleinen Sprite-Bild. Icon-Fonts sind jedoch vielseitiger. Alles, was Sie tun können, um mit CSS3 zu schreiben, können Sie mit diesen Symbolen tun. Ändern Sie die Größe, die Farbe, geben Sie ihnen einen Schlagschatten; Es ist buchstäblich so einfach wie das Schreiben von CSS. Mit ungefähr 361 Symbolen zu der Zeit dieses Schreibens, Schrift Awesome Es lohnt sich, es auszuprobieren.
Bootsnipp
Bootsnipp ist eine Bibliothek von HTML-Snippets, die mit Bootstrap arbeiten, vermutlich ohne zusätzliche Bibliotheken hinzuzufügen. Zu den Snippets gehören: Anmelde- und Anmeldeformulare für Tabs, Karussells, bessere Kalender, eine E-Mail-Oberfläche, die Gmail ähnelt, eine Media Player-Benutzeroberfläche und vieles mehr.
Wenn Sie herausfinden möchten, wie Sie Elemente in Ihrer Benutzeroberfläche zusammensetzen können, werfen Sie einen Blick in die Bootsnipp-Bibliothek. Wenn sie nicht genau das haben, was Sie brauchen, können Ihnen die Codebeispiele helfen, herauszufinden, wie Sie es tun.
Das ist nicht alles ...
Da das bevorzugte Framework von Twitter so weit verbreitet ist, wie es ist, gibt es wahrscheinlich mehr Informationen darüber, wie Bootstrap angepasst werden kann, als irgendeine Liste enthalten kann.
Schließlich ist das das Internet, oder? Das und ... Katzen.
Hast du Bootstrap modifiziert? Haben Sie das manuell gemacht oder eine Ressource verwendet? Lassen Sie es uns in den Kommentaren wissen.