MINDER CSS-zelfstudie Een gladde navigatieknop voor het menu ontwerpen

Dit artikel maakt deel uit van ons "HTML5 / CSS3 Tutorials-serie" - toegewijd om u een betere ontwerper en / of ontwikkelaar te maken. Klik hier om meer artikelen uit dezelfde serie te zien.

Webontwerp- en ontwikkelingswereld evolueert echt snel. We kunnen dit zien aan het grote aantal nieuwe dingen die we (bijna) dagelijks in de community hebben gelanceerd, of het nu Apps of nieuwe Frameworks zijn die ons dagelijks werk als webdesigners of -ontwikkelaars effectiever en efficiënter maken.

Een die de aandacht trok van de ontwikkeling van webdesign vandaag is LESS, een programmeerbare stijlbladtaal die de manier waarop we CSS-syntax schrijven uitbreidt door enkele programmaconcepten zoals variabelen, mixins, functies en bewerkingen te combineren..

Het opent nieuwe mogelijkheden bij het schrijven van de CSS-syntaxis. Door bijvoorbeeld Mixins in CSS toe te passen zoals we in een programma doen, kunnen we nu standaardstijlen en -waarden opslaan die waar mogelijk in het hele bestand kunnen worden toegepast. Hiermee hoeven we niet steeds dezelfde stijlen te schrijven.

Wel, laten we wat oefeningen doen met LESS om beter inzicht te krijgen in wat het te bieden heeft.

Ontwerpen met MINDER

In deze zelfstudie proberen we een gelikte menubenavigatiebalk te ontwerpen die is geïnspireerd op die op Apple.com. Omdat het alleen 'geïnspireerd' is door het originele product, moet u er rekening mee houden dat ons laatste zelfstudieproduct niet precies hetzelfde is als het origineel.

Om te beginnen, wilt u misschien eerst de volgende nuttige bronnen lezen. Ze leggen een aantal basisimplementaties van MINDER taal uit, die nuttig voor je zullen zijn voordat je verder gaat in deze tutorial.

• LESS Is More: maak je CSS-codering gemakkelijker met minder
• Schrijf betere CSS met minder
• Een inleiding tot MINDER en een vergelijking met Sass

Voorbereiding

Allereerst zijn er enkele essentiële dingen die we nodig hebben voor dit kleine project, dat is:

1. MINDER teksteditor

We hebben een teksteditor nodig om het navigatiemenu te coderen. De meeste teksteditors die momenteel op de markt zijn (zoals Dreamweaver, Notepad ++, InType, Sublime Text 2) moeten echter nog worden ondersteund .minder bestandsextensies standaard, zodat de syntaxis mogelijk niet goed wordt gemarkeerd.

Voor deze tutorial gebruiken we daarom een ​​speciale teksteditor voor LESS met de naam ChrunchApp. We kunnen openen en bewerken .minder extensiebestanden en compileer deze in statische CSS met behulp van deze applicatie. Omdat het een Adobe Air-toepassing is, kan deze worden geïnstalleerd in elk belangrijk desktop-besturingssysteem (Win, OSX en Linux).

Voor de HTML-editor kunt u elke editor gebruiken die u nu al comfortabel vindt. Ik hou persoonlijk van Sublime Text 2.

2. Less.js

Download vervolgens de LESS JavaScript Library van hun officiële website, de huidige versie is 1.2.1. Plaats dit voor je in je oefenmap.

Koppel het bestand vervolgens aan het HTML-document.

3. Voorvoegselvrij

We zullen ook een paar CSS3-functies gebruiken om sommige effecten in het navigatiemenu te bereiken, die voorvoegsels van leveranciers bevatten (-moz-, -O-, -webkit-) om correct te kunnen weergeven in verschillende browsers. Persoonlijk ben ik er echter niet voor gebaat om voorvoegsels te gebruiken omdat het het CSS-bestand zal doen zweten.

Om deze reden heb ik besloten om prefix-vrij te gebruiken, een JavaScript-bibliotheek gemaakt door Lea Verou die de voorvoegsels van de leverancier automatisch op de achtergrond verwerkt. We hoeven dus alleen de officiële syntaxis van W3C te schrijven.

Download het bestand en koppel het aan het HTML-bestand.

Oké, we zijn allemaal klaar; laten we nu beginnen met het structureren van de HTML-markup.

HTML-markup

De navigatie is vrij eenvoudig. Het bevat vijf menu's die zijn ingepakt in een ongeordende lijsttag. Open uw favoriete HTML-editor en plaats de volgende markup:

MINDER Styling

