MINDRE CSS-handledning Designa en smidig menynavigationsfält

Denna artikel är en del av vår "HTML5 / CSS3 Tutorials-serien" - dedikerad till att göra dig till en bättre designer och / eller utvecklare. Klicka här att se fler artiklar från samma serie.

Webbdesign och utvecklingsvärld utvecklas snabbt. Vi kan se detta i det stora antalet nya saker som lanseras i samhället (nästan) varje dag, vare sig det är Apps eller nya ramar som hjälper till att göra vårt dagliga jobb som webbdesigners eller utvecklare effektivare och effektivare.

En som fångade min uppmärksamhet från utveckling av webbdesign idag är MINDRE, ett programmerbart stilarksspråk som utökar sättet att skriva CSS-syntax genom att kombinera vissa programmeringskoncept som variabler, mixins, funktioner och operationer.

Det öppnar nya möjligheter att skriva CSS-syntax. Genom att till exempel använda Mixins i CSS som hur vi gör i ett program kan vi nu lagra standardstilar och värden som kan tillämpas i hela filen när det är möjligt. Med detta behöver vi inte skriva samma stilar om och om igen.

Tja, låt oss göra några övningar med LESS för att få bättre inblick i vad den har att erbjuda.

Designa med mindre

I den här handledningen försöker vi skapa en smidig menynavigationsfält som är inspirerad från Apple.com. Eftersom det bara är "inspirerat" av originalprodukten, notera att vår slutliga handledningsprodukt inte kommer att vara exakt samma som originalet.

För att komma igång kanske du först vill läsa följande användbara resurser först. De förklarar några grundläggande implementeringar av LESS språk, vilket kommer att vara till hjälp för dig innan du gräver dig vidare i denna handledning.

• MINDRE ÄR MER: Gör din CSS-kodning enklare med mindre
• Skriv Bättre CSS med mindre
• En introduktion till mindre och jämförelse med Sass

Förberedelse

Först och främst finns det några viktiga saker vi behöver för det här lilla projektet, det vill säga:

1. MINDRE Textredigerare

Vi behöver en textredigerare för att koda navigeringsmenyn. De flesta av de redigerare som finns tillgängliga på marknaden idag (som Dreamweaver, Notepad ++, InType, Sublime Text 2) har dock ännu inte stött .mindre filtillägg som standard, så syntaxen kanske inte markeras bra.

Så, för denna handledning använder vi en speciell textredigerare för LESS-namnet ChrunchApp. Vi kan öppna och redigera .mindre förlängningsfiler och kompilera den i statisk CSS med den här applikationen. Eftersom det är en Adobe Air-applikation kan den installeras i alla större skrivbordssystem (Win, OSX och Linux).

För HTML-editoren kan du använda vilken redigerare du redan är bekväm med att använda nu. Jag personligen gillar Sublime Text 2.

2. Less.js

Hämta sedan det LÄSTA JavaScript-biblioteket från deras officiella hemsida, den nuvarande versionen är 1.2.1. Placera den i din träningsmapp för detta.

Länk sedan filen till HTML-dokumentet.

3. Prefix-free

Vi kommer också att använda några CSS3-funktioner för att uppnå några effekter i navigeringsmenyn som kommer att innehålla leverantörs prefix (-moz-, -o-, -webkit-) för att det ska fungera korrekt över olika webbläsare. Men jag tjänar inte personligen med prefix eftersom det kommer att blåsa upp CSS-filen.

Av detta skäl bestämde jag mig för att använda prefix-fri, ett JavaScript-bibliotek skapat av Lea Verou som kommer att hantera säljarprefix automatiskt i bakgrunden. Så vi behöver bara skriva den officiella syntaxen från W3C.

Ladda ner filen och länka den till HTML-filen.

Okej, vi är alla satt upp Låt oss nu börja strukturera HTML-markupen.

HTML Markup

Navigationen är ganska enkel. Det kommer att ha fem menyer insvept inuti en oordnad lista tagg. Öppna din favorit HTML-editor och sätt följande markup:

MINDRE Styling

I det här avsnittet börjar vi ställa in navigationen med LESS språk. För de som är nya för programmeringsliknande språk skulle det vara lite konstigt och besvärligt att skriva CSS-syntax med LESS. Men oroa dig inte, när du har någon övning, kommer det säkert roligare än hur vi skriver ren CSS (det är min erfarenhet, det är också lite beroendeframkallande).

