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
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.