Sich nähern

Während die Seiten „Erste Schritte“ eine Einführung in das Projekt und seine Angebote bieten, konzentriert sich dieses Dokument darauf, warum wir die Dinge tun, die wir in Bootstrap tun. Es erklärt unsere Philosophie, im Web aufzubauen, damit andere von uns lernen, mit uns beitragen und uns helfen können, uns zu verbessern.

Sehen Sie etwas, das nicht richtig klingt oder vielleicht besser gemacht werden könnte? Eröffnen Sie ein Problem – wir würden gerne mit Ihnen darüber diskutieren.

Zusammenfassung

Wir werden uns im Laufe der Zeit ausführlicher mit jedem dieser Themen befassen, aber auf hoher Ebene leitet sich unser Ansatz von Folgendem ab.

• Die Komponenten sollten reaktionsschnell und mobil sein
• Komponenten sollten mit einer Basisklasse erstellt und über Modifikatorklassen erweitert werden
• Komponentenzustände sollten einer gemeinsamen Z-Index-Skala gehorchen
• Bevorzugen Sie nach Möglichkeit eine HTML- und CSS-Implementierung gegenüber JavaScript
• Verwenden Sie nach Möglichkeit Dienstprogramme anstelle von benutzerdefinierten Stilen
• Vermeiden Sie nach Möglichkeit strenge HTML-Anforderungen (untergeordnete Selektoren)

Reaktionsschnell

Die reaktionsschnellen Stile von Bootstrap sind so konzipiert, dass sie reaktionsschnell sind, ein Ansatz, der oft als Mobile-First bezeichnet wird . Wir verwenden diesen Begriff in unseren Dokumenten und stimmen ihm weitgehend zu, aber manchmal kann er zu weit gefasst sein. Während nicht jede Komponente in Bootstrap vollständig reaktionsfähig sein muss , geht es bei diesem reaktionsschnellen Ansatz darum, CSS-Überschreibungen zu reduzieren, indem Sie dazu gedrängt werden, Stile hinzuzufügen, wenn der Darstellungsbereich größer wird.

Bei Bootstrap sehen Sie dies am deutlichsten in unseren Medienabfragen. In den meisten Fällen verwenden wir min-widthAbfragen, die an einem bestimmten Breakpoint zu gelten beginnen und sich bis zu den höheren Breakpoints fortsetzen. Beispielsweise .d-nonegilt a von min-width: 0bis unendlich. .d-md-noneAb dem mittleren Haltepunkt gilt dagegen a .

Manchmal werden wir verwenden, max-widthwenn die inhärente Komplexität einer Komponente dies erfordert. Manchmal sind diese Außerkraftsetzungen funktional und mental klarer zu implementieren und zu unterstützen, als die Kernfunktionalität unserer Komponenten neu zu schreiben. Wir bemühen uns, diesen Ansatz einzuschränken, werden ihn aber von Zeit zu Zeit verwenden.

Klassen

Abgesehen von unserem Reboot, einem browserübergreifenden Normalisierungs-Stylesheet, zielen alle unsere Stile darauf ab, Klassen als Selektoren zu verwenden. Das bedeutet, sich von Typselektoren (z. B. input[type="text"]) und fremden Elternklassen (z. B. ) fernzuhalten .parent .child, die Stile zu spezifisch machen, um sie einfach zu überschreiben.

Daher sollten Komponenten mit einer Basisklasse erstellt werden, die gemeinsame, nicht zu überschreibende Eigenschaft-Wert-Paare enthält. Zum Beispiel .btnund .btn-primary. Wir verwenden .btnfür alle gängigen Stile wie display, paddingund border-width. Wir verwenden dann Modifikatoren .btn-primary, um die Farbe, die Hintergrundfarbe, die Rahmenfarbe usw. hinzuzufügen.

Modifikatorklassen sollten nur verwendet werden, wenn mehrere Eigenschaften oder Werte über mehrere Varianten hinweg geändert werden müssen. Modifikatoren sind nicht immer notwendig, stellen Sie also sicher, dass Sie tatsächlich Codezeilen sparen und unnötige Überschreibungen vermeiden, wenn Sie sie erstellen. Gute Beispiele für Modifikatoren sind unsere Themenfarbklassen und Größenvarianten.

z-Index-Skalen

Es gibt zwei z-indexSkalen in Bootstrap – Elemente innerhalb einer Komponente und Überlagerungskomponenten.

Komponentenelemente

• Einige Komponenten in Bootstrap werden mit überlappenden Elementen erstellt, um doppelte Rahmen zu vermeiden, ohne die borderEigenschaft zu ändern. Beispielsweise Schaltflächengruppen, Eingabegruppen und Paginierung.
• Diese Komponenten teilen sich eine Standardskala z-indexvon 0bis 3.
• 0ist default (anfänglich), 1ist :hover, 2ist :active/ .activeund 3ist :focus.
• Dieser Ansatz entspricht unseren Erwartungen der höchsten Benutzerpriorität. Wenn ein Element fokussiert ist, ist es sichtbar und hat die Aufmerksamkeit des Benutzers. Aktive Elemente sind zweithöchste, da sie den Zustand anzeigen. Schweben ist die dritthöchste, weil es die Absicht des Benutzers anzeigt, aber fast alles kann mit der Maus bewegt werden.

