MOINS CSS Tutoriel Conception d’un menu astucieux Barre de navigation

Cet article fait partie de notre "Série de tutoriels HTML5 / CSS3" - dédié à vous aider à faire de vous un meilleur concepteur et / ou développeur. Cliquez ici pour voir plus d'articles de la même série.

Le monde de la conception et du développement Web évolue rapidement. Nous pouvons le voir dans le grand nombre de nouveautés lancées dans la communauté (presque) tous les jours, que ce soit des applications ou de nouveaux frameworks qui contribuent à rendre notre travail quotidien de concepteur ou de développeur Web plus efficace..

LESS est un langage de feuille de style programmable qui a élargi la façon dont nous écrivons la syntaxe CSS en combinant certains concepts de programmation tels que Variables, Mixins, Fonctions et Opérations..

Il ouvre de nouvelles capacités en écriture de syntaxe CSS. Par exemple, en appliquant Mixins en CSS comme nous le faisons dans un programme, nous pouvons désormais stocker des styles et des valeurs par défaut pouvant être appliqués à l'ensemble du fichier, dans la mesure du possible. Avec cela, nous n'aurons plus besoin d'écrire les mêmes styles.

Eh bien, faisons quelques exercices avec MOINS pour mieux comprendre ce qu’il a à offrir.

Concevoir avec MOINS

Dans ce tutoriel, nous allons essayer de concevoir une barre de navigation de menu fluide inspirée de celle de Apple.com. Comme il est uniquement "inspiré" par le produit original, notez que notre didacticiel final ne sera pas exactement le même que l'original..

Pour commencer, vous voudrez peut-être lire les ressources utiles suivantes en premier. Ils expliquent quelques implémentations de base du langage LESS, qui vous seront utiles avant de creuser davantage ce didacticiel..

• LESS Is More: simplifiez votre codage CSS avec LESS
• Écrire mieux CSS avec moins
• Une introduction à MOINS, et la comparaison à Sass

Préparation

Tout d’abord, nous avons besoin de choses essentielles pour ce petit projet, à savoir:

1. MOINS Éditeur de texte

Nous aurons besoin d’un éditeur de texte pour coder le menu de navigation. Cependant, la plupart des éditeurs de texte disponibles sur le marché (tels que Dreamweaver, Notepad ++, InType, Sublime Text 2) n’ont pas encore été pris en charge. .Moins extensions de fichier par défaut, donc la syntaxe peut ne pas être bien mise en évidence.

Ainsi, dans le cadre de ce didacticiel, nous utiliserons un éditeur de texte spécial pour LESS nommé ChrunchApp. Nous pouvons ouvrir et éditer .Moins extension et compilez-le en CSS statique en utilisant cette application. Puisqu'il s'agit d'une application Adobe Air, il peut être installé dans tous les principaux systèmes d'exploitation de bureau (Win, OSX et Linux)..

Pour l'éditeur HTML, vous pouvez utiliser n'importe quel éditeur avec lequel vous êtes déjà familiarisé. Personnellement, j'aime Sublime Text 2.

2. Less.js

Ensuite, téléchargez la bibliothèque JavaScript LESS à partir de leur site officiel. La version actuelle est la 1.2.1. Placez-le dans votre dossier de pratique pour cette.

Liez ensuite le fichier au document HTML.

3. Sans préfixe

Nous utiliserons également quelques fonctionnalités CSS3 pour obtenir des effets dans le menu de navigation, qui inclura des préfixes de fournisseur (-moz-, -o-, -webkit-) pour qu’il soit correctement rendu sur différents navigateurs. Cependant, personnellement, je ne suis pas en faveur de l’utilisation de préfixes car cela alourdirait le fichier CSS.

Pour cette raison, j'ai décidé d'utiliser prefix-free, une bibliothèque JavaScript créée par Lea Verou qui gérera automatiquement les préfixes du fournisseur en arrière-plan. Nous aurons donc besoin d'écrire seulement la syntaxe officielle du W3C.

Télécharger le fichier et le lier au fichier HTML.

Très bien, nous sommes tous bien organisés. maintenant commençons à structurer le balisage HTML.

Balisage HTML

La navigation est assez simple. Cinq menus seront insérés dans une balise de liste non ordonnée. Ouvrez votre éditeur HTML favori et mettez le balisage suivant:

MOINS de style

Dans cette section, nous allons commencer à styler la navigation avec le langage LESS. Pour ceux qui sont nouveaux dans le langage de programmation, écrire une syntaxe CSS avec LESS serait un peu étrange et délicat. Mais ne vous inquiétez pas, une fois que vous avez un peu de pratique, ce sera sûrement plus agréable que la façon dont nous écrivons du CSS pur (c'est mon expérience, c'est aussi un peu addictif).

