Quand on est en DUT MMI et qu’on doit rendre des projets avant le fameux « dimanche minuit », sachant qu’il est déjà 23h30, il faut pas tortiller des fesses !

On prend des outils rapides et efficaces et on achève la mission ! Les outils qui suivent pourront t’être très utiles quand tu seras en stage ou simplement dans tes projets persos. Fini le blabla pour le SEO Google, place au vrai contenu :

1. Générateur de boutons

LiveTools Button Generator

Le site UI Parade (excellent site de ressources pour interface utilisateur au passage) te met à disposition gratuitement un générateur de boutons en HTML/CSS. C’est pas mal pour générer des boutons rapidement d’un simple coup d’œil. UI Parade possède d’autres outils du même genre pour générer des formulaires de contact, générer des icônes à dessiner à la souris ou à importer et il permet également de faire des rubans en full HTML/CSS !

2. Générateur de boutons 2

CSS Button Generator

Si le premier générateur de boutons ne te conviens pas, tu as toujours la solution numéro 2, à peine plus complète en terme de construction de bouton en CSS mais du coup, ça te prendra peut-être plus de temps. Puis ce générateur ne fait QUE les boutons …

3. Générateur de dégradés CSS

Générateur de dégradés

Les dégradés, la bonne galère qui donne envie de taper sur le graphiste quand il nous file une maquette avec ce genre de truc à intégrer en CSS ! Mais heureusement,  il y a ce générateur de dégradés CSS très simple qui te facilitera la vie ! Pas assez performant à ton goût ? Alors essaye Ultimate CSS Gradient Generator créé par ColorZilla, tu pourras faire des dégradés vraiment impressionnants !

4. Générateur de menus CSS / jQuery

Générateur de menus CSS

Et si tu as carrément la flemme de générer des menus, voici un générateur de menus CSS / jQuery qui te rendra heureux, mais n’oublie pas de vraiment le customiser par la suite afin de qu’il s’intègre au mieux visuellement dans ton design.

5. Générateur de Long Shadows CSS

Générateur de long shadows

On arrive aux choses intéressantes ! Pour le cinquième point, je te propose cet outil qui te générera automatiquement des longs shadows, c’est-à-dire des ombres portées sur une longue distance (genre t’as l’impression qu’il y a un couché de soleil dans ta page presque). Un bon moyen de voir comment ça fonctionne en CSS si tu ne sais pas du tout les faire.

6. Générateur de sprites

Générateur de sprites CSS

Stitches : Un générateur de sprites, trop bien ! Mais les sprites c’est quoi ? Pour faire court, quand tu intègres un site, tu es souvent amené à incorporer plein de petites images sur la page, donc à faire de nombreuses requêtes. Le principe du sprite est de mettre tout tes petits icônes sur une seule et même image qui ne sera requêtée qu’une seule fois pour économiser le temps de chargement du site. Par la suite, tu te serviras du CSS pour cibler l’endroit de l’image à afficher. Ils sont pas bête ces intés hein ?

7. Générateur de grille responsive

Générateur de grille responsive

flow.gs, c’est le nouveau générateur de grilles responsives pour tes futurs sites web. Tu règles toi-même le nombre de colonnes, la taille des gutters (inter-colonne) et aussi le padding des colonnes ! Le code se génère tout seul, et en plus le site est grave stylé ! C’est le genre de truc que Vincent te conseille dans son article pour améliorer ton workflow

 8. Schnaps.it

Schnaps.it - Générateur de template HTML5

Merci Charlène pour m’avoir fait découvrir Schnaps.it, un générateur de template HTML5 vraiment tip top, développer par Laetitia Bonanni lorsqu’elle était chez Alsacréations. Du beau boulot et un super outil à la clé pour obtenir en 3 clics des gabarits HTML5.

9. Webfont Generator par FontSquirrel

Générateur de webfonts sur FontSquirrel

Impossible de trouver une webfont pour mettre sur ton site ? Pas de soucis, tu as juste à uploader une de tes fonts dans le générateur de webfonts de FontSquirrel et il te pond ta webfont, prête à être importée dans ton code !

 

C’est bon ? Tu peux boucler ton site rapidement (sans le bâcler) ? La plus part de ces générateurs sont des outils à utiliser avant de commencer ton intégration, donc le temps à économiser tu le gagneras en ayant préparer les ressources au préalable.

Tu connais d’autres outils dans le même genre pour le développement front-end ? Fais péter les liens, et si tu as apprécié cet article, un petit partage ne nous fera pas de mal

9 générateurs gratuits pour développer plus vite
4.8 (96%) 5 votes

Ce qui pourrait également t'intéresser ...

Une réflexion sur “ 9 générateurs gratuits pour développer plus vite ”

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je veux Contribuer

C'est parti

Je suis un Professionnel

Voyons voir