Front end : des petits outils qui simplifient la vie

Lorem Picsum

Cet éditeur front end vous permettra, pendant votre codage, d’avoir à disposition des images facultatives. Vous pouvez rechercher ces images à la taille qu’il vous faut pour votre projet. Il vous suffit d’ajouter la largueur que votre photo doit faire à l’url, le site vous renvoi une photo carrée. Il vous suffira d’y ajouter la hauteur à la suite ou encore un – g avant les dimensions pour que l’image soit en noir et blanc.

Par exemple : https://picsum.photos/200/300 ou https://picsum.photos/g/200/300

Le lien du site : https://picsum.photos/

 

Fake Image Please

Cet outil utilise un peu le même principe sauf qu’une image n’apparaît pas, c’est plutôt un carré dans les dimensions que vous souhaitez, de la couleur et avec le texte que vous décidez dans la taille que vous spécifiez dans l’url.

Par exemple : https://fakeimg.pl/300×150/ff9c00/ffffff/?text=af%20developpement&font=lobster&font_size=25 ou avec moins d’éléments : https://fakeimg.pl/400×200/?text=af

Le lien du site : https://fakeimg.pl/

 

Lorem Ipsum

Celui-ci ne sert pas à avoir une image facultative mais un texte facultatif. Cela vous permet, en attendant le texte définitif du client, de pouvoir développer et régler le problème de police et de taille dans le champ prévu à cet effet dans votre projet. Le texte facultatif vous permet d’avoir un œil sur les champs textes sans avoir à taper vous même un faux texte. Lorem Ipsum dispose de plusieurs textes randoms dans des langues différentes.

Le lien du site : https://fr.lipsum.com/

 

Font Awesome

Cet outil front end n’est, non pas pour des images, mais pour des icônes. Les versions antérieures à la version 5 sont  gratuites, mais dispose de moins d’icônes.  La version actuelle donne l’accès à une seule partie des icônes gratuitement, elles sont en SVG ce qui permet une meilleure qualité et un plus petit poids. Lors que vous avez besoin d’une icone, il vous suffit de mettre le nom de celle-ci en anglais dans la barre de recherche du site et il vous propose plusieurs alternatives d’icônes.

Le lien de la version 4 : https://fontawesome.com/v4.7.0/

Le lien du site : https://fontawesome.com/

 

Bootstrap

Bootstrap se présente sous la mise en forme d’une grille de 12 colonnes, la configuration est changeable selon le nombre de colonne dont vous avez besoin. Son téléchargement est très simple et propose plusieurs alternatives. Par exemple vous pouvez ne télécharger que les fichiers nécessaires au fonctionnement de Bootstrap, mais il propose aussi que vous récupériez en plus tous les fichiers sources.

Le lien du site : https://getbootstrap.com/

 

Foundation

Foundation vous permet aussi de gérer la mise en page. Il ressemble à Bootstrap mais il a une approche plus variée. Sous Foundation, vous n’êtes pas forcés de tout importer. En effet, votre code html pourra être gardé presque intact. Pour autant, votre CSS ressortira propre et organisé.

Cet outil font end a plusieurs versions, il permet de créer des sites, des Email ou encore des applications. Il propose aussi, comme Bootsrtap, d’être téléchargé en différentes alternatives. Par exemple, sur la version pour créer un site, vous pouvez télécharger de la version la plus complète de Foundation à la plus légère.

Le lien du site : https://foundation.zurb.com/