background preloader

Des CSS dynamiques grâce au langage LESS

Des CSS dynamiques grâce au langage LESS
Vous avez toujours voulu utiliser des variables, des fonctions, ou encore faire de l'héritage avec le langage CSS ? C'est devenu possible grâce au langage LESS, aux frameworks Sass et xCSS. Cet article concernera uniquement le langage LESS et le compilateur LessPHP. Pour convertir une syntaxe LESS (format .less) à un format CSS valide, il faudra utiliser un compilateur comme LessCSS ou LessPHP. LessCSS permet une compilation de votre fichier .less avec Javascript, tandis qu'avec LessPHP la compilation se fera côté serveur avec PHP. Installation Vous devez obligatoirement travailler dans un environnement PHP. 1. 3. Vous pouvez maintenant commencer à travailler sur le fichier input.less, PHP fera le reste. Variables Stocker des variables est très pratique pour réutiliser une même valeur plusieurs fois et éviter les répétitions. @val : 15px; margin-left: @val; Vous pouvez faire des opérations (additions, soustractions, divisions et multiplications). Mixins Un autre exemple : Héritage Pseudo-classes Related:  CSSLESS

LESS « The Dynamic Stylesheet language LESS (langage) Pour les articles homonymes, voir Less. Less est diffusé en open source. Sa première version a été écrite en Ruby, les versions ultérieures en JavaScript. Par rapport aux autres préprocesseurs CSS, il présente la particularité de pouvoir être converti à la volée, soit par le serveur, soit par le navigateur. Il peut également être traduit automatiquement en CSS classique à l'écriture. La compilation du code Less ci-dessus donne le code CSS suivant : Les mixins permettent d'embarquer des propriétés d'une classe dans une autre classe en incluant le nom de la classe dans les propriétés. Less dispose également de blocs de règle particuliers qui sont des mixins acceptant des arguments et se comportant comme des fonctions. CSS supporte l'imbrication, mais les blocs eux-mêmes ne peuvent pas être imbriqués. Less propose les opérations et fonctions. Less autorise également l'utilisation d'expressions JavaScript. Less est inspiré par Sass[4].

Simplifiez-vous la vie avec LESS - HTML / CSS Le CSS est un langage déclaratif simple : la plupart du temps, on applique une valeur à une propriété. Mais de nos jours, avec le développement des attributs propriétaires (vous savez, les fameux -moz-*, -webkit-* et autres), le code se trouve dupliqué en de nombreux endroits. En voici un exemple typique : 1#foo { 2 -moz-border-radius: 10px; 3 -webkit-border-radius: 10px; 4 border-radius: 10px; De même, il est impossible d’imbriquer des sélecteurs en CSS : 2#foo { 3 bar { 4 color: #150; 6 baz::before { 7 content: '['; 9 baz::after { 10 content: ']'; 15#foo bar{ 16 color: #150; 18#foo baz::before { 19 content: '['; 21#foo baz::after { 22 content: ']'; Enfin, imaginons le cas où il vous faudrait définir une palette de couleurs pour votre site. Des gens intelligents se sont donc penchés sur la question, et en ont retiré l’observation suivante : « Nous devrions créer un langage dynamique capable de générer des feuilles de style que les navigateurs pourraient comprendre. » Ainsi naquit LESS.

Jardin Zen css: La beauté de la conception CSS Alors, de quoi s'agit-il ? Il faut sans cesse montrer la puissance de CSS. Le Jardin Zen vise à exciter, inspirer et encourager la participation. Pour commencer, regardez quelques designs présents dans la liste. Cliquer sur l’un d’eux appliquera son style sur cette page. Le code HTML reste le même, seule la feuille de style externe change. Les CSS permettent un contrôle total de la mise en forme d’un document hypertexte. Participation Notre objectif a toujours été de promouvoir les designs de qualité. Vous pouvez modifier la feuille de style comme bon vous semble, mais pas le code HTML. Téléchargez les fichiers d’exemple HTML et CSS pour travailler sur une copie locale. Avantages Pourquoi participer ? Conditions Si possible, nous aimerions surtout voir l’utilisation de CSS 1 et 2. Heureusement, concevoir de cette manière démontre comment les différents navigateurs ont maintenant bien implémenté les CSS. Ceci est aussi bien un exercice d’apprentissage que de démonstration. Par Dave Shea.

