Share
Elke ontwerper houdt van knoppen. Het is een feit dat bekend is geworden door de waardering van projecten zoals Unicorn UI (die op het moment van dit schrijven alleen knoppen ondersteunt en bijna 4.000 Stargazers op GitHub heeft).
Maar geen enkele ontwerper past in een doos. We hebben allemaal onze eigen wensen en behoeften uit een knopraamwerk. We willen allemaal bepaalde soorten knoppen zien, en misschien zijn we heel goed in het ontwerpen van een bepaald type knop geworden. Dus waarom maken we niet onze eigen knop UI-kit helemaal opnieuw?
De eenvoudige maar zeer effectieve basis voor ons framework voor knoppen UIEerst moeten we bepalen met welke elementen onze knoppen zich kunnen richten. In ons geval, laten we ervoor zorgen dat elke anker-, invoer- of knoplabel kan worden gestileerd via onze UI-kit. Om dit te doen, laten we wat markeringen maken:
Knop
Ik gebruik een attribuut om dit eenvoudig te doen omdat ik vind dat het er beter uitziet. Het is misschien niet erg toekomstbestendig (wat als de W3C een nieuwe spec voor ui-attributen introduceert?) Maar als je je hierover zorgen maakt, kun je namespace gebruiken ui zoiets als cory-ui in welk geval ik wed dat je veilig bent voor nieuwe W3C-introducties. Als je je echt ongerust maakt, of als je gek bent op prestaties, kun je klassen gebruiken en hetzelfde effect bereiken, maar je kunt problemen tegenkomen wanneer klassen elkaar op bepaalde punten negeren.
We zullen de Stylus CSS-preprocessor gebruiken om te voorkomen dat we een miljoen accolades moeten wegschrijven en dus ziet onze code er keurig en schoon uit zonder herhaling. Zelfs als u Stylus niet kent, zou u in staat moeten zijn om mee te werken met een andere preprocessor of vanille CSS.
Laten we eerst een aantal standaardstijlen instellen voor de [Ui * = "button"] selector. We gebruiken de sterselector in deze context, zodat u overal een "knop" in uw attribuut kunt toevoegen en het zal werken.
[ui * = "knop"] cursor: aanwijzerovergang: alles 200ms makkelijke rand: 0 achtergrond: donkerder (wit, 5%) kleur: lichter (zwart, 20%) opvulling: .5em 1.75em tekstdecoratie: geen &: achtergrond zweven: donkerder (wit, 10%)
Nu het leuke gedeelte. Laten we beginnen met het toevoegen van alle kenmerken waarvan we denken dat we ze kunnen gebruiken. Ik weet bijvoorbeeld dat ik de mogelijkheid wil hebben om knoppen van verschillende groottes te hebben, dus ik zal maten toevoegen aan mijn knoppen:
Knop
[ui * = "knop"] cursor: aanwijzerovergang: alles 200ms makkelijke rand: 0 achtergrond: donkerder (wit, 5%) kleur: lichter (zwart, 20%) opvulling: .5em 1.75em tekstdecoratie: geen &: achtergrond zweven: donkerder (wit, 10%) & [ui * = "klein"] opvulling: .25em 1em lettergrootte: .75em & [ui * = "groot"] opvulling: .75em 2em lettertypegrootte: 1.25em & [ui * = "enorm"] opvulling: 1em 3em lettertypegrootte: 1.25em
Let op hoe we zijn aanhangen de attributen op onze knopattribuutselector? Dit betekent dat die attributen niet werken voor elementen die dat niet hebben ui = "button". Dit is een leuke manier om ervoor te zorgen dat onze wijzigingen zijn afgestemd op verschillende kenmerken die we mogelijk willen toevoegen.
Laten we doorgaan en wat afronding toevoegen aan onze knoppen:
Knop
& [ui * = "round"] grensradius: 5px & [ui * = "pill"] grensradius: 999em
De kleinste knop heeft afgeronde hoeken, de tweede is een "pil" gewordenInmiddels zou je dit concept beter moeten leren kennen. Laten we wat kleuren toevoegen in de vorm van variabelen:
Knop
kleur-primair = blauw kleur-gevaar = rood [ui * = "knop"] cursor: aanwijzer overgang: alles 200ms makkelijke rand: 0 achtergrond: donkerder (wit, 5%) kleur: lichter (zwart, 20%) opvulling:. 5em 1.75em tekst-decoratie: geen &: zweven achtergrond: donkerder (wit, 10%) & [ui * = "klein"] opvulling: .25em 1em lettergrootte: .75em & [ui * = "groot"] opvulling : .75em 2em lettertype: 1.25em & [ui * = "enorm"] opvulling: 1em 3em lettertype: 1.25em & [ui * = "rond"] rand-straal: 5px & [ui * = "pilletje "] grensradius: 999em & [ui * =" primair "] achtergrond: kleur-primaire kleur: wit & [ui * =" gevaar "] achtergrond: kleurgevaarkleur: wit
Dat is de kern van het! Voeg zoveel regels en eigenschappen toe als je wilt. Je kunt zelfs complexe thema's toevoegen aan je knoppen, interessante zweeftoestanden en animaties. Deel uw knop UI-framework met ons in de opmerkingen!
Accentsconagua