MINDRE CSS Tutorial Design en slick Menu Navigation bar

Denne artikel er en del af vores "HTML5 / CSS3 Tutorials serie" - dedikeret til at gøre dig til en bedre designer og / eller udvikler. Klik her at se flere artikler fra samme serie.

Webdesign og udvikling verden udvikler sig hurtigt. Vi kan se dette i det store antal nye ting, der lanceres i samfundet (næsten) hver dag, det være sig Apps eller nye rammer, der hjælper med at gøre vores daglige arbejde som webdesignere eller -udviklere mere effektive og effektive.

En, der har fået min opmærksomhed fra udviklingen af ​​webdesign i dag, er MINDRE, et programmerbart stylesheet-sprog, der udvider måden vi skriver CSS-syntaks ved at kombinere nogle programmeringsbegreber som variabler, mixins, funktioner og operationer.

Det åbner nye muligheder ved at skrive CSS-syntaks. For eksempel ved at anvende Mixins i CSS som den måde, vi gør i et program, kan vi nu gemme standardstile og værdier, der kan anvendes i hele filen, når det er muligt. Med dette behøver vi ikke at skrive de samme stilarter igen og igen.

Nå, lad os lave nogle øvelser med MINDRE for at få bedre indsigt i, hvad den har at tilbyde.

Design med mindre

I denne tutorial vil vi forsøge at designe en glat menu navigeringslinje, der er inspireret fra den i Apple.com. Da det kun er "inspireret" af det originale produkt, skal du være opmærksom på, at vores endelige læringsprodukt ikke vil være præcis det samme som originalen.

For at komme i gang kan du først læse følgende nyttige ressourcer først. De forklarer nogle grundlæggende implementeringer af LESS sprog, som vil være nyttige for dig, før du graver dig længere ind i denne vejledning.

• MINDRE ER MERE: Gør din CSS-kodning lettere med mindre
• Skriv bedre CSS med mindre
• En introduktion til mindre og sammenligning med Sass

Forberedelse

Først og fremmest er der nogle vigtige ting, vi har brug for til dette lille projekt, det vil sige:

1. LERE Tekst editor

Vi skal bruge en tekstredigerer til at kode navigeringsmenuen. Imidlertid har de fleste af de tekstredigerere, der er tilgængelige på markedet i dag (som Dreamweaver, Notepad ++, InType, Sublime Text 2) endnu ikke understøttet .mindre filudvidelser som standard, så syntaxen bliver muligvis ikke markeret godt.

Så med henblik på denne tutorial vil vi bruge en særlig tekstredigerer til MINDRE navngivet ChrunchApp. Vi kan åbne og redigere .mindre udvidelsesfiler og kompilere det i statisk CSS ved hjælp af denne applikation. Da det er en Adobe Air-applikation, kan den installeres i alle større desktop-operativsystemer (Win, OSX og Linux).

For HTML-editoren kan du bruge en editor, du allerede er komfortabel med at bruge nu. Jeg kan godt lide Sublime Text 2.

2. Less.js

Dernæst download den MINDRE JavaScript-bibliotek fra deres officielle hjemmeside, den nuværende version er 1.2.1. Placer det inde i din øvelsesmappe for dette.

Link derefter filen til HTML-dokumentet.

3. Prefix-fri

Vi vil også udnytte nogle få CSS3-funktioner til at udføre nogle effekter i navigationsmenuen, som vil indeholde leverandørpræfikser (-Moz-, -o-, -webKit-) for at gøre det korrekt på tværs af forskellige browsere. Jeg favoriserer imidlertid ikke personligt ved hjælp af præfikser, da det vil opblive CSS-filen.

Af denne grund besluttede jeg at bruge præfiks-fri, et JavaScript-bibliotek oprettet af Lea Verou, der vil håndtere leverandørpræfikserne automatisk i baggrunden. Så vi skal kun skrive den officielle syntaks fra W3C.

Download filen og link den til HTML-filen.

Okay, vi er alle oprettet lad os nu begynde at strukturere HTML-markup.

HTML Markup

Navigeringen er ret simpel. Det vil have fem menuer indpakket inde i en uordnet liste tag. Åbn din foretrukne HTML-editor og læg følgende markering:

MINDRE Styling

