Share
Varje designer älskar knappar. Det är ett faktum som uppmärksammats av uppskattning av projekt som Unicorn UI (som vid tidpunkten för detta skrivande endast stöder knappar och har nästan 4000 Stargazers på GitHub).
Men ingen designer passar i en låda. Vi har alla våra egna önskemål och behov av en knappram. Vi vill alla se vissa typer av knappar, och kanske har vi blivit riktigt bra på att utforma en viss typ av knapp. Så varför gör vi inte vår egen knapp UI-kit från början?
Den enkla, men ändå väldigt effektiva basen för vår UI-ramFörst måste vi identifiera vilka element våra knappar kommer att kunna rikta in. I vårt fall, låt oss se till att någon ankare, ingång eller knapp tagg kan stylas via vårt UI-kit. För att göra det här, låt oss skapa lite markup:
Knapp
Jag använder ett attribut för att göra det bara för att jag tycker att det ser bättre ut. Det kanske inte är fruktansvärt framtidssäker (vad händer om W3C introducerar en ny specifikation för ui-attribut?) Men om du är orolig för detta kan du namnrymd ui som något liknande cory-ui i vilket fall jag skulle satsa du är säker från nya W3C introduktioner. Om du verkligen är orolig för det, eller är galen på prestanda kan du använda klasser och uppnå samma effekt, men du kan komma på problem med klasser som tvingar varandra på vissa punkter.
Vi använder Stylus CSS preprocessorn för att undvika att skriva ut en miljon krullningsstrumpor och så ser vår kod snygg och ren ut utan repetition. Även om du inte känner till Stylus bör du kunna följa med en annan preprocessor eller vanilj CSS.
Låt oss först ange några standardstilar till [Ui * = "button"] väljare. Vi använder stjärnväljaren i det här sammanhanget så att du kan lägga till "knapp" någonstans i ditt attribut och det kommer att fungera.
[ui * = "knapp"] markör: pekarövergång: alla 200ms lätta gränsen: 0 bakgrund: mörkare (vit, 5%) färg: ljusare (svart, 20%) vaddering: .5em 1.75em textutsmyckning: ingen & sväva bakgrund: mörkare (vit, 10%)
Nu den roliga delen. Låt oss börja lägga till vilka attribut vi tycker att vi kan använda. Till exempel vet jag att jag vill ha möjlighet att ha knappar av olika storlekar, så jag lägger till i storlekar till mina knappar:
Knapp
[ui * = "knapp"] markör: pekarövergång: alla 200ms lätta gränsen: 0 bakgrund: mörkare (vit, 5%) färg: ljusare (svart, 20%) vaddering: .5em 1.75em textutsmyckning: ingen & sväva bakgrund: mörkare (vit, 10%) och [ui * = "liten"] vaddering: .25em 1em fontstorlek: .75em & [ui * = "stor"] vaddering: .75em 2em fontstorlek: 1.25em & [ui * = "enorm"] vaddering: 1em 3em fontstorlek: 1.25em
Lägg märke till hur vi är bifogande attributen på vår knapp attribut attribut? Det betyder att dessa attribut inte fungerar för element som inte har ui = "button". Detta är ett bra sätt att hålla våra ändringar scoped till olika attribut som vi kanske vill lägga till.
Låt oss fortsätta och lägga till några avrundningar till våra knappar:
Knapp
& [ui * = "round"] border-radius: 5px & [ui * = "piller"] gränsstråle: 999em
Den minsta knappen har rundade hörn, den andra har blivit ett "piller"Vid det här laget bör du bli mer bekant med detta koncept. Låt oss lägga till några färger i form av variabler:
Knapp
färgprioritär = blå färgfara = röd [ui * = "knapp"] markör: pekareövergång: alla 200m lätta gränsen: 0 bakgrund: mörkare (vit, 5%) färg: ljusare (svart, 20%) vaddering:. 5em 1.75em text-decoration: none &: sväva bakgrund: mörkare (vit, 10%) & [ui * = "liten"] vadderar: .25em 1em fontstorlek: .75em & [ui * = "large"] padding : .75em 2em fontstorlek: 1.25em & [ui * = "enorm"] padding: 1em 3em fontstorlek: 1.25em & [ui * = "round"] border-radius: 5px & [ui * = "piller "] border-radius: 999em & [ui * =" primary "] bakgrund: färgfärg: vit & [ui * =" fara "] bakgrund: färgfara färg: vit
Det är kärnan av det! Lägg till så många regler och egenskaper som du vill. Du kan till och med lägga till komplexa teman till dina knappar, intressanta svävar och animeringar. Dela din knapp UI-ram med oss i kommentarerna!
Accentsconagua