Examinons le style de navigation de notre source d'inspiration.

Comme nous pouvons le voir dans la capture d'écran ci-dessus, la navigation de Apple.com comporte les 6 styles principaux suivants:

• ombre
• frontière
• diviseur
• les gradients
• effet de survol
• texte

Nous allons stocker ces styles et les sauvegarder à l'intérieur sans config comme style par défaut Configuration; certains designers pourraient aussi le nommer lib.css cela signifie Bibliothèque. Lier ce fichier à notre document.

Assurez-vous de le placer avant la bibliothèque JavaScript LESS.

Définir la base de couleur avec des variables

Dans cette étape, nous définirons la base de couleur de navigation à l'aide de variables. La variable dans LESS est déclarée en utilisant le @ symbole.

@theme: # 555;

Ce @thème variable est notre couleur standard; nous allons l'utiliser de toutes les manières possibles pour obtenir un schéma de couleurs parfait et pour que la composition des couleurs devienne plus cohérente.

Définir le style d'ombre par défaut avec Mixins

Une des caractéristiques que j'aime moins de Mix est Mixins. C'est un concept de programmation qui stocke plusieurs styles prédéfinis qui, dans LESS, peuvent être hérités dans des classes ou des identifiants plus tard dans la feuille de style..

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

Dans le code ci-dessus, je n’ai pas inclus la version préfixée de la boîte ombre propriété, puisque la bibliothèque sans préfixe les gérera automatiquement. De plus, la couleur de l'ombre est héritée de la couleur de la variable thème.

Définir le style de bordure avec les mixins paramétriques

La barre de navigation aura besoin d’une couleur de bordure distincte avec un coin légèrement arrondi. Nous pouvons compiler le style de bordure à l'aide de mixins paramétriques. Il a en fait les mêmes fonctionnalités que Mixins, la seule différence est qu’il a également des paramètres modifiables pour que les valeurs soient plus ajustables.

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

Dans le code ci-dessus, nous définissons la bordure par défaut @rayon pour 3px et comme nous l'avons mentionné précédemment, cette valeur peut être modifiée ultérieurement.

Définir le style de dégradé, de division et de survol avec opération

Operation est simplement un langage de programmation dans lequel on peut appliquer des formules mathématiques telles que Addition, Division, Subtraction et Multiplication pour obtenir le résultat souhaité. Jetons un coup d'oeil au code suivant:

.diviseur style de bordure: solide; largeur de la bordure: 0 1 px 0 1 px; border-color: transparent @theme - # 111 transparent @theme + # 333; 

Dans le code ci-dessus, nous soustrayons @thème variable par # 111, De cette façon, la sortie couleur de la bordure gauche serait un peu plus sombre. Bien que la couleur de bordure droite provienne de l’ajout de @thème variable avec couleur hexagonale # 333, la sortie serait plus légère.

Niveau de palette de couleurs

Pour certains d'entre vous qui pourraient être confondus avec des formules, examinons le schéma de couleurs ci-dessous pour mieux comprendre:

Le ton sombre maximum est # 000 (noir), tandis que le ton de lumière maximum est #fff (blanc) et notre couleur de base actuelle est # 555. Donc, si nous voulons que la base de couleur soit 3 niveaux plus sombre du courant, on peut simplement le soustraire par # 333. La même manière peut également être appliquée pour alléger la couleur.

Ensuite, nous allons utiliser la couleur de dégradé.

