MINDRE CSS-opplæringsutforming En slank menynavigasjonslinje

Denne artikkelen er en del av vår "HTML5 / CSS3 opplæringsserie" - dedikert til å gjøre deg til en bedre designer og / eller utvikler. Klikk her å se flere artikler fra samme serie.

Webdesign og utvikling verden utvikler seg raskt. Vi kan se dette i det store antallet nye ting som lanseres i samfunnet (nesten) hver dag, enten det er Apps eller nye rammer som hjelper til med å gjøre vår daglige jobb som webdesignere eller utviklere mer effektive og effektive.

En som fikk oppmerksomheten min fra utviklingen av webdesign idag, er MINDRE, et programmerbart stilarksprog som utvider måten vi skriver CSS-syntaks ved å kombinere noen programmeringsbegreper som variabler, mixins, funksjoner og operasjoner.

Den åpner nye evner ved å skrive CSS-syntaks. For eksempel, ved å bruke Mixins i CSS som måten vi gjør i et program, kan vi nå lagre standardstiler og verdier som kan brukes i hele filen når det er mulig. Med dette trenger vi ikke å skrive de samme stilene om og om igjen.

Vel, la oss gjøre noen øvelser med mindre for å få bedre innblikk i hva den har å tilby.

Utforming med mindre

I denne opplæringen vil vi prøve å utforme en glatt menynavigasjonslinje som er inspirert fra den i Apple.com. Som det er bare "inspirert" av det opprinnelige produktet, legg merke til at vårt endelige opplæringsprodukt ikke vil være nøyaktig det samme som originalen.

For å komme i gang, vil du kanskje lese følgende nyttige ressurser først. De forklarer noen grunnleggende implementeringer av LESS språk, som vil være nyttig for deg før du graver videre inn i denne opplæringen.

• MINDRE ER MERE: Gjør din CSS-koding enklere med mindre
• Skriv bedre CSS med mindre
• En introduksjon til mindre, og sammenligning med Sass

Forberedelse

Først av alt er det noen viktige ting vi trenger for dette lille prosjektet, det vil si:

1. MINDRE Tekstredigerer

Vi trenger en tekstredigerer for å kode navigasjonsmenyen. Imidlertid har de fleste av tekstredigererne som er tilgjengelige i markedet i dag (for eksempel Dreamweaver, Notepad ++, InType, Sublime Text 2) ennå å støtte .mindre filutvidelser som standard, slik at syntaksen kanskje ikke utheves godt.

Så, for denne veiledningen, vil vi bruke en spesiell tekstredigerer for LESS kalt ChrunchApp. Vi kan åpne og redigere .mindre utvidelsesfiler og kompilere det til statisk CSS ved hjelp av dette programmet. Siden det er et Adobe Air-program, kan det installeres i alle de store stasjonære OS-ene (Win, OSX og Linux).

For HTML-editoren kan du bruke en hvilken som helst editor du allerede er komfortabel med å bruke nå. Jeg personlig liker Sublime Text 2.

2. Less.js

Deretter laster du ned MINDRE JavaScript-biblioteket fra deres offisielle nettside, den gjeldende versjonen er 1.2.1. Plasser den inne i treningsmappen din for dette.

Koble deretter filen til HTML-dokumentet.

3. Prefiksfri

Vi vil også benytte noen få CSS3-funksjoner for å oppnå noen effekter i navigasjonsmenyen som vil inneholde leverandørprefikser (-moz-, -o-, -webkit-) for at den skal gjengis korrekt over forskjellige nettlesere. Imidlertid favoriserer jeg ikke personlig med prefikser da det vil oppblåse CSS-filen.

Av denne grunn bestemte jeg meg for å bruke prefiksfri, et JavaScript-bibliotek laget av Lea Verou som vil håndtere leverandørprefikset automatisk i bakgrunnen. Så vi trenger bare å skrive den offisielle syntaksen fra W3C.

Last ned filen og koble den til HTML-filen.

Ok, vi er alle satt opp; La oss nå begynne å strukturere HTML-oppslaget.

HTML Markup

Navigasjonen er ganske enkel. Det vil ha fem menyer pakket inn i en uordnet liste-tag. Åpne din favoritt HTML-editor og sett følgende oppføring:

MINDRE Styling

I denne delen begynner vi å stylere navigasjonen med LESS språk. For de som er nye til programmeringslignende språk, vil det være litt rart og vanskelig å skrive CSS-syntaks med LESS. Men ikke bekymre deg, når du har litt øvelse, vil det sikkert være morsommere enn måten vi skriver rent CSS (det er min erfaring, det er også litt vanedannende).

