Share
Jeder Designer liebt Knöpfe. Es ist eine Tatsache, die durch die Wertschätzung von Projekten wie Unicorn UI (die zum Zeitpunkt dieses Schreibens nur Buttons unterstützt und fast 4.000 Stargazers auf GitHub hat) bekannt gemacht wurde..
Aber kein Designer passt in eine Box. Wir alle haben unsere eigenen Wünsche und Bedürfnisse aus einem Button-Rahmen heraus. Wir alle möchten bestimmte Arten von Schaltflächen sehen, und vielleicht sind wir wirklich gut darin geworden, eine bestimmte Art von Schaltflächen zu entwerfen. Warum machen wir nicht unser eigenes Button-UI-Kit von Grund auf?
Die einfache und dennoch sehr effektive Basis für unser Button-UI-FrameworkZuerst müssen wir ermitteln, welche Elemente unsere Buttons als Ziel haben können. In unserem Fall stellen wir sicher, dass Anker, Eingaben oder Schaltflächen-Tags über unser UI-Kit gestaltet werden können. Dazu erstellen wir ein Markup:
Taste
Ich benutze ein Attribut, um das zu tun, einfach weil es meiner Meinung nach besser aussieht. Es ist vielleicht nicht besonders zukunftssicher (was ist, wenn das W3C eine neue Spezifikation für die UI-Attribute einführt?), Aber wenn Sie sich diesbezüglich Sorgen machen, können Sie einen Namensraum angeben ui als so etwas cory-ui In diesem Fall würde ich wetten, dass Sie vor neuen W3C-Einführungen sicher sind. Wenn Sie wirklich, wirklich besorgt sind oder sich für die Performance begeistern, können Sie Klassen verwenden und denselben Effekt erzielen. Es kann jedoch vorkommen, dass die Klassen sich an bestimmten Punkten überschreiben.
Wir werden den Stylus CSS-Präprozessor verwenden, um zu vermeiden, dass eine Million geschweifte Klammern geschrieben werden muss. Daher sieht unser Code ohne Wiederholung sauber und sauber aus. Selbst wenn Sie mit Stylus nicht vertraut sind, sollten Sie in der Lage sein, einen anderen Präprozessor- oder Vanille-CSS zu verwenden.
Als Erstes setzen wir einige Standardstile auf [ui * = "button"] Wähler. In diesem Kontext verwenden wir den Sternselektor, sodass Sie an jeder beliebigen Stelle Ihres Attributs einen Button hinzufügen können.
[ui * = "button"] Cursor: Zeigerübergang: alle 200ms Leichtigkeitsgrenze: 0 Hintergrund: dunkler (Weiß, 5%) Farbe: Aufhellen (Schwarz, 20%) Polsterung: .5em 1.75em Textdekoration: keine &: schwebeflug hintergrund: dunkler (weiß, 10%)
Nun der lustige Teil. Beginnen wir mit dem Hinzufügen der Attribute, von denen wir glauben, dass sie sie verwenden könnten. Ich weiß zum Beispiel, dass ich die Möglichkeit haben möchte, Schaltflächen in verschiedenen Größen zu haben, also füge ich meinen Schaltflächen weitere Größen hinzu:
Taste
[ui * = "button"] Cursor: Zeigerübergang: alle 200ms Leichtigkeitsgrenze: 0 Hintergrund: dunkler (Weiß, 5%) Farbe: Aufhellen (Schwarz, 20%) Polsterung: .5em 1.75em Textdekoration: keine &: hover Hintergrund: dunkler (weiß, 10%) & [ui * = "small"] Abstand: .25em 1em Schriftgröße: .75em & [ui * = "large"] Abstand: .75em 2em Schriftgröße: 1.25em & [ui * = "huge"] padding: 1em 3em Schriftgröße: 1.25em
Beachten Sie, wie wir sind anhängen die Attribute auf unseren Button-Attribut-Selector? Dies bedeutet, dass diese Attribute für Elemente, die nicht enthalten sind, nicht funktionieren ui = "button". Dies ist ein guter Weg, um unsere Änderungen auf verschiedene Attribute zu beschränken, die wir hinzufügen möchten.
Machen wir weiter und fügen Sie unseren Schaltflächen eine Rundung hinzu:
Taste
& [ui * = "round"] border-radius: 5px & [ui * = "pill"] border-radius: 999em
Der kleinste Knopf hat abgerundete Ecken, der zweite ist eine "Pille"Inzwischen sollten Sie sich mit diesem Konzept besser vertraut machen. Fügen wir einige Farben in Form von Variablen hinzu:
Taste
color-primary = blau color-danger = rot [ui * = "button"] Cursor: Zeigerübergang: alle 200ms Leichtigkeitsgrenze: 0 Hintergrund: dunkler (Weiß, 5%) Farbe: Aufhellen (Schwarz, 20%) Polsterung:. 5em 1.75em Textdekoration: keine &: Hover-Hintergrund: dunkler (weiß, 10%) & [ui * = "small"] Polsterung: .25em 1em Schriftgröße: .75em & [ui * = "large"] Polsterung : .75em 2em font-size: 1.25em & [ui * = "huge"] padding: 1em 3em font-size: 1.25em & [ui * = "round"] border-radius: 5px & [ui * = "pill "] border-radius: 999em & [ui * =" primary "] Hintergrund: Primärfarbe der Farbe: weiß & [ui * =" danger "] Hintergrund: Gefahrfarbe der Farbe: weiß
Das ist der Kern davon! Fügen Sie beliebig viele Regeln und Eigenschaften hinzu. Sie können Ihren Schaltflächen, interessanten Hover-Status und Animationen sogar komplexe Themen hinzufügen. Teilen Sie uns Ihr Button UI-Framework in den Kommentaren mit!
Accentsconagua