Les préprocesseurs CSS, c'est quoi ? C’est au tour des préprocesseurs de passer le test de l’ami du développeur ! Je vais vous expliquer un peu le concept et ensuite vous présenter LESS un des préprocesseurs les plus connus ! Les préprocesseurs CSS, pourquoi ne pas y avoir pensé auparavant ? Tout bon intégrateur sait à quel point l’indentation dans un fichier CSS est importante. C’est donc posé la question d’une dynamisation du CSS. Présentation et installation d’un préprocesseur CSS : LESS J’ai décidé de vous illustrer toutes ces belles paroles par un exemple concret, l’utilisation de LESS. Rentrons dans le vif du sujet. Désormais, vous n’allez plus écrire des feuilles CSS mais des feuilles LESS. Déclaration d’un fichier LESS sur votre site : Le fichier est donc lié à votre site mais l’extension LESS n’est pas encore comprise par le navigateur. C’est ce script qui va se charger de compiler tout cela et rendre l’utilisation de LESS possible. Utilisation d’un préprocesseur : LESS Bon voilà tout est en place. 1 – Les variables

LESS Is More: Make Your CSS Coding Easier with LESS Home : Articles : LESS Is More: Make Your CSS Coding Easier with LESS Tutorial by Matt Doyle | Level: Intermediate | Published on 18 May 2011 Categories: This tutorial introduces LESS, a dynamic stylesheet language that makes it quicker and easier to write CSS. In recent years, CSS has matured into a very powerful way to style web pages. It's now possible to create a website's look almost entirely in CSS, with minimal use of images. This is great, but one drawback is that CSS stylesheets are becoming longer, more complex, and harder to manage. For this reason, various dynamic stylesheet languages are starting to spring up. In this article you'll learn how to use LESS, an increasingly popular dynamic CSS language that you can use to streamline your CSS coding, saving you time and effort. What is LESS? LESS is a dynamic stylesheet language that extends the standard CSS syntax. LESS is easy to understand, install and use. Installing LESS in your web page Using LESS is easy: That's it! variables .

