46 liens privés
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
La liste :
- React Bits
- Vue.js Complete API Cheat Sheet
- CSS Grid Cheat Sheet
- Flexbox Cheatsheet
- Inclusive Components
- A11y Style Guide
- Front-end tooling recipes
- ES6 Features
- A Complete Guide to CSS Grid
- HTML Reference
- The HTML5 Robot
- CSS Triggers
- CSS property syntax cheatsheet
- HTML5 Pattern
- 2016 JavaScript Rising Stars
- What Web Can Do Today
- Moving to HTTPS Guide
- WAI-ARIA Authoring Practices 1.1
- Grid “fallbacks” and overrides
- Flexible Boxes
Une astuce avec la grille CSS pour avoir un contenu centré de taille max fixe et un arrière-plan qui "déborde"
Cette astuce se décline aussi avec des contenus asymétriques (du genre, avec une barre de menu gauche)
Tout est dans le titre
Tout est dans le titre
L'article date... mais les exemples sont toujours d'actualité
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
Des éléments HTML peuvent "déborder" de leur cellule de grille CSS... L'auteur montre lesquels et pourquoi. Il propose enfin une solution pour ce problème.
En résumé, il y a plusieurs raisons possibles pour lesquelles un élément ne remplit pas une "cellule" de grille CSS :
- sur l'élément grille parent, justify-items ou align-items ont une valeur différente de "stretch"
- sur l'élément grille "cellule", align-self ou justify-self ont une valeur différente de "stretch"
- sur l'élément grille "cellule", la largeur ou la hauteur est contrainte
Tout est dans le titre
Tout est dans le titre
Tout est dans le titre
La liste des faits intéressants :
- les valeurs négatives < -1 peuvent être utilisées pour grid-row-end et grid-column-end
- Il est possible d'utiliser des valeurs négatives dans grid-column/row-start
- Le contenu des pseudo éléments (::before et ::after) est traité comme un "grid item"
- Certaines propriétés de grille peuvent être animées (grid-gap, grid-row-gap, grid-column-gap, grid-template-columns, grid-template-rows)
- La valeur de grid-column/row-end peut être plus petite que la valeur de début
- Le mot clé "span" peut être utilisé sur grid-column/row-start et grid-column/row-end
- grid-template-areas et les lignes nommées implicites
Tout est dans le titre
Tout est dans le titre