I dette afsnit begynder vi at stylere navigationen med LESS sprog. For dem, der er nye til programmeringslignende sprog, vil skrive CSS-syntaks med LESS føle sig lidt underligt og akavet. Men rolig, når du har noget øvelse, vil det helt sikkert være mere behageligt end den måde, vi skriver rent CSS (det er min erfaring, det er også lidt vanedannende).

Lad os undersøge navigationsstilen fra vores inspirationskilde.

Som vi kan se i skærmbilledet ovenfor, har Apple.com-navigationen følgende 6 vigtigste fælles stilarter:

• skygge
• grænse
• divider
• gradienter
• svæveffekt
• tekst

Vi gemmer disse stilarter og gemmer dem inde config.less som standard stil Konfiguration; nogle designere kan også nævne det lib.css det står for Bibliotek. Link denne fil til vores dokument.

Sørg for at placere det før MINSTRE JavaScript-biblioteket.

Definer farvebase med variabler

I dette trin definerer vi navigationsfarvebasen ved hjælp af Variabler. Variablen i LESS erklæres ved hjælp af @ symbol.

@theme: # 555;

Dette @tema variabel er vores standard farve; Vi vil bruge det på alle måder at skære perfekt farveskema og således at farvesammensætningen forventes at blive mere konsistent.

Definer standard skyggestil med mixins

Et af de funktioner, jeg elsker fra LESS er Mixins. Det er et programmeringskoncept, der gemmer flere foruddefinerede stilarter, der i LESS kan arves i klasser eller ids senere i stilarket.

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

I koden ovenfor inkluderede jeg ikke den præfiksetede version af box-shadow ejendom, da det præfiksfrie bibliotek vil håndtere dem automatisk. Skyggefarven er også arvet fra temavariabel farve.

Definer grænsestil med parametriske mixins

Navigationslinjen har brug for en tydelig kantfarve med et let afrundet hjørne. Vi kan kompilere grænsestilen ved hjælp af Parametriske Mixins. Det har faktisk samme funktionalitet som Mixins, kun forskellen er, at den også har foranderlige parametre, så værdierne er mere justerbare.

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

I koden ovenfor opstiller vi standard grænsen @radius til 3px og som vi tidligere nævnte, kan denne værdi ændres senere.

Definer Gradient, Divider og Hover Style med Operation

Operation er simpelthen et programmeringssprog, hvor vi kan anvende matematisk formel som Addition, Division, Subtraction og Multiplication for at få et ønsket resultat. Lad os se på følgende kode:

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

I koden ovenfor trækker vi fra @tema variabel af # 111, På den måde vil den farvefarve på venstre grænse være lidt mørkere. Mens den højre kantfarve er afledt af tilføjelsen af @tema variabel med hex farve # 333, output ville være lettere.

Farveskema niveau

Nå, for nogle af jer, der kan forveksles med formler, lad os undersøge skemaet for farveskema nedenfor for at få en bedre forståelse:

Den maksimale mørke tone er # 000 (sort), mens den maksimale lyssignal er #fff (hvid) og vores nuværende farvebase er # 555. Så hvis vi vil have farvebase 3 niveauer mørkere fra strømmen, kan vi simpelthen trække det fra # 333. Den samme måde kan også anvendes til at lette farven.

Derefter vil vi styre gradientfarven.

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

Definer tekst stil med Guard Mixins

Vi planlægger at have 2 farver på navigationslinjen, ne mørk farve og et lys. Vi anvender to betingede udsagn for teksten ved hjælp af Guard Mixins.

Først når teksten gives en farve, der har lysstyrke lig med eller større end 50%, vil tekst-skygge bør blive mørk, i dette tilfælde farve # 000000.

.tekstfarve (@txtcolor) når (lysstyrke (@txtcolor)> = 50%) farve: @txtcolor; tekstskygge: 1px 1px 0px # 000000; 

Så når teksten får en farve, hvor lysstyrken er mindre end 50% tekst-skygge bliver hvid.

