Nouvelles fonctionnalités CSS qui changent Web Design

Comment CSS Grid a tout changé

Les grilles sont essentielles pour la conception de sites Web; tu le savais déjà. Mais avez-vous arrêté de vous demander comment vous avez conçu la grille que vous utilisez principalement?

La ​​plupart d'entre nous ne l'ont pas fait. Nous utilisons la grille à 12 colonnes qui est devenue une norme dans notre industrie

• Mais pourquoi utilisons-nous la même grille?
• Pourquoi les grilles sont-elles composées de 12 colonnes?
• Pourquoi nos grilles sont-elles de taille égale? 19659011] Voici une réponse possible à pourquoi nous utilisons la même grille: Nous ne voulons pas faire le calcul .

  Dans le passé, avec des grilles flottantes, pour créer une grille à trois colonnes , vous avez besoin de calculer la largeur de chaque colonne, la taille de chaque gouttière et comment positionner chaque élément de la grille. Ensuite, vous avez besoin de créer des classes dans le HTML pour les styler correctement. C'était assez compliqué .

  Pour faciliter les choses, nous avons adopté des cadres de grille. Au début, des cadres tels que 960gs et 1440px nous ont permis de choisir entre des grilles de 8, 9, 12 et même 16 colonnes. Plus tard, Bootstrap a remporté la guerre des cadres. Parce que Bootstrap n'autorisait que 12 colonnes, et en changeant cela était une douleur, nous avons finalement choisi 12 colonnes comme standard.

  Mais nous ne devrions pas blâmer Bootstrap. C'était la meilleure approche à l'époque. Qui ne voudrait pas une bonne solution qui fonctionne avec un minimum d'effort? Avec le problème de grille réglé, nous nous sommes intéressés à d'autres aspects du design, tels que la typographie, la couleur et l'accessibilité.

  Maintenant, avec l'avènement de CSS Grid les grilles sont devenues beaucoup plus simples . Nous n'avons plus à craindre les maths de grille. Il est devenu si simple que je dirais que la création d'une grille est plus facile avec CSS que dans un outil de conception comme Sketch!

  Pourquoi?

  Disons que vous voulez faire une grille de 4 colonnes, chaque colonne étant de 100 pixels. Avec CSS Grid, vous pouvez écrire 100px quatre fois dans la déclaration grid-template-columns et une grille à 4 colonnes sera créée.

   .grid {
    affichage: grille;
    grid-template-columns: 100px 100px 100px 100px;
    grille-colonne-écart: 20px;
  }
  

  
  

  Si vous voulez une grille de 12 colonnes , il vous suffit de répéter 100px 12 fois.

   .grid {
    affichage: grille;
    grille-template-colonnes: 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px 100px;
    grille-colonne-écart: 20px;
  }
  

  
  

  Oui, le code n'est pas beau, mais nous ne nous intéressons pas (encore) à l'optimisation de la qualité du code – nous pensons toujours au design. CSS Grid rend si facile à tout le monde – même un concepteur sans connaissances de codage – de créer une grille sur le web.

  Si vous voulez créer des colonnes de grille de largeurs différentes, il vous suffit de spécifier la largeur désirée dans votre ] grid-template-columns déclaration, et vous êtes défini.

   .grid {
    affichage: grille;
    grid-template-columns: 100px 162px 262px;
    grille-colonne-écart: 20px;
  }
  

  
  

  Rendre les grilles réactives

  Aucune discussion sur CSS Grid n'est complète sans parler de l'aspect responsive. Il y a plusieurs façons de rendre CSS Grid réactif. Une façon (probablement la plus populaire) est d'utiliser l'unité fr . Une autre façon est de changer le nombre de colonnes avec des requêtes média.

  fr est une longueur flexible qui représente une fraction. Lorsque vous utilisez l'unité fr les navigateurs divisent l'espace ouvert et attribuent les zones aux colonnes en fonction du multiple fr . Cela signifie que pour créer quatre colonnes de taille égale, vous écrirez 1fr quatre fois.

   .grid {
    affichage: grille;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grille-colonne-écart: 20px;
  }
  

  

  Faisons quelques calculs pour comprendre pourquoi quatre colonnes de taille égale sont créées .

  Tout d'abord, supposons que l'espace total disponible pour la grille est 1260px .

  Avant d'allouer la largeur à chaque colonne, CSS Grid a besoin de savoir combien d'espace est disponible (ou restes). Ici, il soustrait les déclarations grip-gap de 1260px . Depuis chaque trou 20px il nous reste 1200px pour l'espace disponible. (1260 - (20 * 3) = 1200) .

  Ensuite, il additionne les fr multiples. Dans ce cas, nous avons quatre 1fr multiples, donc les navigateurs divisent 1200px par quatre. Chaque colonne est donc 300px . C'est pourquoi nous obtenons quatre colonnes égales.

  Cependant, les grilles créées avec l'unité fr ne sont pas toujours égales !

  Quand vous utilisez fr vous devez être conscient que chaque fr unité est une fraction de l'espace disponible (ou des restes).

  Si vous avez un élément qui est plus large que l'une des colonnes créées avec le ] fr le calcul doit être fait différemment.

  Par exemple, la grille ci-dessous a une grande colonne et trois petites colonnes (mais égales) même si elle est créée avec grid-template-columns:

  Voir le Pen CSS Grid `fr` unité demo 1 par Zell Liew ( @zellwk ) sur CodePen .

  Après avoir divisé 1200px en quatre et alloué 300px à chacune des colonnes 1fr les navigateurs se rendent compte que le premier élément de grille contient une image qui est 1000px . Comme 1000px est plus grand que 300px les navigateurs choisissent d'allouer 1000px à la première colonne à la place.

  Cela signifie que nous devons recalculer les restes d'espace. 19659007] Le nouvel espace restant est 1260px - 1000px - 20px * 3 = 200px ; ce 200px est ensuite divisé par trois selon la quantité de fractions restantes. Chaque fraction est alors 66px . Espérons que cela explique pourquoi les unités fr ne créent pas toujours des colonnes de largeur égale.

  Si vous voulez que l'unité fr crée des colonnes de même largeur à chaque fois, vous devez forcer minmax (0, 1fr) . Pour cet exemple spécifique, vous souhaiterez également définir la propriété max-width de l'image sur 100%

  Voir la grille du plume CSS `fr` démo de l'unité 2 de Zell Liew ( @zellwk ) le CodePen .

  Note : Rachel Andrew a écrit un article étonnant sur comment différent Les valeurs CSS (min-content, max-content, fr, etc.) affectent la taille du contenu.

  Grilles à largeur inégale

  Pour créer des grilles avec des largeurs inégales, il suffit de faire varier le multiple fr. Voici une grille qui suit le nombre d'or, où la deuxième colonne est 1.618 fois de la première colonne, et la troisième colonne est 1.618 fois de la deuxième colonne.

   .grid {
    affichage: grille;
    grid-template-columns: 1fr 1,618fr 2,618fr;
    grille-colonne-écart: 1em;
  }
  

  


  Modification de grilles à différents points d'arrêt

  Si vous souhaitez modifier la grille à différents points d'arrêt, vous pouvez déclarer une nouvelle grille dans une requête de média.

   .grid {
    affichage: grille;
    grid-template-columns: 1fr 1fr;
    grille-colonne-écart: 1em;
  }
  
  @media (min-width: 30em) {
    .la grille {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }
  

  N'est-il pas facile de créer des grilles avec CSS Grid? Les concepteurs et les développeurs antérieurs auraient tué pour une telle possibilité

  Grilles de hauteur

  Il était impossible de faire des grilles basées sur la hauteur d'un site Web auparavant parce qu'il n'y avait pas de moyen pour nous de dire à quelle hauteur La fenêtre était. Maintenant, avec les unités viewport, CSS Calc et CSS Grid, on peut même faire des grilles en fonction de la hauteur du viewport.

  Dans la démo ci-dessous, j'ai créé des carrés en fonction de la taille du navigateur. Exemple de grille basé sur la hauteur par Zell Liew ( @zellwk ) le CodePen .

  Jen Simmons a une super vidéo qui parle de désinventer pour le quatrième edge - avec CSS Grid.

  Positionnement des éléments de la grille

  Le positionnement des éléments de la grille était une grande douleur dans le passé car vous deviez calculer la propriété marge-gauche .

  Maintenant, avec CSS Grille, vous pouvez placer des éléments de grille directement avec CSS sans les calculs supplémentaires.

   .grid-item {
    grille-colonne: 2; / * Mettre sur la deuxième colonne * /
  }
  

  


  Vous pouvez même indiquer à un élément de la grille combien de colonnes il doit utiliser avec le mot-clé span .

   .grid-item {
    / * Mettre dans la deuxième colonne, span 2 colonnes * /
    grille-colonne: 2 / span 2;
  }
  

  


  Inspirations

  CSS Grid vous permet de tracer les choses si facilement que vous pouvez créer rapidement de nombreuses variantes du même site. Un exemple typique est page d'accueil personnelle de Lynn Fisher .

  Si vous souhaitez en savoir plus sur ce que CSS Grid peut faire, consultez le laboratoire de Jen Simmon où elle explore comment créer différents types de mises en page avec CSS Grid et d'autres outils.

  Pour en savoir plus sur CSS Grid, consultez les ressources suivantes:

  Conception avec des formes irrégulières

  Nous sommes habitués à créer des mises en page rectangulaires sur le Web parce que le modèle de boîte CSS est un rectangle. Outre les rectangles, nous avons également trouvé des moyens de créer des formes simples, telles que des triangles et des cercles.

  Aujourd'hui, nous n'avons pas besoin de nous arrêter là. Avec des formes CSS et clip-path à notre disposition, nous pouvons créer des formes irrégulières sans trop d'effort.

  Par exemple, Aysha Anggraini a expérimenté une mise en page inspirée d'une bande dessinée avec Voir le stylo Disposition de style bande dessinée avec grille CSS par Aysha Anggraini ( @rrenula ) le CodePen .

  Hui Jing explique comment utiliser les formes CSS de manière à ce que permette au texte de s'écouler le long de la courbe de Beyoncé.

  


  Si vous voulez creuser plus profondément, Sara Soueidan a un article pour vous aider à créer des mises en page non rectangulaires .

  Formes CSS et clip-path vous offre des possibilités infinies pour créer des formes personnalisées uniques à vos conceptions. Malheureusement, syntaxiquement, les formes CSS et clip-path ne sont pas aussi intuitives que CSS Grid. Heureusement, nous avons des outils tels que Clippy et l'éditeur Shape Path de Firefox pour nous aider à créer les formes que nous voulons.

  


  Changement de flux de texte avec CSS ' writing-mode

  Nous avons l'habitude de voir les mots couler de gauche à droite sur le web parce que le web est principalement fait pour les anglophones (au moins c'est comme ça que ça a commencé).

  Mais certaines langues ne vont pas dans cette direction. Par exemple, les mots chinois peuvent lire de haut en bas et de droite à gauche.

  CSS ' writing-mode fait circuler le texte dans la direction natif de chaque langue. Hui Jing a expérimenté avec une mise en page basée en Chine qui coule de haut en bas et de droite à gauche sur un site Web appelé Penang Hokkien . Vous pouvez lire plus sur son expérience dans son article, " The One About Home ".

  Outre les articles, Hui Jing a une grande conversation sur la typographie et écriture-mode " Quand l'Orient rencontre l'Occident: la typographie Web et comment elle peut inspirer des mises en page modernes ". Je vous encourage fortement à le regarder

  


  Même si vous ne concevez pas de langues comme le chinois, cela ne signifie pas que vous ne pouvez pas appliquer le mode d'écriture CSS à l'anglais. En 2016, quand j'ai créé Devfest.asia j'ai fléchi un petit muscle créatif et j'ai opté pour faire pivoter le texte avec écriture-mode .

  


  Le laboratoire de Jen Simmons contient également de nombreuses expériences avec le mode d'écriture . Je recommande fortement de le vérifier aussi

  


  L'effort et l'ingéniosité parcourent un long chemin

  Même si les nouveaux outils CSS sont utiles, vous n'avez besoin d'aucun d'entre eux pour créer des sites Web uniques. Par exemple, dans Super Silly Hackathon Cheeaun fait tourner le site entier de -15 degrés et vous donne l'air idiot en lisant

  


  Darin Senneff a fait un avatar de connexion animé avec de la trigonométrie et de la GSAP. Regardez à quel point le singe est mignon et comment il couvre ses yeux lorsque vous vous concentrez sur le champ mot de passe. Lovely

  Lorsque j'ai créé la page de vente pour mon cours, Learn JavaScript j'ai ajouté des éléments qui font que l'apprenant JavaScript se sent chez lui.

  


  Wrapping Up

  Un design web unique ne se limite pas à la mise en page. Il s'agit de savoir comment le design s'intègre au contenu. Avec un peu d'effort et d'ingéniosité, nous pouvons tous créer des designs uniques qui s'adressent à notre public. Les outils à notre disposition aujourd'hui facilitent notre travail.

  La ​​question est de savoir si vous vous souciez suffisamment de faire un design unique? J'espère que vous le faites

  (ra, il, al)