Articles pour les mots-clés ‘flexbox’

Flexbox.ninja est un projet que j’ai commencé il y a quelques années et que je n’avais jamais pris le temps de finir et publier. Je voulais proposer au moins 6 cas pratiques, mais les gens du web m’ont proposé de la publier avec 3 cas et d’ouvrir aux contributions. C’est chose faite, voyons cela plus en détail.

J’ai commencé à apprendre le CSS en jouant avec des flottants et tentant de positionner des éléments en absolute et relative tout en espérant arriver à peu près au résultat escompté dans le navigateur. Pour mettre en page nos sites web nous avons aujourd’hui la chance d’avoir de nouveaux outils à notre disposition : Flexbox et Grid Layout.

Une fois n’est pas coutume : cette sélection est pleine de ressources JS, avec des liens vers des sites faisant un listing d’autres ressources JS, de quoi vous en mettre plein la panse ! Mais également des fontes, des icônes, des plugins WordPress et des astuces en HTML et CSS.

Le 18 février dernier est sorti le dernier bouquin de Raphaël Goetter sur un aspect cette fois très précis de CSS : Flexible Box Layout Module (alias Flexbox). L’objet de ce bouquin est de démystifier le module en tentant une explication point par point, et surtout en plongeant le lecteur dans des cas concrets.

Nouvelle sélection pour cette presque fin de semaine. J’ai écarté dans cette sélection certains outils « en vogue » comme balloon.css qui pour moi n’apportent aucune nouveauté et affichent même bien trop de problèmes d’accessibilité. Petit ajout de la section « s’il fallait n’en retenir qu’un » inspiré du blog de Stéphanie.

Pas mal de diversité dans cette édition des ressources du Web, avec notamment un petit nouveau dans les sites trousses orienté ressources Web,  j’ai nommé Wwwhere, que je vais vous laisser découvrir. Pour le reste, voici quelques autres ressources dont pas mal de JS, Animation, SVG et CSS, et également quelques fontes gratuites.

Voici maintenant bientôt 2 ans que je souhaite faire cette refonte, déjà parce que l’ancien design datait de travaux graphiques d’il y a presque 5 ans, mais aussi parce que les tendances « mobiles » et les attentes des lecteurs ont évoluées. Accompagnent donc cette refonte graphique de nouvelles fonctionnalités que je vais vous détailler ici.

Cela peut sembler évident à faire dans la théorie, mais en pratique créer des colonnes de même hauteur quel que soit le contenu de chacune d’elle demande de s’accorder un peu de temps de recherche, notamment si l’on souhaite la solution flexible et dépourvue de « hack » en JS. J’ai quelque chose pour vous !