A Unix Mind In A Windows World .

Chroniques tech et pérégrinations digitales. Opinons incluses.

Post Page Advertisement [Top]

Aujourd'hui, je partage avec mes lecteurs qui codent du CSS une astuce qui permet d'aller un peu plus lorsque je fais de l'intégration web.
Que dis je, beaucoup plus vite : combinée à plusieurs autres outils - que je présenterais plus tard - cette astuce me permet de coder 2 fois plus vite.
Il s'agit en quelque sorte d'éviter de réécrire plusieurs fois les mêmes bouts de codes en CSS , en ayant recours à des classes standards.
Pour ce faire, lorsque vous recevez votre maquette web - au format .psd


  • Copiez la sur le site assets d'Adobe - https://assets.adobe.com ;
  • Une fois le document uploadé, cliquez sur l'onglet "extract";
  • Copiez ensuite les différents codes de couleurs dans l'encadré en bas à droite;
  • Créez une classe css pour chaque code de couleur
     par exemple .vertcitron{background:#9CBF20} et .textevertcitron{color:#9CBF20}
  • Ecrivez ensuite vos fichiers html (astuce : cette étape va deux fois plus vite lorsqu'on utilise Emmet);
  • Pour chacun des blocs ou éléments du DOM devant être mis en forme avec une couleur extraite dans les étapes précédentes,ajouter la classe correspondante ;
    par exemple, le bloc avec une couleur de fond vertcitron sera <div class="vertcitron"></div> 
  • Répétez jusqu'à la fin de l'intégration.

Aucun commentaire:

Bottom Ad [Post Page]

| Designed by Colorlib | (Heavily) Modified by Jean Luc Houedanou