Pour vous webdesigners, voilà 7 outils pour simplifier votre intégration au quotidien.

dochub

Dochub, anciennement instaCSS, est une doc dynamique pour (presque) tous les langages qui vous seront utiles durant vos intégrations. CSS, évidemment, mais maintenant HTML, Javascript, et même jQuery et PHP, qui ont fait leur apparition récemment. Un site indispensable.

*.jpg.to

Tout le monde connaît le lorem ipsum, moyen pratique et rapide de récupérer du contenu fictif. *.jpg.to à la même volonté de fournir du contenu fictif simplement et rapidement. Mettez en sous-domaine le domaine que vous recherchez, et le site renverra une image en rapport. Vraiment très pratique.

 

Placehold.it

Dans la même veine que la ressource précédente, placeholdit permet de générer des placeholder, comprenez par là des images « vides » avec simplement une taille dedans. L’essayer, là aussi, c’est l’adopter.

edit: merci à @mathieu, qui fournit un lien avec 6 autres placeholders bien sympathiques dans les commentaires

 

CSS refresh

CSS Refresh permet de mettre à jour le CSS automatiquement, dès que le fichier est modifié. Plus besoin de passer de l’éditeur de texte au navigateur pour faire F5, les changements faits sur l’éditeur impactent directement l’affichage.

Compass

Compass est un framwork Scss. Il faut entendre par la que c’est une bibliothèque d’outils pour simplifier l’intégration et la gestion du CSS au debut d’un projet. Créer la structure de dossiers, les différents fichiers de CSS vide (ie, screen, mobile, …), ainsi que l’index où ils sont appelés se fait en une commande. Il est ensuite très simple d’ajouter des plugins pour avoir un style de base sur ses boutons, ou autre.

Nous pouvons aussi trouver dans Compass compass-sprite. Ce plugin (anciennement appelé Lemonade) permet la simplification de création des sprites. Mettez toutes vos icônes dans un dossier (par exemple icons), et appelez @import « icon/*.png »; Voilà, vous avez vos sprites, avec des classes générées en fonction du nom du fichier.

Spritecow

Pour ceux qui veulent rester en bon vieux CSS, et qui aimeraient quand même qu’on leur simplifie la tache, voilà Sprite Cow. Chargez votre sprite, cliquez sur l’icône que vous voulez, et il ne vous reste plus qu’à copier-coller le code CSS fourni pour le background_position et tout ça. Pratique, non?

Foundation

Foundation est un autre framwork CSS, qui permet de faire des prototypes de sites très rapidement. Il repose sur beaucoup d’éléments prédéfinis simplement personnalisable ensuite, ainsi qu’un grid system puissant, permettant de simplifier ensuite le passage en responsive. Il contient aussi de petites choses bien agréables comme un système de lightbox, un systèmes de barres d’onglets, et bien d’autres.

Il peut être installé comme plugin de Compass, ou utilisé séparément.