.dégradé arrière-plan: dégradé linéaire (en haut, @theme + # 252525 0%, @theme + # 171717 50%, @theme - # 010101 51%, @theme + # 151515 100%);  .hovereffect background: linear-gradient (haut, @theme - # 010101 0%, @theme - # 121212 50%, @theme - # 222222 51%, @theme - # 050505 100%); 

Définir le style du texte avec Guard Mixins

Nous prévoyons d’avoir 2 couleurs sur la barre de navigation, une couleur sombre et une lumière. Nous appliquons deux instructions conditionnelles pour le texte à l'aide de Guard Mixins.

Tout d’abord, lorsque le texte reçoit une couleur dont la luminosité est égale ou supérieure à 50%, le ombre de texte devrait devenir sombre, dans ce cas la couleur # 000000.

.textcolor (@txtcolor) lorsque (luminosité (@txtcolor)> = 50%) color: @txtcolor; text-shadow: 1px 1px 0px # 000000; 

Ensuite, lorsque le texte reçoit une couleur dont la luminosité est inférieure à 50%, le ombre de texte deviendra blanc.

.textcolor (@txtcolor) lorsque (luminosité (@txtcolor) 
Importer MOINS
 
Créons maintenant un autre .Moins fichier nommé styles.less et importer sans config dans ça:
 
@import "config.less";
 
Ajouter une famille de polices
 
Pour que la barre de navigation soit plus attrayante, nous allons inclure une nouvelle famille de polices utilisant @ font-face règle. Étonnamment, @ font-face la règle est en fait déjà supportée depuis IE6!
 
Cette fois, nous allons utiliser la police Asap. Téléchargez-le à partir de la collection de polices Font Squirrel. Puis insérez les styles suivants à notre création récente styles.less fichier.
 
@ font-face font-family: 'AsapRegular'; src: url ('fonts / Asap-Regular-webfont.eot'); src: url ('polices / Asap-Regular-webfont.eot? #iefix') format ('embedded-opentype'), url ('fonts / Asap-Regular-webfont.woff') format ('woff'), url ('fonts / Asap-Regular-webfont.ttf') format ('TrueType'), url ('fonts / Asap-Regular-webfont.svg # AsapRegular') format ('svg'); poids de la police: normal; style de police: normal;  
 
Styliser le corps avec les fonctions de couleur
 
Maintenant, nous allons donner une couleur de fond à la corps (cela devrait être plus clair que la couleur de base) et spécifier la famille et la taille de la police. Nous pouvons aborder l'effet à l'aide des fonctions de couleur:
 
Le code suivant éclaircira le fond à 30%.
 
corps fond: alléger (@theme, 30%); famille de polices: AsapRegular, sans-serif; taille de police: 11 points; 
 
 
 
Styliser la navigation avec la règle imbriquée
 
Dans MOINS, nous pouvons imbriquer des styles directement sous son parent. Jetons un coup d'oeil au code ci-dessous.
 
le nav balise contenant tous les éléments nécessaires à la navigation se verra attribuer les styles suivants.
 
nav margin: 50px auto 0; largeur: 788px; hauteur: 45px; .frontière; .ombre; 
 
Notez que, au lieu de redonner un paquet de règles CSS, j’ai seulement inséré .frontière pour donner le style de la frontière et .ombre ajouter de l'ombre. Dans les cas réels, ces ensembles de classes peuvent également être réutilisés dans un autre élément, selon les besoins..
 
 
 
Ensuite, nous donnons des styles pour le ul à l'intérieur de nav d'avoir zéro padding et margin. Il n'y a pas si longtemps, nous aborderons le style en écrivant quelque chose comme ceci:
 
nav … nav ul …
 
Il n'y a rien de mal à cette approche, en fait, je le faisais à chaque fois et je suis assez à l'aise avec ça. Cependant, beaucoup de concepteurs de CSS ont dit que cette méthode est commentée et, dans certains cas, difficile à gérer..
 
Maintenant, nous pouvons faire quelque chose comme ça:
 
nav margin: 50px auto 0; largeur: 788px; hauteur: 45px; .frontière; .ombre; ul remplissage: 0; marge: 0; 
 
 
 
Et puis le menu sera affiché dans une rangée en utilisant affichage: en ligne propriété.
 
nav margin: 50px auto 0; largeur: 788px; hauteur: 45px; .frontière; .ombre; ul remplissage: 0; marge: 0; li display: inline; 
 
 
 
Dans la syntaxe ci-dessous, nous spécifions le style de balise d'ancrage de menu et ajoutons nos styles prédéfinis, à savoir: .couleur du texte, .diviseur, .pente.
 
nav margin: 50px auto 0; largeur: 788px; hauteur: 45px; .frontière; .ombre; ul remplissage: 0; marge: 0; li display: inline; une text-decoration: none; affichage: inline-block; float: gauche; largeur: 156px; hauteur: 45px; text-align: center; hauteur de trait: 300%; .textcolor (# f2f2f2); // Vous pouvez changer cette ligne .divider; .pente; 
 
Dans le code ci-dessus, nous appliquons la couleur hexadécimale # f2f2f2 dans lequel la luminosité est considérée supérieure à 50%, nous nous attendrions donc à voir l'ombre s'assombrir (automatiquement). Je suis sûr que le reste du code est assez explicite.
 
 
 
Cependant, si nous examinons le résultat actuel ci-dessus, chacun des menus comporte des séparateurs, ce qui entraîne le débordement de la dernière section. Nous devons donc omettre le style de bordure pour le premier et le dernier enfant de la barre de navigation..
 
nav margin: 50px auto 0; largeur: 788px; hauteur: 45px; .frontière; .ombre; ul remplissage: 0; marge: 0; li display: inline; une text-decoration: none; affichage: inline-block; float: gauche; largeur: 156px; hauteur: 45px; text-align: center; hauteur de trait: 300%; .textcolor (# f2f2f2); // Vous pouvez changer cette ligne .divider; .pente;  li: premier-enfant a border-left: none;  li: dernier-enfant a border-right: none; 
 
 
 
Hover State
 
Pour la dernière étape, nous allons ajouter l'effet de survol. En MOINS on peut ajouter pseudo-élément tel que :flotter en utilisant Et symbole.
 
nav margin: 50px auto 0; largeur: 788px; hauteur: 45px; .frontière; .ombre; ul remplissage: 0; marge: 0; li display: inline; une text-decoration: none; affichage: inline-block; float: gauche; largeur: 156px; hauteur: 45px; text-align: center; hauteur de trait: 300%; .textcolor (# f2f2f2); // Vous pouvez changer cette ligne .divider; .pente; &: hover .hovereffect;  li: premier-enfant a border-left: none;  li: dernier-enfant a border-right: none; 
 
 
 
Changer le thème de couleur
 
Voici la partie cool de LESS. Si nous voulons changer le thème de couleur général, nous pouvons le faire en moins de changements de ligne que ce dont nous avons besoin en CSS pur..
 
Dans ce cas, je modifierai la couleur de navigation pour qu'elle soit un peu plus claire. Il suffit de changer les deux lignes suivantes.
 
@theme: #ccc; //Change ça
 
.couleur du texte (# 555); //Et ça
 
Et voici le résultat.
 
 
 
Compiler LESS en CSS
 
Lorsque nous utilisons encore le code JavaScript MOINS, il saisira le .Moins fichier et le traduire en CSS statique afin que le navigateur standard puisse l’interpréter. Il s’agit d’un double travail côté client, sans parler de la redondance et du gaspillage de bande passante. Le principal avantage de LESS réside dans le flux de travail afin de simplifier notre travail de compilation de CSS statique afin d’être plus dynamique et programmable..
 
Ainsi, lorsque nous sommes sur le point de mettre la barre de navigation en direct sur un site Web, il est important de compiler le fichier LESS en CSS statique..
 
Clique le Crunch It! gros bouton.
 
 
 
Enregistrez le fichier .less dans notre fichier d’exercice, associez-le au document HTML et dissociez-le. .Moins Et less.js fichier du document.
 
 .shadow box-shadow: 0 1px 2px 0 # 555555;  .divider border-style: solid; largeur de la bordure: 0 1 px 0 1 px; border-color: transparent # 444444 transparent # 888888;  .gradient background: linear-gradient (haut, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  .hovereffect background: linear-gradient (haut, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  @ font-face font-family: 'AsapRegular'; src: url ('fonts / Asap-Regular-webfont.eot'); src: url ('polices / Asap-Regular-webfont.eot? #iefix') format ('embedded-opentype'), url ('fonts / Asap-Regular-webfont.woff') format ('woff'), url ('fonts / Asap-Regular-webfont.ttf') format ('TrueType'), url ('polices / Asap-Regular-webfont.svg # AsapRegular') format ('svg'); poids de la police: normal; style de police: normal;  body background: # a2a2a2; famille de polices: AsapRegular, sans-serif; taille de police: 11 points;  nav margin: 50px auto 0; largeur: 788px; hauteur: 45px; border-radius: 3px; bordure: solide 1px # 505050; box-shadow: 0 1px 2px 0 # 555555;  nav ul padding: 0; marge: 0;  nav ul li display: inline;  nav ul li a text-decoration: none; affichage: inline-block; float: gauche; largeur: 156px; hauteur: 45px; text-align: center; hauteur de trait: 300%; couleur: # f2f2f2; text-shadow: 1px 1px 0px # 000000; style de bordure: solide; largeur de la bordure: 0 1 px 0 1 px; border-color: transparent # 444444 transparent # 888888; arrière-plan: gradient linéaire (haut, # 7a7a7a 0%, # 6c6c6c 50%, # 545454 51%, # 6a6a6a 100%);  nav ul li a: survol arrière-plan: gradient linéaire (haut, # 545454 0%, # 434343 50%, # 333333 51%, # 505050 100%);  nav ul li: premier enfant a border-left: none;  nav ul li: dernier-enfant a border-right: none;  
 
Regardons le résultat une fois de plus.
 
 
 
Et nous avons fini, n'hésitez pas à expérimenter.
 
Conclusion
 
Nous avons appris beaucoup de choses sur le langage LESS aujourd'hui, telles que:
 

• Variables.
• Mixins
• Mixins paramétriques
• Des opérations
• Mixins Gardés
• Et règles imbriquées

Bien qu'il y ait beaucoup de choses qui peuvent être approfondies et de nombreuses possibilités à montrer et à expliquer, nous espérons que vous avez apprécié ce tutoriel de base.

• Démo
• Source de téléchargement