.tekstfarve (@txtcolor) når (lysstyrke (@txtcolor) 
Importerer mindre
 
Lad os nu oprette en anden .mindre fil navngivet styles.less og import config.less ind i det:
 
@import "config.less";
 
Tilføj skrifttype familie
 
For at navigationslinjen skal se mere tiltalende, vil vi inkludere en ny skrifttypefamilie ved hjælp af @ Font-face Herske. overraskende, @ Font-face regel er faktisk allerede støttet siden IE6!
 
Denne gang bruger vi Asap skrifttypen. Hent det fra Font Equirrel's skrifttype ansigtssamling. Indsæt derefter følgende stilarter til vores nyligt oprettede styles.less fil.
 
@ font-face font-family: 'AsapRegular'; src: url ( 'fonte / Asap-Regular-webfont.eot'); src: url ('skrifttyper / Asap-Regular-webfont.eot? #iefix') format ('embedded-opentype'), url ('skrifttyper / Asap-Regular-webfont.woff') format ('woff'), url ('skrifttyper / Asap-Regular-webfont.ttf') format ('truetype'), formatet 'url (' skrifttyper / Asap-Regular-webfont.svg # AsapRegular ') (' svg '); skrifttype-vægt: normal; skrifttypestil: normal;  
 
Styling kroppen med farve funktioner
 
Nu vil vi give en baggrundsfarve til legeme (der skal være lysere end farvebasis) samt angivelse af skrifttypefamilien og skriftstørrelsen. Vi kan nærme effekten ved hjælp af Farvefunktioner:
 
Følgende kode vil lette baggrunden ved 30%.
 
krop baggrund: lighten (@theme, 30%); skrifttype-familie: AsapRegular, sans-serif; skrifttypestørrelse: 11pt; 
 
 
 
Styling af navigationen med nestet regel
 
I LESS er vi i stand til at indhente stilarter direkte under sin forælder. Lad os se koden nedenfor.
 
Det nav Tag, der indeholder alle de nødvendige elementer til navigationen, gives følgende stilarter.
 
nav margin: 50px auto 0; bredde: 788px; højde: 45px; .grænse; .skygge; 
 
Bemærk, at i stedet for at give en masse CSS-regler igen, er jeg kun indsat .grænse at give grænsestilen og .skygge for at tilføje skygge. I virkelige tilfælde kan disse sæt klasser genanvendes i et andet element, uanset hvor det er nødvendigt.
 
 
 
Dernæst giver vi stilarter til ul inde i nav at have nul polstring og margin. Ikke så længe siden vil vi nærme stilen ved at skrive noget som dette:
 
nav ... nav ul ...
 
Der er ikke noget galt med denne tilgang, faktisk plejede jeg at gøre det hver gang og er temmelig komfortabel med det. Denne metode, som mange CSS-designer har sagt, er imidlertid forbudt og i nogle tilfælde ikke let at håndtere.
 
Nu kan vi gøre noget som dette:
 
nav margin: 50px auto 0; bredde: 788px; højde: 45px; .grænse; .skygge; ul polstring: 0; margen: 0; 
 
 
 
Og så vises menuen i træk med display: inline ejendom.
 
nav margin: 50px auto 0; bredde: 788px; højde: 45px; .grænse; .skygge; ul polstring: 0; margen: 0; li display: inline; 
 
 
 
I syntaxen nedenfor angiver vi menuanker-stilen og tilføjer vores foruddefinerede stilarter, de er: .textcolor, .divider, .gradient.
 
nav margin: 50px auto 0; bredde: 788px; højde: 45px; .grænse; .skygge; ul polstring: 0; margen: 0; li display: inline; en tekst-dekoration: ingen; display: inline-block; flyde: venstre; bredde: 156px; højde: 45px; tekst-align: center; linjehøjde: 300%; .textcolor (# f2f2f2); // Du kan ændre denne linje .divider; .gradient; 
 
I koden ovenfor anvender vi hex farve # f2f2f2 hvor lysheden anses for over 50%, så vi ville forvente at se skyggen blive mørk (automatisk). Resten af ​​koden, jeg er sikker på, er helt selvforklarende.
 
 
 
Men hvis vi ser på det aktuelle resultat ovenfor, har hver af menuerne dividere, hvilket resulterer i det sidste afsnit, der overskrider bunden. Så vi er nødt til at udelade grænsestilen til det første og sidste barn i navigationslinjen.
 
nav margin: 50px auto 0; bredde: 788px; højde: 45px; .grænse; .skygge; ul polstring: 0; margen: 0; li display: inline; en tekst-dekoration: ingen; display: inline-block; flyde: venstre; bredde: 156px; højde: 45px; tekst-align: center; linjehøjde: 300%; .textcolor (# f2f2f2); // Du kan ændre denne linje .divider; .gradient;  li: første barn a grænse-venstre: ingen;  li: sidste barn a grænse-højre: ingen; 
 
 
 
Hover State
 
For det sidste trin tilføjer vi svæveffekten. I LESS kan vi tilføje pseudo-element såsom : hover ved brug af & symbol.
 
nav margin: 50px auto 0; bredde: 788px; højde: 45px; .grænse; .skygge; ul polstring: 0; margen: 0; li display: inline; en tekst-dekoration: ingen; display: inline-block; flyde: venstre; bredde: 156px; højde: 45px; tekst-align: center; linjehøjde: 300%; .textcolor (# f2f2f2); // Du kan ændre denne linje .divider; .gradient; &: hover .hovereffect;  li: første barn a grænse-venstre: none;  li: sidste barn a grænse-højre: ingen; 
 
 
 
Skift farve tema
 
Her er den seje del af LESS. Hvis vi vil ændre det overordnede farvetema, kan vi gøre det i færre linjeskift, end vi har brug for i ren CSS.
 
I dette tilfælde vil jeg ændre navigationsfarven til at være lidt lettere. Du skal blot ændre følgende to linjer.
 
@theme: #ccc; // Skift dette
 
.textcolor (# 555); //Og dette
 
Og her er resultatet.
 
 
 
Kompil mindre i CSS
 
Når vi stadig bruger den mindre JavaScript, vil den gribe den .mindre fil og oversæt den til statisk CSS, så standardbrowseren kan fortolke den. Dette er et dobbelt job på klientsiden, for ikke at nævne overflødig og spild båndbredde. Hovedpunktet for LESS er i workflow for at forenkle vores praksis med at kompilere statisk CSS for at være mere dynamisk og programmerbar.
 
Så når vi skal sætte navigationslinjen på en hjemmeside, er det vigtigt at kompilere den MINDRE fil i statisk CSS.
 
Klik på knappen Crunch It! stor knap.
 
 
 
Gem .less i vores øvelsesfil, link den til HTML-dokumentet og fjern linket til .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 baggrund: lineær gradient (top, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .hovereffekt baggrund: lineær gradient (top, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ font-face font-family: 'AsapRegular'; src: url ('skrifttyper / Asap-Regular-webfont.eot'); src: url ('skrifttyper / Asap-Regular-webfont.eot? #iefix') format ('embedded-opentype'), url ('skrifttyper / Asap-Regular-webfont.woff') format ('woff'), url ('skrifttyper / Asap-Regular-webfont.ttf') format ('truetype'), formatet 'url (' skrifttyper / Asap-Regular-webfont.svg # AsapRegular ') (' svg '); skrifttype-vægt: normal; skrifttypestil: normal;  krop baggrund: # a2a2a2; skrifttype-familie: AsapRegular, sans-serif; skrifttypestørrelse: 11pt;  nav margin: 50px auto 0; bredde: 788px; højde: 45px; grænse-radius: 3px; grænse: 1px fast # 505050; box-skygge: 0 1px 2px 0 # 555555;  nav ul polstring: 0; margen: 0;  nav ul li display: inline;  nav ul li a text-decoration: none; display: inline-block; flyde: venstre; bredde: 156px; højde: 45px; tekst-align: center; linjehøjde: 300%; farve: # f2f2f2; tekstskygge: 1px 1px 0px # 000000; grænsestil: solid; kantbredde: 0 1px 0 1px; border-color: transparent # 444444 transparent # 888888; baggrund: lineær gradient (top, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  nav ul li a: svever baggrund: lineær gradient (top, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: første barn a grænse-venstre: ingen;  nav ul li: sidste barn a grænse-højre: ingen;  
 
Lad os se igen på resultatet.
 
 
 
Og vi er færdige, er du velkommen til at eksperimentere med det.
 
Konklusion
 
Vi har lært mange ting om mindre sprog i dag, såsom:
 

• Variable.
• Mixins
• Parametriske Mixins
• operationer
• Bevogtet Mixins
• Og nestede regler

Selvom der er mange ting, der kan dækkes videre og mange muligheder for at blive vist og forklaret, håber vi, du har haft denne grundlæggende tutorial.

• Demo
• Download kilde