Låt oss undersöka navigationsstilen från vår inspirationskälla.

Som vi kan se på skärmdumpen ovan har Apple.com-navigationen följande 6 vanligaste vanliga stilar:

• skugga
• gräns
• delare
• gradienter
• sväva effekten
• text

Vi lagrar dessa stilar och sparar dem inuti config.less som standardstil Konfiguration; vissa designers kanske också heter det lib.css som står för Bibliotek. Länk den här filen till vårt dokument.

Se till att du placerar den före MINSTRE JavaScript-biblioteket.

Definiera färgbas med variabler

I detta steg kommer vi att definiera navigeringsfärgbasen med hjälp av variabler. Variabeln i LESS förklaras med hjälp av @ symbol.

@theme: # 555;

Detta @tema variabel är vår standardfärg; Vi kommer att använda det på alla sätt som möjligt att svansa perfekt färgschema och så att färgkompositionen förväntas bli mer konsekvent.

Definiera Standard Shadow Style med Mixins

En av de funktioner jag älskar från LESS är Mixins. Det är ett programmeringskoncept som lagrar flera fördefinierade stilar som i MINDER kan ärftas i klasser eller ids senare i stylesheet.

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

I koden ovan inkluderade jag inte den prefixade versionen av box-shadow egendom, eftersom det prefixfria biblioteket hanterar dem automatiskt. Skuggfärgen är också ärvd från temafariabel färg.

Definiera gränsstil med parametriska mixins

Navigationsfältet behöver en distinkt kantfärg med ett litet rundat hörn. Vi kan sammanställa gränsstilen med Parametriska Mixins. Det har faktiskt samma funktionalitet som Mixins, bara skillnaden är att den också har byta parametrar så att värdena är mer justerbara.

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

I koden ovan ställer vi upp standardgränsen @radie för 3px och som vi nämnde tidigare kan detta värde ändras senare.

Definiera Gradient, Divider och Hover Style med funktion

Operation är helt enkelt ett programmeringsspråk där vi kan tillämpa matematisk formel som addition, division, subtraktion och multiplikation för att få önskat resultat. Låt oss ta en titt på följande kod:

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

I koden ovan subtraherar vi @tema variabel med # 111, På så vis skulle färgen på vänstra gränsen vara lite mörkare. Medan den högra gränsen färgen härrör från tillsatsen av @tema variabel med hex färg # 333, utsignalen skulle vara lättare.

Färgschema Nivå

Tja, för några av er som kan vara förvirrade med formler, låt oss undersöka färgscheman nedan för att få en bättre förståelse:

Den maximala mörktonen är # 000 (svart), medan den maximala ljustonen är #fff (vit) och vår nuvarande färgbas är # 555. Så, om vi vill att färgbasen ska vara 3 nivåer mörkare från strömmen, kan vi helt enkelt subtrahera det genom # 333. Samma sätt kan också tillämpas för att lätta färgen.

Därefter kommer vi att styra gradientfärgen.

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

Definiera textstil med Guard Mixins

Vi planerar att ha 2 färger på navigeringsfältet, ne mörk färg och ett ljus. Vi tillämpar två villkorliga uttalanden för texten med hjälp av Guard Mixins.

Först när texten får en färg som har ljushet lika med eller större än 50%, text-shadow bör bli mörk, i detta fall färg # 000000.

.textfärg (@txtcolor) när (ljushet (@txtcolor)> = 50%) färg: @txtcolor; textskugga: 1px 1px 0px # 000000; 

Då, när texten ges en färg som ljusheten är mindre än 50% text-shadow kommer att bli vit.