La oss undersøke navigasjonsstilen fra vår inspirasjonskilde.

Som vi kan se på skjermbildet ovenfor, har Apple.com-navigasjonen følgende seks hovedtyper:

• skygge
• grense
• deler
• gradienter
• sveve effekt
• tekst

Vi lagrer disse stilene og lagrer dem inni config.less som standard stil konfigurasjon; noen designere kan også nevne det lib.css det står for Bibliotek. Koble denne filen til dokumentet vårt.

Pass på at du plasserer den før MINSTRE JavaScript-biblioteket.

Definer fargebase med variabler

I dette trinnet vil vi definere navigasjonsfargebasen ved hjelp av variabler. Variabelen i LESS er deklarert ved hjelp av @ symbol.

@theme: # 555;

Dette @tema variabel er vår standardfarge; Vi vil bruke det på alle måter å hale perfekt fargevalg og slik at fargesammensetningen forventes å bli mer konsistent.

Definer standard skygge stil med Mixins

En av funksjonene jeg elsker fra LESS er Mixins. Det er et programmeringskonsept som lagrer flere forhåndsdefinerte stiler som i LESS kan arves i klasser eller ids senere i stilarket.

.skygge box-shadow: 0 1px 2px 0 @theme; 

I koden ovenfor inkluderte jeg ikke den prefikserte versjonen av box-shadow eiendom, siden det prefiksfrie biblioteket vil håndtere dem automatisk. Skyggenfarge er også arvet fra temavariabel farge.

Definer kantlinje med Parametriske Mixins

Navigeringsfeltet trenger en tydelig kantfarge med et litt avrundet hjørne. Vi kan kompilere grensestilen ved hjelp av Parametriske Mixins. Den har faktisk samme funksjonalitet som Mixins, bare forskjellen er at den også har foranderlige parametere slik at verdiene er mer justerbare.

.grense (@radius: 3px) border-radius: @radius; grense: 1px solid @theme - # 050505; 

I koden ovenfor konfigurerer vi standardgrensen @radius til 3px og som vi tidligere nevnte, kan denne verdien endres senere.

Definer Gradient, Divider og Hover Style med drift

Operasjon er bare et programmeringsspråk der vi kan bruke matematisk formel som tillegg, divisjon, subtraksjon og multiplikasjon for å få et ønsket resultat. La oss ta en titt på følgende kode:

.divider border-style: solid; kantbredde: 0 1px 0 1px; border-farge: transparent @theme - # 111 transparent @theme + # 333; 

I koden ovenfor trekker vi fra @tema variabel av # 111, På denne måten vil fargeproduksjonen på venstre kant bli litt mørkere. Mens den riktige grensen farge er avledet fra tillegg av @tema variabel med heksefarge # 333, utgangen ville være lettere.

Fargeskjema Nivå

Vel, for noen av dere som kan forveksles med formler, la oss undersøke fargeskjema diagrammet nedenfor for å få en bedre forståelse:

Maksimal mørk tone er # 000 (svart), mens maksimal lystone er #fff (hvit) og vår nåværende fargebase er # 555. Så, hvis vi vil at fargebasen skal være 3 nivåer mørkere fra dagens, kan vi ganske enkelt trekke det av # 333. På samme måte kan det også brukes til å lette fargen.

Deretter skal vi operere gradientfargen.