Komponenten überlagern

Bootstrap enthält mehrere Komponenten, die als eine Art Overlay fungieren. Dazu gehören, in der Reihenfolge der höchsten z-index, Dropdowns, feste und fixierte Navigationsleisten, Modale, Tooltips und Popovers. Diese Komponenten haben ihre eigene z-indexSkala, die bei beginnt 1000. Diese Startnummer wurde willkürlich gewählt und dient als kleiner Puffer zwischen unseren Stilen und den benutzerdefinierten Stilen Ihres Projekts.

Jede Overlay-Komponente erhöht ihren z-indexWert geringfügig, sodass gemeinsame UI-Prinzipien es ermöglichen, dass benutzerorientierte oder schwebende Elemente jederzeit sichtbar bleiben. Zum Beispiel ist ein Modal das Blockieren von Dokumenten (z. B. können Sie keine andere Aktion außer der Aktion des Modals ausführen), also platzieren wir das über unseren Navigationsleisten.

Erfahren Sie mehr dazu auf unserer z-indexLayoutseite .

HTML und CSS über JS

Wann immer möglich, schreiben wir lieber HTML und CSS als JavaScript. Im Allgemeinen sind HTML und CSS produktiver und für mehr Menschen aller Erfahrungsstufen zugänglich. HTML und CSS sind in Ihrem Browser auch schneller als JavaScript, und Ihr Browser stellt Ihnen im Allgemeinen viele Funktionen zur Verfügung.

Dieses Prinzip ist unsere erstklassige JavaScript-API, die dataAttribute verwendet. Sie müssen fast kein JavaScript schreiben, um unsere JavaScript-Plug-ins zu verwenden; Schreiben Sie stattdessen HTML. Lesen Sie mehr dazu auf unserer JavaScript-Übersichtsseite .

Schließlich bauen unsere Stile auf den grundlegenden Verhaltensweisen gängiger Webelemente auf. Wann immer möglich, verwenden wir lieber das, was der Browser bereitstellt. Beispielsweise können Sie .btnfast jedem Element eine Klasse zuweisen, aber die meisten Elemente bieten keinen semantischen Wert oder keine Browserfunktionalität. Also verwenden wir stattdessen <button>s und <a>s.

Gleiches gilt für komplexere Bauteile. Während wir unser eigenes Formularvalidierungs-Plug-in schreiben könnten, um Klassen zu einem übergeordneten Element basierend auf dem Zustand einer Eingabe hinzuzufügen, wodurch wir den Text z .:valid:invalid

Dienstprogramme

Utility-Klassen – ehemals Helfer in Bootstrap 3 – sind ein mächtiger Verbündeter im Kampf gegen CSS-Bloat und schlechte Seitenleistung. Eine Utility-Klasse ist typischerweise eine einzelne, unveränderliche Paarung aus Eigenschaft und Wert, die als Klasse ausgedrückt wird (z . B. .d-blockrepräsentiert display: block;). Ihr Hauptanreiz ist die Geschwindigkeit beim Schreiben von HTML und die Begrenzung der Menge an benutzerdefiniertem CSS, das Sie schreiben müssen.

Insbesondere in Bezug auf benutzerdefiniertes CSS können Dienstprogramme helfen, die zunehmende Dateigröße zu bekämpfen, indem sie Ihre am häufigsten wiederholten Eigenschaft-Wert-Paare in einzelne Klassen reduzieren. Dies kann dramatische Auswirkungen auf Ihre Projekte haben.

Flexibles HTML

Obwohl dies nicht immer möglich ist, bemühen wir uns, in unseren HTML-Anforderungen für Komponenten nicht allzu dogmatisch zu sein. Daher konzentrieren wir uns in unseren CSS-Selektoren auf einzelne Klassen und versuchen, unmittelbar untergeordnete Selektoren ( >) zu vermeiden. Dies gibt Ihnen mehr Flexibilität bei Ihrer Implementierung und hilft, unser CSS einfacher und weniger spezifisch zu halten.

Code-Konventionen

Code Guide (vom Bootstrap-Mitschöpfer @mdo) dokumentiert, wie wir unser HTML und CSS über Bootstrap schreiben. Es legt Richtlinien für die allgemeine Formatierung, vernünftige Standardeinstellungen, Eigenschafts- und Attributreihenfolgen und mehr fest.

Wir verwenden Stylelint , um diese Standards und mehr in unserem Sass/CSS durchzusetzen. Unsere benutzerdefinierte Stylelint -Konfiguration ist Open Source und steht anderen zur Verwendung und Erweiterung zur Verfügung.

Wir verwenden vnu-jar , um Standard- und semantisches HTML durchzusetzen und häufige Fehler zu erkennen.