Introduction

Salut la compagnie !

Petite introduction égocentrique pour vous expliquer pourquoi un article sur Crunch!

Je vais à partir de maintenant tâcher de vous proposer quelques codes directement exploitables (ou "Libre Service") et, pour vous en faciliter la personnalisation, vous proposer les versions LESS des fichiers CSS. Qu'est-ce que donc que le LESS, me demanderez vous ? Il s'agit d'une version un peu particulière du CSS qui autorise l'utilisation de variables, fonctions et autres joies de la programmation. Vous pouvez en apprendre plus sur le site officiel si ça vous intéresse.

Cela étant dit, inutile de vous triturer les méninges dessus, vous n'aurez pas besoin d'apprendre à coder en LESS pour vous servir de ces fichiers. En effet, voici donc un logiciel qui vous permettra d'en extraire la substantifique moelle, j'ai nommé CRUNCH!

Les prérequis

Vous le trouverez le logiciel à cette adresse : https://getcrunch.co/

Tout ceci est gratuit, n'ayez pas peur !

Téléchargez Crunch 2! en version gratuite (Free). N'ayez pas peur de l'anglais, il ne vous mordra pas, promis

Mode d'emploi

Maintenant que vous avez Crunch!, lancez l'application, puis dans l'ordre :

Désactivez la compression

Cliquez sur le petit engrenage dans la barre verticale à gauche et vérifiez que la case "Minify crunched CSS" n'est pas cochée. Sinon, votre code CSS sera tout compressé, ce qui est plus léger, mais illisible !

Créez et modifier votre fichier LESS

Revenez sur le symbole de la page et cliquez sur "New LESS File" et collez-y le code LESS qu'on vous aura fourni.

Vous pouvez éditer le code comme vous l'entendez, le LESS resemble beaucoup au CSS ! Mais faites attention car il y a quelques subtilités dans son fonctionnement

En premier lieu, il est probable que votre fichier LESS (du moins ceux que je proposerai, les autres codeurs font ce qu'ils veulent    ) commencera par plein de petits @nomDeVariable:valeur;, il s'agit de variables LESS qui seront utilisées pour la génération du code final. Ainsi, vous pouvez éditer facilement toutes les valeurs nécessaires sans avoir besoin de coder en CSS.

Viendront ensuite les mixins, il s'agit de petites fonctions utiles pour générer le fichier LESS, surtout n'y touchez pas, ou bien le ciel vous tombera sur la tête.

Enfin, le reste constituera votre feuille de style et ressemblera beaucoup à du CSS classique. En fait, vous pourrez ajouter vos propres classes et propriétés CSS si vous en avez envie

Générez votre fichier CSS

Une fois que vous avez fini vos modifications, enregistrez votre fichier (c'est plus sécuritaire ) en cliquant sur la petite disquette de la barre de menu (je me dis que les jeunes qui n'ont jamais connu les disquettes doivent se demander qu'est-ce que c'est que ce symbole bizare XD) et cliquez sur "Crunch File" en haut à droite de l'éditeur :

Le logiciel vous génèrera alors votre CSS final tout beau tout propre, qu'il ne vous restera plus qu'à copier-coller sur votre forum !

That's All, Folks !