In deze sectie zullen we beginnen met het stylen van de navigatie met de MINDER taal. Voor degenen die nieuw zijn in programmeertaal, zou het schrijven van CSS-syntaxis met LESS een beetje raar en ongemakkelijk aanvoelen. Maar maak je geen zorgen, als je eenmaal wat oefening hebt gedaan, zal het zeker leuker zijn dan de manier waarop we pure CSS schrijven (het is mijn ervaring, het is ook een beetje verslavend).

Laten we de navigatiestijl eens bekijken vanuit onze inspiratiebron.

Zoals we in de bovenstaande schermafbeelding kunnen zien, heeft de Apple.com-navigatie de volgende 6 belangrijkste algemene stijlen:

• schaduw
• grens
• verdeler
• gradiënten
• zweefeffect
• tekst

We slaan deze stijlen op en bewaren ze binnen config.less als de standaardstijl Configuratie; sommige ontwerpers noemen het ook lib.css dat staat voor Bibliotheek. Koppel dit bestand aan ons document.

Zorg ervoor dat u het vóór de LESS JavaScript-bibliotheek plaatst.

Kleurbasis definiëren met variabelen

In deze stap zullen we de basis van de navigatiekleur definiëren met behulp van variabelen. De variabele in MINDER wordt gedeclareerd met behulp van de @ symbool.

@thema: # 555;

Deze @thema variabele is onze standaardkleur; we zullen het op alle mogelijke manieren gebruiken om een ​​perfect kleurenschema na te streven en de verwachting is dat de kleurcompositie consistenter wordt.

Definieer de standaardschaduwstijl met mixins

Een van de functies waar ik van hou van LESS is Mixins. Het is een programmeerconcept dat verschillende voorgedefinieerde stijlen opslaat die in MINDER geërfd kunnen worden in klassen of id's later in het stylesheet.

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

In de bovenstaande code heb ik niet de voorgemengde versie van de box-shadow eigenschap, aangezien de prefix-vrije bibliotheek ze automatisch verwerkt. De schaduwkleur wordt ook overgenomen van de themavariatiekleur.

Definieer randstijl met parametrische mixins

De navigatiebalk heeft een duidelijke randkleur nodig met een enigszins afgeronde hoek. We kunnen de randstijl compileren met behulp van parametrische mixins. Het heeft eigenlijk dezelfde functionaliteit als Mixins, alleen is het verschil dat het ook veranderbare parameters heeft, zodat de waarden meer instelbaar zijn.

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

In de bovenstaande code stellen we de standaardrand in @radius voor 3px en zoals we eerder hebben vermeld, kan deze waarde later worden gewijzigd.

Definieer Verloop, Verdeler en Zweefstijl met bediening

Bediening is eenvoudigweg een programmeertaal waarin we wiskundige formules zoals optellen, delen, aftrekken en vermenigvuldigen kunnen toepassen om een ​​gewenst resultaat te krijgen. Laten we de volgende code eens bekijken:

.scheidingslijn border-style: solid; grensbreedte: 0 1px 0 1px; border-color: transparant @thema - # 111 transparent @theme + # 333; 

In de bovenstaande code trekken we af @thema variabel door # 111, op deze manier zou de kleuruitvoer aan de linkerrand een beetje donkerder zijn. Terwijl de rechterrandkleur is afgeleid van de toevoeging van @thema variabele met hex kleur # 333, de uitvoer zou lichter zijn.

Kleurenschema niveau

Welnu, voor sommigen van jullie die misschien worden verward met formules, laten we het onderstaande kleurenschema bekijken om een ​​beter begrip te krijgen:

De maximale donkere toon is # 000 (zwart), terwijl de maximale lichttint is #fff (wit) en onze huidige kleurenbasis is # 555. Dus, als we willen dat de kleurbasis is 3 niveaus donkerder van de stroom, kunnen we eenvoudig aftrekken door # 333. Dezelfde manier kan ook worden toegepast om de kleur lichter te maken.

Vervolgens zullen we de gradiëntkleur gebruiken.

