Primer CSS ist die CSS-Implementierung des GitHub-Design-Systems, das eine gemeinsame Sprache und einen standardisierten Ansatz für die Erstellung kohärenter Benutzeroberflächen bietet. In diesem Artikel werden wir Primer CSS vorstellen, seine wichtigsten Konzepte erläutern und zeigen, wie man es verwendet.
Primer CSS kann über npm oder Yarn installiert werden, indem man den folgenden Befehl ausführt: npm install @primer/css. Anschließend muss man Sass einrichten und Primer CSS in die Haupt-SCSS-Datei importieren, indem man den folgenden Befehl ausführt: @import "@primer/css/index.scss";.
Primer CSS besteht aus drei Hauptbereichen: Utilities, Components und Marketing-Styles. Um Primer CSS zu verstehen, müssen wir die Breakpoints, das Spacing und das Theming verstehen.
Primer CSS verwendet vier Breakpoints, die auf einer min-width-Eigenschaft in der Medienabfrage basieren. Die Breakpoints sind sm, md, lg und xl, die eine minimale Breite von 544px, 768px, 1012px und 1280px darstellen.
Primer CSS bietet eine einfache Möglichkeit, das Theme einer Website zu ändern. Es gibt zwei Hauptthemen: Light und Dark. Diese können durch das Hinzufügen von Datenattributen zum <html>-Tag festgelegt werden.
Die Primer CSS Utilities umfassen eine Vielzahl von Stilen, die häufig in der Entwicklung von Benutzeroberflächen verwendet werden. Dazu gehören:
Primer CSS bietet eine Vielzahl von Komponenten, die für die Entwicklung von Benutzeroberflächen verwendet werden können. Dazu gehören:
Um Primer CSS in der Praxis zu demonstrieren, werden wir ein einfaches Landing-Page erstellen. Wir werden ein Container-Element erstellen, ein Hero-Section hinzufügen und dann die verschiedenen Abschnitte erstellen.
Primer CSS ähnelt dem BEM-Modell, aber es gibt einige wichtige Unterschiede. Primer CSS verwendet eine andere Syntax und bietet eine Vielzahl von Utilities und Komponenten, die es einfacher machen, Benutzeroberflächen zu entwickeln.
Primer CSS ist ein leistungsfähiges Design-System, das es Entwicklern ermöglicht, kohärente Benutzeroberflächen zu erstellen. Durch seine einfache Installation und Einrichtung, seine flexiblen Utilities und Komponenten und seine einfache Theming-Möglichkeiten ist Primer CSS eine großartige Wahl für Entwickler, die eine professionelle Benutzeroberfläche erstellen möchten.
* KI-Zusammenfassungen können Fehler enthalten. Alle Angaben ohne Gewähr.