Des effets hover très stylés grâce aux variables CSS et un peu de Javascript (pour récupérer la position de la souris).
Un fork de Font Awesome par des gens qui ne sont pas totalement en accord avec la direction prise par ce dernier dans sa version 5.
Attention quand vous faites une modale centrée horizontalement et verticalement avec Flexbox. Si le contenu de la modale est plus grand que le container, le centrage va tronquer le contenu.
L'astuce est d'appliquer ce CSS sur les flex items :
.your-flex-items {
margin-top: auto;
margin-bottom: auto;
}En principe, un simple margin: auto devrait fonctionner mais ça a causé des bugs avec IE chez moi. D'ailleurs pour que ça fonctionne correctement avec IE (voir les commentaires en dessous du post), il faut appliquer align-items: flex-start au lieu de center sur le container.
Quelques outils:
Les Media Queries ne sont plus la seule solution pour rendre un site responsive. Flexbox et Grid intègrent déjà pas mal d'options dans ce sens.
Jelly with HTML/JS/CSS.
Très impressionnant !
Bootstrap 4 est sorti ! Flexbox y est maintenant utilisé intensément et c'est une excellente chose.
Bon ça n'en reste pas moins une dépendance assez "massive" donc pensez toujours à évaluer si vous en avez réellement besoin. Si vous cherchez juste une lib de Grid CSS, utilisez Gridlex.
Le Reboot.css (.scss en l'occurence) de Bootstrap. Les explications sont ici: https://v4-alpha.getbootstrap.com/content/reboot/
J'aime bien l'idée d'essayer de se cantonner aux marges inférieures et de supprimer les marges supérieures, je pense que ça peut simplifier les choses et éviter quelques effets indésirables (et épargner un peu la touche F12).
Une autre analyse qui parle aussi des problèmes que présentaient les reset.css et autres normalize.css.
La version CSS est ici.
Un puissance 4 en pur CSS. Impressionnant :)
Styliser les champs d'un formulaire en fonction de leur état à l'aide des pseudo-classes.
Des plugins de post-processing CSS pour éviter les problèmes liés au chargement des webfonts (par exemple le texte qui est invisible tant que la font n'a pas été chargée).
L'idée est d'appliquer une classe à l’élément <html> via Javascript seulement une fois que la page est chargée. Et c'est cette classe qui déclenchera le téléchargement des webfonts. Le faire à la main nécessite pas mal d'organisation. Ces plugins rendent ça transparent.
Les Grid CSS et Flexbox très bien illustrés.
Supprimer le style par défaut des éléments de formulaires grâce à appaearance. Mais comme d'hab, IE est un cas à part...
Faites danser vos lettres !
Un affichage type comic book avec les grid CSS. C'est assez réussi :)
Via https://blog.stephaniewalter.fr/semaine-pixels-13-octobre-2017/
La propriété font-display (pour laquelle on devrait plutôt parler de "descripteur pour font-face" comme mentionné dans l'article) permet d'indiquer au browser quoi afficher le temps qu'il télécharge les webfonts de la page.
Un outil de Mozilla pour apprendre à utiliser les grilles CSS.
Un outil CSS-only pour noter (donner une note) de 1 à 5 étoiles.