.gradiënt achtergrond: lineair verloop (boven, @thema + # 252525 0%, @thema + # 171717 50%, @thema - # 010101 51%, @thema + # 151515 100%);  .hovereffect background: linear-gradient (top, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

Definieer de tekststijl met Guard Mixins

We zijn van plan om 2 kleuren op de navigatiebalk, ne donkere kleur en één licht te hebben. We passen twee voorwaardelijke uitspraken toe voor de tekst met behulp van Guard Mixins.

Ten eerste, wanneer de tekst een kleur krijgt met een lichtheid gelijk aan of groter dan 50%, de schaduw tekst moet donker worden, in dit geval kleur # 000000.

.textcolor (@txtcolor) when (lichtheid (@txtcolor)> = 50%) color: @txtcolor; tekstschaduw: 1px 1px 0px # 000000; 

Dan, wanneer de tekst een kleur krijgt die de lichtheid minder is dan 50% de schaduw tekst wordt wit.

.textcolor (@txtcolor) when (lichtheid (@txtcolor) 
LESS importeren
 
Laten we nu een andere maken .minder bestand met de naam styles.less en importeer config.less erin:
 
@import "config.less";
 
Font familie toevoegen
 
Om de navigatiebalk er aantrekkelijker te laten uitzien, zullen we een nieuwe lettertypefamilie gebruiken @ Font-face regel. Verrassend genoeg, @ Font-face regel wordt al ondersteund sinds IE6!
 
Deze keer gebruiken we het Asap-lettertype. Download het uit de lettertypecollectie van Font Squirrel. Voeg vervolgens de volgende stijlen toe aan onze onlangs gemaakte stijlen styles.less het dossier.
 
@ font-face font-family: 'AsapRegular'; src: url ( 'fonts / Asap-Regular-webfont.eot'); src: url ('fonts / Asap-Regular-webfont.eot? #iefix') formaat ('embedded-opentype'), url ('fonts / Asap-Regular-webfont.woff') formaat ('woff'), url ('fonts / Asap-Regular-webfont.ttf') formaat ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') formaat ('svg'); font-gewicht: normaal; lettertype: normaal;  
 
Styling van de body met kleurfuncties
 
Nu geven we een achtergrondkleur aan de lichaam (dat moet lichter zijn dan de basiskleur) en ook de lettertypefamilie en lettergrootte opgeven. We kunnen het effect benaderen met behulp van de kleurfuncties:
 
De volgende code verlicht de achtergrond met 30%.
 
body background: lighten (@theme, 30%); font-family: AsapRegular, sans-serif; lettergrootte: 11pt; 
 
 
 
Stylen van de navigatie met geneste regel
 
In MINDER zijn we in staat stijlen rechtstreeks onder de bovenliggende te nesten. Laten we de onderstaande code eens bekijken.
 
De nav tag die alle noodzakelijke elementen voor de navigatie bevat, krijgt de volgende stijlen.
 
nav margin: 50px auto 0; breedte: 788 px; hoogte: 45 px; .grens; .schaduw; 
 
Merk op dat ik, in plaats van weer een stel CSS-regels te geven, alleen ingevoegd heb .grens om de randstijl te geven en .schaduw om schaduw toe te voegen. In het echte geval kunnen deze klassen worden hergebruikt in een ander element, waar dat ook nodig is.
 
 
 
Vervolgens geven we stijlen voor de ul binnen in de nav om nul opvulling en marge te hebben. Nog niet zo lang geleden zullen we de stijl benaderen door iets als dit te schrijven:
 
nav ... nav ul ...
 
Er is niets mis met deze aanpak, sterker nog, ik deed het elke keer en ben er redelijk comfortabel mee. Echter, deze methode, zoals veel CSS-ontwerpers hebben gezegd, is verbosed en in sommige gevallen niet gemakkelijk hanteerbaar.
 
Nu kunnen we zoiets als dit doen:
 
nav margin: 50px auto 0; breedte: 788 px; hoogte: 45 px; .grens; .schaduw; ul opvulling: 0; marge: 0; 
 
 
 
En dan wordt het menu in een rij weergegeven met behulp van weergeven: inline eigendom.
 
nav margin: 50px auto 0; breedte: 788 px; hoogte: 45 px; .grens; .schaduw; ul opvulling: 0; marge: 0; li display: inline; 
 
 
 
In de onderstaande syntaxis geven we de ankertagstijl voor het menu op en voegen we onze vooraf gedefinieerde stijlen toe, namelijk: .tekst kleur, .verdeler, .helling.
 
nav margin: 50px auto 0; breedte: 788 px; hoogte: 45 px; .grens; .schaduw; ul opvulling: 0; marge: 0; li display: inline; een text-decoration: none; weergave: inline-block; zweven: links; breedte: 156 px; hoogte: 45 px; text-align: center; regelhoogte: 300%; .textcolor (# f2f2f2); // U kunt deze regel wijzigen .divider; .gradient; 
 
In de bovenstaande code passen we hex-kleuren toe # f2f2f2 waarbij de lichtheid wordt beschouwd als meer dan 50%, dus we zouden verwachten dat de schaduw (automatisch) donker wordt. De rest van de code die ik zeker weet, is tamelijk zelfverklarend.
 
 
 
Als we echter naar het huidige resultaat hierboven kijken, heeft elk menu een scheiding waardoor het laatste gedeelte naar de bodem overloopt. We moeten dus de randstijl voor het eerste en laatste kind van de navigatiebalk weglaten.
 
nav margin: 50px auto 0; breedte: 788 px; hoogte: 45 px; .grens; .schaduw; ul opvulling: 0; marge: 0; li display: inline; een text-decoration: none; weergave: inline-block; zweven: links; breedte: 156 px; hoogte: 45 px; text-align: center; regelhoogte: 300%; .textcolor (# f2f2f2); // U kunt deze regel wijzigen .divider; .gradient;  li: first-child a border-left: none;  li: last-child a border-right: none; 
 
 
 
Hover State
 
Voor de laatste stap zullen we het zweefeffect toevoegen. In LESS kunnen we toevoegen pseudo-element zoals : hover gebruik makend van & symbool.
 
nav margin: 50px auto 0; breedte: 788 px; hoogte: 45 px; .grens; .schaduw; ul opvulling: 0; marge: 0; li display: inline; een text-decoration: none; weergave: inline-block; zweven: links; breedte: 156 px; hoogte: 45 px; text-align: center; regelhoogte: 300%; .textcolor (# f2f2f2); // U kunt deze regel wijzigen .divider; .gradient; &: hover .hovereffect;  li: first-child a border-left: none;  li: last-child a border-right: none; 
 
 
 
Verander het kleurenthema
 
Hier is het coole deel van MINDER. Als we het algehele kleurthema willen wijzigen, kunnen we dit in minder regelwijzigingen doen dan wat we nodig hebben in pure CSS.
 
In dit geval zal ik de navigatiekleur wat lichter maken. Verander eenvoudig de volgende twee regels.
 
@theme: #ccc; //Verander dit
 
.textcolor (# 555); //En dit
 
En hier is het resultaat.
 
 
 
Compileer MINDER in CSS
 
Wanneer we nog steeds het LESS JavaScript gebruiken, zal het de .minder bestand en vertaal het naar statische CSS, zodat de standaardbrowser het kan interpreteren. Dit is een dubbele klus aan de kant van de klant, om nog te zwijgen van overbodige en verspilling van bandbreedte. Het belangrijkste punt van LESS is de workflow om onze werkwijze bij het compileren van statische CSS te vereenvoudigen en meer dynamisch en programmeerbaar te maken.
 
Dus, wanneer we de navigatiebalk live op een website willen plaatsen, is het belangrijk om het LESS-bestand te compileren in statische CSS.
 
Klik op de Crunch It! grote knop.
 
 
 
Sla de .less op in ons oefenbestand, koppel het aan het HTML-document en ontkoppel de .minder & less.js bestand van het document.
 
 .schaduw doosje-schaduw: 0 1px 2px 0 # 555555;  .divider border-style: solid; grensbreedte: 0 1px 0 1px; randkleur: transparant # 444444 transparant # 888888;  .gradient background: linear-gradient (top, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .hovereffect background: linear-gradient (top, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ font-face font-family: 'AsapRegular'; src: url ('fonts / Asap-Regular-webfont.eot'); src: url ('fonts / Asap-Regular-webfont.eot? #iefix') formaat ('embedded-opentype'), url ('fonts / Asap-Regular-webfont.woff') formaat ('woff'), url ('fonts / Asap-Regular-webfont.ttf') formaat ('truetype'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') formaat ('svg'); font-gewicht: normaal; lettertype: normaal;  body background: # a2a2a2; font-family: AsapRegular, sans-serif; lettergrootte: 11pt;  nav margin: 50px auto 0; breedte: 788 px; hoogte: 45 px; grensradius: 3px; rand: 1px vast # 505050; vakschaduw: 0 1px 2px 0 # 555555;  nav ul opvulling: 0; marge: 0;  nav ul li display: inline;  nav ul li a text-decoration: none; weergave: inline-block; zweven: links; breedte: 156 px; hoogte: 45 px; text-align: center; regelhoogte: 300%; kleur: # f2f2f2; tekstschaduw: 1px 1px 0px # 000000; randstijl: stevig; grensbreedte: 0 1px 0 1px; randkleur: transparant # 444444 transparant # 888888; achtergrond: lineaire gradiënt (bovenkant, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  nav ul li a: hover background: linear-gradient (top, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: first-child a border-left: none;  nav ul li: last-child a border-right: none;  
 
Laten we het resultaat opnieuw bekijken.
 
 
 
En we zijn klaar, aarzel niet om ermee te experimenteren.
 
Conclusie
 
We hebben vandaag veel dingen over LESS language geleerd, zoals:
 

• Variabelen.
• mixins
• Parametrische mixins
• Activiteiten
• Bewaakte Mixins
• En geneste regels

Hoewel er veel dingen zijn die verder kunnen worden behandeld en veel mogelijkheden worden getoond en uitgelegd, hopen we dat je deze eenvoudige tutorial leuk vond.

• demonstratie
• Download de bron