Using The Best Ampersand Available I really like one of the typographic tricks Mark Boulton makes in his "Better Typography" presentation. (Slideshow of the presentation here. Around slide #109) He suggests "using the best ampersand available". This just means that on some typefaces, the ampersand character can be a little lackluster and it can make a big improvement in style and readability to swap it out for another typeface. His (great) example is from SimpleBits: Now that's a nice looking ampersand. Then apply styling to the class. Check out some simple examples of how this can make text more pleasing: I should mention that the excellent wp-typogrify plugin automatically adds this span/class to ampersands on your WordPress blog, which is pretty slick and just one of it's many nice features. Share On

Utilisation optimisée de Framework CSS comme Bootstrap avec Less J'ai déjà abordé le sujet des Frameworks CSS qui surchargeaient le DOM HTML inutilement et allait à l'encontre de la philosophie du W3C (séparation du fond et de la forme) dans un précédent article où j'expliquais pourquoi, par exemple, Bootstrap est une régression pour un développement Front-end de qualité. J'ai également expliqué comment reproduire l'équivalent de fonctionnalités utiles dans un Framework en respectant l'approche CSS-driven dans Grille CSS Responsive et Sémantique sans Framework. Je vais ici vous démontrer que cette méthode CSS-driven peut non seulement être grandement simplifiée avec l'utilisation des préprocesseurs CSS comme Less, Sass ou Stylus, mais qu'elle permet également d'exploiter les Frameworks tel que Bootstrap de manière propre et conforme à la philosophie de séparation de la sémantique et du design. Les approches HTML-driven et CSS-driven pour habiller une page Web La différence est simple : HTML-driven où l'habillage rapide et désolant Il vous faudra : Sources

Optimisez vos CSS avec LESS | Washaweb | Création graphique, webdesign & illustration de Jérôme Poslednik Note : Ce tutoriel a été initialement publié dans le Hors Série N°15 de Webdesign Magazine. C’est avec leur aimable autorisation que je peux aujourd’hui publier cet article ici, sur mon blog. Apprenez à optimiser vos CSS en intégrant le Framework LESS. Pour ce tutoriel, vous trouverez la librairie LESS.js sur le site lesscss.org, ainsi qu’une page d’exemple ici. Introduction Lors de la réalisation d’un site HTML, on s’aperçoit que la rédaction de feuilles de styles peut vite devenir fastidieuse et répétitive. Présentation de LESS LESS peut fonctionner de différentes manières qui sont toutes détaillées sur le site (en anglais). Pour l’exemple d’intégration de ce tutoriel, nous allons partir d’un fichier HTML qui contient déjà une feuille de style selon l’exemple suivant : <! Nous déposons le fichier téléchargé less.js à la racine du site après l’avoir renommé. Activer le mode « watch » Première utilisation : les variables Opérations Héritage

Initiation au positionnement CSS (partie 2) Le positionnement des éléments en CSS est sans aucun doute l'un des aspects les plus intéressants de cette technologie, mais également l'un des plus ardus. Positions, flux et autres flottants sont pourtant des notions essentielles à une bonne maîtrise de la mise en page. Si de plus en plus d'intégrateurs semblent aujourd'hui acquérir les bases du comportement de ces propriétés, les choix des techniques demeurent couramment discutables, tout au plus hasardeux. Voyons ces méthodes de positionnement en détails afin de ne plus se laisser aller à des choix arbitraires incohérents. Sommaire du document Parce qu'une révision des bases ne fait jamais de tort… La section qui suit se contente d'introduire brièvement les notions de positionnements disponibles en CSS. Notion de flux Le flux d'un document pourrait se définir comme étant le comportement naturel d'affichage des éléments d'une page web. Les éléments de type block (h1, p, ul, ol, dl, table, blockquote, etc.) Revenir au sommaire Un habillage

Learn LESS in 10 Minutes (or Less) Danny Markov We all know CSS can be a bit frustrating to write, especially when it comes to more serious projects with thousands of lines of code. You end up duplicating the same rules all over the place and using your editor’s search and replace for every color change. It takes a lot of effort and discipline to keep your CSS maintainable. But it doesn’t have to be this way. Luckily, the web development community has solved this problem. Variables, so that you can define and easily change values throughout your stylesheet. The negative aspect is that if you use one of these pre-processors, you will need to compile your stylesheets down to regular CSS so that it works in browsers. 1. Less is written in JavaScript, and needs either Node.js or a web browser to run. If you have node installed, and you know what a terminal is, go ahead and open one. npm install -g less lessc styles.less > styles.css Let’s say we’ve written all our stylesheet rules with LESS in styles.less. 2. 3. 4. 5. 6.

Initiation au positionnement en CSS (Partie 1) Pour éviter l'usage inconsidéré des tableaux de mise en page, l'utilisation correcte de chaque élément (balises div, p, h1, ul, li, etc.) ainsi que leur positionnement en CSS est dorénavant indispensable. Les éditeurs HTML visuels n'utilisent qu'une infime partie des possibilités des balises (faussement nommées "calques" en général), ce qui les rend souvent peu compatibles et peu pratiques. Cet article en deux parties explique comment positionner les éléments en CSS de façon optimale. Résumé et pense-bête. Tous les éléments (balises) HTML peuvent être positionnés, décorés, dimensionnés, ... grâce aux styles CSS. Les balises de bloc et les balises en-ligne Ce chapitre sur la structure des balises est primordial, vous devez auparavant avoir consulté le tutoriel sur les bloc/en-ligne. Voici un résumé pour les lecteurs pressés les éléments de rendu "bloc" se placent toujours l'un en dessous de l'autre par défaut (comme un retour chariot). Ancêtre, Parents, Enfants, Frères Le Flux

Comment ne pas compiler au final les mixin dans Less | Grégoire Noyelle Récemment, après avoir beaucoup utilisé les mixins avec Less, j’ai constaté après coup que ces mêmes mixins étaient également générés dans la feuille de style compilée. Cela provoquait dans mon cas une duplication du code. Mixin dans les CSS compilé Pour ne pas avoir les mixins dans les CSS compilés par Less, il s’agit juste d’ajouter () après le nom du mixin (si celui-ci n’a pas de paramètres). Sinon, comme nous le verrons, ce n’est pas nécessaire. Cet article: How to use Mixins in LESS, a CSS Preprocessor décrit bien le processus global des mixins. Finalement, le mixin doit être vu comme un ensemble de règles CSS qui peut être intégré dans d’autres déclarations. Exemple de mixin simple Dans ce cas .traitsCommuns sera généré dans les CSS compilés Et nous aurons au final dans les CSS: Exemple de mixin avec paramètre vide Dans cet autre cas, le même mixin ne sera généré que dans les déclarations où il est utilisé. Exemple de mixins avec paramètres actifs (parameterized mixins)

Mise en page CSS avancée grâce à la propriété display L'abandon par de plus en plus d'intégrateurs de l'utilisation de tableaux pour l'élaboration de mises en page a indiscutablement apporté de nombreux avantages, mais également son lot d'inconvénients. Parmi ceux-ci, un majeur: le centrage vertical simple et automatisé du contenu d'un objet. Les habitudes de plusieurs années de développement par tables ont laissé des traces, des habitudes ancrées de manière indélébile qui ne sont pas systématiquement préjudiciables; c'est entre autres le cas du recours à la propriété vertical-align. Fort de ce constat, et vu la puissance qu'offre les cellules de tableaux en terme d'alignement vertical de leurs contenus, la spécification CSS admet logiquement l'attribution de ce comportement à tout élément qui en nécessiterait. Prenons un exemple simple de disposition d'un texte scindé en trois paragraphes que l'on souhaite agencer en drapeau: Logiquement, ma structure HTML sera des plus simplistes:

Related: