Framework CSS — mettez vos grilles au pas !

Je suis encore tout esbaudis par la découverte de 45+ frameworks CSS que tout webdesigner devrait connaitre qui liste une palanquée de bibliothèques CSS et d’outils pour générer des grilles de mise en page sans douleur. Je ne reviendrais pas sur les avantages ou les inconvénients des frameworks CSS ni sur le choix du meilleur d’entre eux. Vous trouverez des éléments de réponse  dans : Frameworks CSS + Reset CSS : design from scratch paru initialement en anglais sur Smashing Magazine ; dans Développement efficace avec les frameworks CSS et Blueprint ; ou encore dans Blueprint, un framework pour webdesigner. Oui, beaucoup de Blueprint car c’est le seul que j’ai vraiment utilisé jusqu’à présent.

Marquage HTML des micro-contenus : p, div ou bien ?

Dans la série des problèmes existentiels qui ponctuent la journée de l’intégrateur web, la question du marquage HTML des petites portions de texte est souvent de la partie. Pour la baseline par exemple, on peut justifier l’utilisation de la balise `blockquote` : c’est une « citation » de la marque, elle est souvent mise en italique ou entre guillemets.

Styler vos champs de formulaires de recherche avec CSS

Ce tutoriel pour styler les champs input de vos formulaires de recherche vous permettra d’offrir à vos visiteurs un formulaire design au lieu du traditionnel — mais efficace — champ *input type=text* blanc avec contour.

L’auteur utilise un *button* à la place du *input type= »submit »* pour éviter les problèmes d’alignement afin d’utiliser une seule image pour le champ *input* et le *button*. Ce qui permet de gérer facilement les différents état *:focus* ou *:hover* avec *background-position*.

PS : En cas de problème avec l’utilisation de l’élément button, jettez un oeil sur ce fil de discussion paru sur le forum Alsacréations.

Drawter : dessinez, c’est intégré ! (WYSYWYG Powa!)

Drawter est un générateur de code HTML et CSS en ligne qui vous permet de dessiner votre mise en page dans un canevas. Vous pouvez choisir les options de votre page comme le titre, le doctype, la langue du document, les balises que vous souhaitez pour chaque bloc présent à l’écran et pour chacune d’entre elles les propriétés et les attributs.

Une fois votre maquette terminée, vous choisissez le mode de placement pour vos blocs : `float: left` ou `position: absolute`. Le site autorise les imbrications de balises pour réaliser des mises en page complexes dans une interface réactive et intuitive. N’hésitez pas à parcourir toutes les options disponibles dans les palettes d’options et amusez-vous 🙂 Drawter : dessinez, c’est gagné ? A tester !

PS : Merci à Thierry pour le lien 😉