Fermer

mai 7, 2018

Nouvelles fonctionnalités CSS qui changent Web Design16 minutes de lecture



Il fut un temps où le design web devenait monotone. Les concepteurs et les développeurs construisaient encore et encore les mêmes types de sites, si bien que nous avons été ridiculisés par les gens de notre propre industrie pour créer seulement deux types de sites:

Est-ce la limite de ce que nos esprits «créatifs» peuvent? atteindre? Cette pensée m'envoya une douleur incontrôlable dans le cœur

Je ne veux pas l'admettre, mais c'était peut-être le meilleur que nous pouvions accomplir à l'époque. Peut-être que nous n'avions pas les outils appropriés pour faire des conceptions créatives. Les demandes du web évoluaient rapidement, mais nous étions coincés avec des techniques anciennes comme les flotteurs et les tables.

Aujourd'hui, le paysage du design a complètement changé. Nous sommes équipés d'outils nouveaux et puissants – CSS Grid, CSS propriétés personnalisées, CSS et CSS écriture-mode pour n'en nommer que quelques-uns – que nous pouvons utiliser pour exercer notre créativité.

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;
    }
    

     Capture d'écran de l'inspecteur de grille de Firefox qui affiche quatre colonnes
    Vous pouvez créer quatre colonnes de grille en spécifiant quatre fois une largeur de colonne dans grid-template-columns

    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;
    }
    

     Capture d'écran de l'inspecteur de grille de Firefox qui affiche douze colonnes.
    Création de 12 colonnes avec CSS Grid

    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;
    }
    

     Capture d'écran de l'inspecteur de grille de Firefox qui montre trois colonnes de largeur différente.
    Créer des colonnes de largeurs différentes est facile comme un tour.

    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;
    }
    
     GIF montre quatre colonnes créées avec l'unité fr. Ces colonnes sont redimensionnées en fonction de l'espace blanc disponible
    Les grilles créées avec l'unité fr respectent la largeur maximale de la grille. ( Grand aperçu )

    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;
    }
    

     GIF montre une grille à trois colonnes créée avec le nombre d'or. Lorsque le navigateur est redimensionné, les colonnes sont redimensionnées en conséquence.
    Une grille à trois colonnes créée avec le nombre d'or

    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 * /
    }
    

     Capture d'écran d'un objet de la grille placé sur la deuxième colonne
    Placement d'un élément 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;
    }
    

     Capture d'écran d'un élément de grille placé dans la deuxième colonne. Il couvre deux colonnes
    Vous pouvez indiquer aux éléments de la grille le nombre de colonnes (ou même de rangées) qu'ils devraient occuper avec le mot-clé span

    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é.


     Une image de l'article de Huijing
    Le texte peut circuler autour de Beyoncé si vous le vouliez!

    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.


     Image de Clippy, un outil pour créer des formes CSS personnalisées
    Clippy vous aide à créer facilement des formes personnalisées avec clip-path .

    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


     Une image du Penang Hokken, mettant en vedette un texte qui se lit de haut en bas et de droite à gauche.
    Penang Hokkien montre que le texte chinois peut être écrit de haut en bas, la gauche.

    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 .


     Une image qui montre comment j'ai fait pivoter le texte dans un dessin que j'ai créé pour Devfest.asia
    Les étiquettes ont été créées en utilisant le mode écriture et les transformations.

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


     Une image du laboratoire de Jen Simmon qui montre un dessin de Jan Tschichold
    Une image du labo de Jen Simmon qui montre Jan Tschichold

    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


     Une capture d'écran de Super Silly Hackthon, avec le texte légèrement tourné vers la gauche
    Cheeaun fait en sorte que vous ayez l'air idiot si vous voulez entrer dans Super Silly Hackathon.

    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.


     Image où j'ai utilisé des éléments JavaScript dans la conception pour Learn JavaScript.
    J'ai utilisé la syntaxe pour créer des paquets de cours au lieu d'écrire sur les paquets de cours.

    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

     Smashing Editorial (ra, il, al)






Source link

0 Partages