Share
Hver designer elsker knapper. Det er et faktum som er gjort kjent ved verdsettelse av prosjekter som Unicorn UI (som på tidspunktet for denne skrivingen bare støtter knapper og har nesten 4000 Stargazers på GitHub).
Men ingen designer passer i en boks. Vi har alle våre egne ønsker og trenger ut av en knapp ramme. Vi ønsker alle å se visse typer knapper, og kanskje har vi blitt veldig gode til å designe en bestemt type knapp. Så hvorfor lager vi ikke vår egen knapp UI-sett fra bunnen av?
Den enkle, men svært effektive basen for vårt UI-rammeverkFørst må vi identifisere hvilke elementer våre knapper vil kunne målrette mot. I vårt tilfelle, la oss forsikre oss om at noen anker-, inngangs- eller knappetiketter kan styles via vårt UI-sett. For å gjøre dette, la oss lage noe oppslag:
Knapp
Jeg bruker et attributt for å gjøre dette bare fordi jeg synes det ser bedre ut. Det kan ikke være veldig fremtidsbestemt (hva hvis W3C introduserer en ny spesifikasjon for ui attributter?), Men hvis du er bekymret for dette kan du navneplass ui som noe som Cory-ui I så fall vil jeg satse på at du er trygg fra nye W3C-introduksjoner. Hvis du virkelig, virkelig er bekymret for det, eller er gal på ytelse, kan du bruke klasser og oppnå samme effekt, men det kan føre til problemer med klasser som overstyrer hverandre på bestemte punkter.
Vi bruker Stylus CSS preprosessoren for å unngå å skrive ut en million krøllete braces og så ser vår kode ut pent og ren uten repetisjon. Selv om du ikke er kjent med Stylus, bør du kunne følge med ved hjelp av en annen preprosessor eller vanilje CSS.
Først, la oss stille noen standardstilter til [Ui * = "button"] velgeren. Vi bruker stjernevalgeren i denne konteksten, slik at du kan legge til "knapp" hvor som helst i attributten din, og den vil fungere.
[ui * = "button"] markør: pekerovergang: alle 200ms lette grensen: 0 bakgrunn: mørkere (hvit, 5%) farge: lysere (svart, 20%) polstring: .5em 1.75em tekstdekorasjon: ingen & sveve bakgrunn: mørkere (hvit, 10%)
Nå den morsomme delen. La oss begynne å legge til hva som helst attributter vi tror vi kan bruke. For eksempel, jeg vet at jeg vil ha muligheten til å ha knapper av forskjellige størrelser, så jeg legger i størrelser til knappene mine:
Knapp
[ui * = "button"] markør: pekerovergang: alle 200ms lette grensen: 0 bakgrunn: mørkere (hvit, 5%) farge: lysere (svart, 20%) polstring: .5em 1.75em tekstdekorasjon: ingen & hover bakgrunn: mørkere (hvit, 10%) og [ui * = "liten"] polstring: .25em 1em skriftstørrelse: .75em & [ui * = "stor"] polstring: .75em 2em skriftstørrelse: 1.25em & [ui * = "stor"] polstring: 1em 3em skriftstørrelse: 1.25em
Legg merke til hvordan vi er føye attributter på vår knapp attributtvelger? Dette betyr at disse attributter ikke fungerer for elementer som ikke har ui = "button". Dette er en fin måte å holde våre endringer scoped til ulike attributter vi kanskje vil legge til.
La oss fortsette å legge til en avrunding til knappene våre:
Knapp
& [ui * = "round"] border-radius: 5px & [ui * = "pille"] grense-radius: 999em
Den minste knappen har avrundede hjørner, den andre har blitt en "pille"Nå skal du bli kjent med dette konseptet. La oss legge til noen farger i form av variabler:
Knapp
farger primær = blå farger = rød [ui * = "knapp"] markør: pekerovergang: alle 200ms lette grensen: 0 bakgrunn: mørkere (hvit, 5%) farge: lysere (svart, 20%) polstring:. 5em 1.75em tekst-dekorasjon: ingen &: svever bakgrunn: mørkere (hvit, 10%) og [ui * = "liten"] polstring: .25em 1em skriftstørrelse: .75em & [ui * = "stor"] polstring : .75em 2em skriftstørrelse: 1.25em & [ui * = "enorm"] polstring: 1em 3em fontstørrelse: 1.25em & [ui * = "round"] border-radius: 5px & [ui * = "pille "] border-radius: 999em & [ui * =" primary "] bakgrunn: farger primær farge: hvit og [ui * =" fare "] bakgrunn: farger fargen farge: hvit
Det er kjennetegnet av det! Legg til så mange regler og egenskaper som du vil. Du kan til og med legge til komplekse temaer til knappene dine, interessante hover-tilstander og animasjoner. Del din knapp UI ramme med oss i kommentarene!
Accentsconagua