.gradient bakgrunn: lineær gradient (topp, @theme + # 252525 0%, @theme + # 171717 50%, @theme - # 010101 51%, @theme + # 151515 100%);  .hovereffekt bakgrunn: lineær gradient (topp, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

Definer tekst stil med Guard Mixins

Vi planlegger å ha 2 farger på navigasjonsfeltet, ne mørk farge og ett lys. Vi bruker to betingede utsagn for teksten ved hjelp av Guard Mixins.

Først når teksten er gitt en farge som har lyshet lik eller større enn 50%, vil text-shadow bør bli mørk, i dette tilfellet farge # 000000.

.textcolor (@txtcolor) når (lyshet (@txtcolor)> = 50%) farge: @txtcolor; tekstskygge: 1px 1px 0px # 000000; 

Deretter, når teksten er gitt en farge som lysheten er mindre enn 50% text-shadow vil bli hvit.

.textcolor (@txtcolor) når (lyshet (@txtcolor) 
Importerer MINDRE
 
La oss nå lage en annen .mindre filen heter styles.less og import config.less i det:
 
@import "config.less";
 
Legg til Font Family
 
For at navigasjonslinjen skal se mer tiltalende, vil vi inkludere en ny skriftfamilie ved hjelp av @ Font-face regel. Overraskende, @ Font-face regelen er faktisk allerede støttet siden IE6!
 
Denne gangen bruker vi asapfonten. Last ned den fra Font Equirrels skriftfontsamling. Sett deretter inn følgende stiler til vår nylig opprettede styles.less fil.
 
@ font-face font-family: 'AsapRegular'; src: url ( 'skrifter / Asap-Regular-webfont.eot'); src: url ('fonter / Asap-Regular-webfont.eot? #iefix') format ('embedded-opentype'), url ('fonter / Asap-Regular-webfont.woff') format format ('skrifttype / Asap-Regular-webfont.ttf') format ('truetype'), format ('svg'), url ('fonter / Asap-Regular-webfont.svg # AsapRegular'); font-weight: normal; font-style: normal;  
 
Styling kroppen med fargefunksjoner
 
Nå skal vi gi en bakgrunnsfarge til kropp (som skal være lettere enn fargebasen), samt å spesifisere skriftfamilien og skriftstørrelsen. Vi kan nærme effekten ved å bruke fargefunksjoner:
 
Følgende kode vil lette bakgrunnen ved 30%.
 
kropp bakgrunn: lette (@theme, 30%); font-familie: AsapRegular, sans-serif; skriftstørrelse: 11pt; 
 
 
 
Styling av navigasjonen med nestet regel
 
I LESS er vi i stand til å neste stiler direkte under sin forelder. La oss ta en titt på koden nedenfor.
 
De nav tag som inneholder alle nødvendige elementer for navigasjonen vil bli gitt følgende stiler.
 
nav margin: 50px auto 0; bredde: 788px; høyde: 45px; .grense; .skygge; 
 
Legg merke til at i stedet for å gi en haug med CSS-regler igjen, ble jeg bare satt inn .grense å gi grensen stil og .skygge å legge til skygge. I virkelige tilfeller kan disse settene også brukes på nytt i et annet element, uansett hvor det er nødvendig.
 
 
 
Deretter gir vi stiler for ul inne i nav å ha null polstring og margin. Ikke så lenge siden, vil vi nærme oss stilen ved å skrive noe slikt:
 
nav ... nav ul ...
 
Det er ingenting galt med denne tilnærmingen, faktisk pleide jeg å gjøre det hver gang og er ganske komfortabel med det. Men denne metoden, mange en CSS-designer har sagt, er oversatt og i noen tilfeller ikke lett å håndtere.
 
Nå kan vi gjøre noe slikt:
 
nav margin: 50px auto 0; bredde: 788px; høyde: 45px; .grense; .skygge; ul polstring: 0; margin: 0; 
 
 
 
Og så vil menyen vises på rad med skjerm: inline eiendom.
 
nav margin: 50px auto 0; bredde: 788px; høyde: 45px; .grense; .skygge; ul polstring: 0; margin: 0; li display: inline; 
 
 
 
I syntaxen nedenfor angir vi menyanker-stilen og legger til våre forhåndsdefinerte stiler, de er: .textcolor, .deler, .gradient.
 
nav margin: 50px auto 0; bredde: 788px; høyde: 45px; .grense; .skygge; ul polstring: 0; margin: 0; li display: inline; en tekst-dekorasjon: ingen; display: inline-block; flyte: venstre; bredde: 156px; høyde: 45px; tekstjustering: center; linjehøyde: 300%; .textcolor (# f2f2f2); // Du kan endre denne linjen .divider; .gradient; 
 
I koden ovenfor bruker vi heksefarge # f2f2f2 hvor lysheten vurderes over 50%, så vi forventer å se skyggen bli mørk (automatisk). Resten av koden jeg er sikker på er ganske selvforklarende.
 
 
 
Men hvis vi ser på det nåværende resultatet ovenfor, har hver av menyene dividere og resulterer i det siste avsnittet som overskrider bunnen. Så vi må unnlate grensestilen for det første og siste barnet i navigeringsfeltet.
 
nav margin: 50px auto 0; bredde: 788px; høyde: 45px; .grense; .skygge; ul polstring: 0; margin: 0; li display: inline; en tekst-dekorasjon: ingen; display: inline-block; flyte: venstre; bredde: 156px; høyde: 45px; tekstjustering: center; linjehøyde: 300%; .textcolor (# f2f2f2); // Du kan endre denne linjen .divider; .gradient;  li: første barn a border-left: none;  li: siste barn a grense-høyre: ingen; 
 
 
 
Hover State
 
For det siste trinnet vil vi legge til sveveffekten. I LESS kan vi legge til pseudo-element som for eksempel :sveve ved hjelp av & symbol.
 
nav margin: 50px auto 0; bredde: 788px; høyde: 45px; .grense; .skygge; ul polstring: 0; margin: 0; li display: inline; en tekst-dekorasjon: ingen; display: inline-block; flyte: venstre; bredde: 156px; høyde: 45px; tekstjustering: center; linjehøyde: 300%; .textcolor (# f2f2f2); // Du kan endre denne linjen .divider; .gradient; &: svever .hovereffect;  li: første barn a border-left: none;  li: siste barn a grense-høyre: ingen; 
 
 
 
Endre farge temaet
 
Her er den kule delen av MINDRE. Hvis vi ønsker å endre det generelle fargetemaet, kan vi gjøre det i færre linjeskift enn det vi trenger i ren CSS.
 
I dette tilfellet vil jeg endre navigasjonsfargen for å være litt lettere. Bare endre følgende to linjer.
 
@theme: #ccc; // Endre dette
 
.tekstfargen (# 555); //Og dette
 
Og her er resultatet.
 
 
 
Kompil mindre inn i CSS
 
Når vi fortsatt bruker den mindre JavaScript, vil den ta tak i .mindre fil og oversett den til statisk CSS slik at standard nettleseren kan tolke den. Dette er en dobbel jobb på klientsiden, for ikke å nevne overflødig og avfall båndbredde. Hovedpunktet i MINDRE er i arbeidsflyten for å forenkle vår praksis ved å lage statisk CSS for å være mer dynamisk og programmerbar.
 
Så når vi skal legge navigeringslinjen på et nettsted, er det viktig å kompilere den MINDRE filen i statisk CSS.
 
Klikk på Crunch It! stor knapp.
 
 
 
Lagre .less i treningsfilen, lenke den til HTML-dokumentet og koble fra .mindre & less.js fil fra dokumentet.
 
 .skygge box-shadow: 0 1px 2px 0 # 555555;  .divider border-style: solid; kantbredde: 0 1px 0 1px; border-color: transparent # 444444 transparent # 888888;  .gradient bakgrunn: lineær gradient (topp, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .hovereffekt bakgrunn: lineær gradient (topp, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ font-face font-family: 'AsapRegular'; src: url ('skrifter / Asap-Regular-webfont.eot'); src: url ('fonter / Asap-Regular-webfont.eot? #iefix') format ('embedded-opentype'), url ('fonter / Asap-Regular-webfont.woff') format format ('skrifttype / Asap-Regular-webfont.ttf') format ('truetype'), format ('svg'), url ('fonter / Asap-Regular-webfont.svg # AsapRegular'); font-weight: normal; font-style: normal;  kropp bakgrunn: # a2a2a2; font-familie: AsapRegular, sans-serif; skriftstørrelse: 11pt;  nav margin: 50px auto 0; bredde: 788px; høyde: 45px; border-radius: 3px; grense: 1px solid # 505050; boks-skygge: 0 1px 2px 0 # 555555;  nav ul polstring: 0; margin: 0;  nav ul li display: inline;  nav ul li a text-decoration: none; display: inline-block; flyte: venstre; bredde: 156px; høyde: 45px; tekstjustering: center; linjehøyde: 300%; farge: # f2f2f2; tekstskygge: 1px 1px 0px # 000000; border-style: solid; kantbredde: 0 1px 0 1px; border-color: transparent # 444444 transparent # 888888; bakgrunn: lineær gradient (topp, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  nav ul li a: svever bakgrunn: lineær gradient (topp, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: første barn a border-left: none;  nav ul li: siste barn a grense-høyre: ingen;  
 
La oss se på resultatet igjen.
 
 
 
Og vi er ferdige, vær så snill å eksperimentere med det.
 
Konklusjon
 
Vi har lært mange ting om LESS språk i dag, for eksempel:
 

• variabler.
• mixins
• Parametriske Mixins
• operasjoner
• Beskyttet Mixins
• Og nestede regler

Selv om det er mange ting som kan dekkes videre og mange muligheter til å bli vist og forklart, håper vi at du likte denne grunnleggende opplæringen.

• Demo
• Last ned kilde