Si vous êtes concepteur de site web et que vous partez souvent à la recherche d’inspiration pour votre prochaine création, voici un article qui va vous plaire.
Plutôt que de lancer l’inspecteur web de votre navigateur à chaque fois que vous tombez en émoi devant une magnifique mise en page, il existe un outil formidable qui va totalement changer votre façon de travailler avec les styles CSS et surtout de vous inspirer.
Ça s’appelle Designr et c’est une extension open-source pour Chrome que vous pouvez retrouver gratuitement sur GitHub. Conçue pour inspecter et enregistrer les styles CSS sur les pages web, elle permet aux designers et développeurs web de facilement sauvegarder des références CSS pour une utilisation ultérieure.
Le point fort de Designr réside dans sa simplicité d’utilisation. Une fois l’extension installée, l’icône de Designr apparaît à côté de la barre d’adresse de votre navigateur. En cliquant simplement dessus, vous verrez apparaitre une fenêtre qui vous présentera alors toutes les informations relatives à l’élément CSS sur lequel vous avez cliqué. Vous pourrez alors non seulement consulter en détail les styles présents sur la page, mais aussi les copier, les modifier et les enregistrer selon vos besoins.
Comme un chimiste qui mélange différents éléments pour obtenir la formule parfaite, vous pourrez, à l’aide de Designr, enregistrer les formules CSS que vous glanerez lors de vos séances de surf, pour ensuite les remixer à votre sauce et les utiliser dans vos propres créations.
Plus besoin de se rappeler comment tel site a appliqué telle animation ou comment une palette de couleurs était organisée puisque Designr s’en occupe pour vous.
Pour celles et ceux qui souhaitent installer Designr, voici un petit tuto :
- Rendez-vous sur la page du projet.
- Clonez le dépôt sur votre machine en utilisant la commande
git clone https://github.com/ANG13T/designr.git(vous pouvez également télécharger le code source sous forme de fichier zip). - Une fois le dépôt récupéré, rendez-vous sur la page des extensions de votre navigateur. Par exemple, la page du gestionnaire d’extensions pour Chrome (chrome://extensions) qui vous permettra de télécharger l’extension non empaquetée comme ceci : Sur la page du gestionnaire d’extensions, activez le mode développeur, cliquez sur Charger l’extension non empaquetée, et sélectionnez le dossier de l’extension téléchargée.
- Une fois l’extension installée, allez sur n’importe quel site web.
- Cliquez sur l’icône Designr dans la barre d’outils pour l’activer.
- Maintenant, lorsque vous cliquez sur un élément de la page, l’extension affichera les styles CSS associés. Vous pourrez alors copier, modifier et enregistrer ces styles dans votre propre « palette ».
Il ne vous restera plus, en bonne feignasse, qu’à utiliser les ressources CSS sauvegardées pour créer un site web magnifique totalement « inspiré » par le travail des autres !
Amusez-vous bien !