.textfärg (@txtcolor) när (ljushet (@txtcolor) 
Importerar MINDER
 
Låt oss nu skapa en annan .mindre filen heter styles.less och import config.less Gillar det:
 
@import "config.less";
 
Lägg till Font Family
 
För att navigationsfältet ska se mer tilltalande kommer vi att inkludera en ny typfamilj med @ Font-face regel. Förvånande, @ Font-face regel är faktiskt redan stödd sedan IE6!
 
Den här gången använder vi Asap-teckensnittet. Hämta det från Font Equirrels font ansiktssamling. Lägg sedan in följande stilar i vår nyligen skapade styles.less fil.
 
@ font-face font-family: 'AsapRegular'; src: url ( 'teckensnitt / Asap-Regular-webfont.eot'); src: url ('fonter / Asap-Regular-webfont.eot? #iefix') format ('inbäddad opentype'), url ('teckensnitt / Asap-Regular-webfont.woff') format format ("typsnitt / Asap-Regular-webfont.ttf") format ("truetype"), format url ('fonter / Asap-Regular-webfont.svg # AsapRegular') ('svg'); typsnitt: normal; typsnittstyp: normal;  
 
Styling kroppen med färgfunktioner
 
Nu kommer vi att ge en bakgrundsfärg till kropp (det ska vara ljusare än färgbasen) samt att ange teckensnittsfamiljen och teckensnittstorleken. Vi kan närma oss effekten med hjälp av Färgfunktioner:
 
Följande kod kommer att lätta bakgrunden till 30%.
 
kropp bakgrund: ljusare (@theme, 30%); font-family: AsapRegular, sans-serif; typsnittstorlek: 11pt; 
 
 
 
Styling Navigation med nestad regel
 
I MINDER kan vi näsa stilar direkt under dess förälder. Låt oss ta en titt på koden nedan.
 
De nav tagg som innehåller alla nödvändiga element för navigeringen kommer att ges följande stilar.
 
nav margin: 50px auto 0; bredd: 788px; höjd: 45px; .gräns; .skugga; 
 
Observera att istället för att ge en massa CSS-regler igen, lägger jag bara in .gräns att ge gränsstilen och .skugga att lägga till skugga. I reella fall kan dessa uppsättningar klasser återanvändas i ett annat element, varhelst det behövs.
 
 
 
Därefter ger vi stilar för ul inuti nav att ha nollpolstring och marginal. Inte så länge sedan kommer vi att närma oss stilen genom att skriva något så här:
 
nav ... nav ul ...
 
Det finns inget fel med det här tillvägagångssättet, jag brukade göra det varje gång och är ganska bekväm med det. Men den här metoden, många en CSS-designer har sagt, är förbunden och i vissa fall inte lätt att hantera.
 
Nu kan vi göra något så här:
 
nav margin: 50px auto 0; bredd: 788px; höjd: 45px; .gräns; .skugga; ul vaddering: 0; marginal: 0; 
 
 
 
Då visas menyn i rad med display: inline fast egendom.
 
nav margin: 50px auto 0; bredd: 788px; höjd: 45px; .gräns; .skugga; ul vaddering: 0; marginal: 0; li display: inline; 
 
 
 
I syntaxen nedan specificerar vi menyankarstilen och lägger till våra fördefinierade stilar, det vill säga: .text färg, .delare, .lutning.
 
nav margin: 50px auto 0; bredd: 788px; höjd: 45px; .gräns; .skugga; ul vaddering: 0; marginal: 0; li display: inline; en text-decoration: none; display: inline-block; flyta till vänster; bredd: 156px; höjd: 45px; text-align: center; linjehöjd: 300%; .textcolor (# f2f2f2); // Du kan ändra den här raden .divider; .lutning; 
 
I koden ovan applicerar vi hex färg # f2f2f2 där ljusheten anses vara över 50%, så vi skulle förvänta oss att skuggan blir mörk (automatiskt). Resten av koden jag är säker på är ganska självförklarande.
 
 
 
Men om vi tittar på det aktuella resultatet ovan, har var och en av menyn separatorer så att den sista sektionen överstiger botten. Så vi måste släppa gränsstilen för det första och sista barnet i navigeringsfältet.
 
nav margin: 50px auto 0; bredd: 788px; höjd: 45px; .gräns; .skugga; ul vaddering: 0; marginal: 0; li display: inline; en text-decoration: none; display: inline-block; flyta till vänster; bredd: 156px; höjd: 45px; text-align: center; linjehöjd: 300%; .textcolor (# f2f2f2); // Du kan ändra den här raden .divider; .lutning;  li: första barnet en gränsen-vänster: ingen;  li: sista barnet a gränsen-höger: ingen; 
 
 
 
Hover State
 
För det sista steget lägger vi till svängningseffekten. I MINDRE kan vi lägga till pseudo-elementet som :sväva använder sig av & symbol.
 
nav margin: 50px auto 0; bredd: 788px; höjd: 45px; .gräns; .skugga; ul vaddering: 0; marginal: 0; li display: inline; en text-decoration: none; display: inline-block; flyta till vänster; bredd: 156px; höjd: 45px; text-align: center; linjehöjd: 300%; .textcolor (# f2f2f2); // Du kan ändra den här raden .divider; .lutning; &: sväva .hovereffect;  li: första barnet en gränsen-vänster: ingen;  li: sista barnet a gränsen-höger: ingen; 
 
 
 
Ändra färgtema
 
Här är den snygga delen av MINDRE. Om vi ​​vill ändra det övergripande färgtemat kan vi göra det i färre linjebyte än vad vi behöver i ren CSS.
 
I det här fallet kommer jag att ändra navigeringsfärgen för att vara lite ljusare. Ändra bara följande två rader.
 
@theme: #ccc; //Ändra detta
 
.textcolor (# 555); //Och detta
 
Och här är resultatet.
 
 
 
Kompilera LESS i CSS
 
När vi fortfarande använder den mindre JavaScript kommer den att ta tag i .mindre fil och översätt den till statisk CSS så att standardwebbläsaren kan tolka den. Detta är ett dubbelarbete på kundsidan, för att inte tala om överflöd och bandbredd. Huvudpunkten MINDRE är i arbetsflödet för att förenkla vår praxis vid sammanställning av statisk CSS för att vara mer dynamisk och programmerbar.
 
Så när vi ska sätta navigeringsfältet på en webbplats är det viktigt att kompilera den MINDRE filen till statisk CSS.
 
Klicka på Krossa det! stor knapp.
 
 
 
Spara .less i vår träningsfil, länk den till HTML-dokumentet och koppla bort den .mindre & less.js filen från dokumentet.
 
 .skugga box-shadow: 0 1px 2px 0 # 555555;  .divider border-style: solid; kantbredd: 0 1px 0 1px; border-color: transparent # 444444 transparent # 888888;  .gradient bakgrund: linjär gradient (topp, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .hovereffekt bakgrund: linjär gradient (topp, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ font-face font-family: 'AsapRegular'; src: url ('teckensnitt / Asap-Regular-webfont.eot'); src: url ('fonter / Asap-Regular-webfont.eot? #iefix') format ('inbäddad opentype'), url ('teckensnitt / Asap-Regular-webfont.woff') format format ("typsnitt / Asap-Regular-webfont.ttf") format ("truetype"), format url ('fonter / Asap-Regular-webfont.svg # AsapRegular') ('svg'); typsnitt: normal; typsnittstyp: normal;  kropp bakgrund: # a2a2a2; font-family: AsapRegular, sans-serif; typsnittstorlek: 11pt;  nav margin: 50px auto 0; bredd: 788px; höjd: 45px; gränsstråle: 3px; gräns: 1px fast # 505050; boxskugga: 0 1px 2px 0 # 555555;  nav ul vaddering: 0; marginal: 0;  nav ul li display: inline;  nav ul li a text-decoration: none; display: inline-block; flyta till vänster; bredd: 156px; höjd: 45px; text-align: center; linjehöjd: 300%; färg: # f2f2f2; textskugga: 1px 1px 0px # 000000; gränsstil: fast; kantbredd: 0 1px 0 1px; border-color: transparent # 444444 transparent # 888888; bakgrund: linjär gradient (topp, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  nav ul li a: svever bakgrund: linjär gradient (topp, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: första barnet a border-left: none;  nav ul li: sista barnet a gränsen-höger: ingen;  
 
Låt oss ta en titt på resultatet igen.
 
 
 
Och vi är klara, var goda att experimentera med det.
 
Slutsats
 
Vi har lärt oss många saker om mindre språk idag, till exempel:
 

• variabler.
• Mixins
• Parametriska Mixins
• Operationer
• Bevakade Mixins
• Och kapslade regler

Även om det finns många saker som kan täckas vidare och många möjligheter att visas och förklaras hoppas vi ha haft denna grundläggande handledning.

• demo
• Hämta källan