Construire une interface utilisateur basée sur une carte avec fondation

Sep 13, 2025
Comment
[dix] [dix] [dix]
[dix]

À base de carte mises en page de site web ont pris sur le Web. Fabriqué par Pinterest, Twitter, Facebook et Google, les cartes sont devenues un motif de conception aller pour de nombreux cas d'utilisation différents.

[dix]

Ce n'est pas difficile de voir pourquoi. Les cartes fonctionnent parfaitement dans site Web adaptatif . En tant qu'unités autonomes, ils peuvent être déplacés, mélangés et mélangés à différents types de contenu. Ils répondent également facilement à différentes tailles d'écran, à partir de colonnes simples sur des périphériques mobiles à plusieurs colonnes sur des périphériques plus importants.

  • Étapes vers la mise en page parfaite du site Web

L'équipe de Zurb a utilisé des mises en page à base de cartes dans son travail de conception depuis des années. Son Fonds frontales, Fondation, a toujours cherché à équiper les concepteurs Web avec les outils nécessaires pour concevoir et créer rapidement des sites sites réactifs en incluant une large gamme de composants modulaires et flexibles. La version 6.3 ajoutée à cette collection de blocs de construction apporte une nouvelle implémentation hors toile, des accordéions / onglets réactifs et une nouvelle composante de carte puissante.

Dans ce didacticiel, nous apprendrons à créer une interface utilisateur réactive basée sur une carte qui tire parti de la grille FLEXBOX basée sur la fondation pour ouvrir une série de possibilités.

01. Configurer un environnement de développement

La première étape consiste à mettre en place un environnement de développement. Pour ce tutoriel, nous utiliserons un environnement de développement basé sur le nœud, vous devez donc installer Node.js. Les détails pour le faire dépendent de votre environnement, alors vérifiez ici Pour savoir quoi faire.

[dix]

Une fois que vous avez installé le nœud, installez la CLI de fondation en utilisant NPM Installer -g fondy-cli , qui facilitera la création d'un nouveau projet de fondation.

02. Démarrer un nouveau projet

Créons un nouveau projet basé sur le gabarit de Zurb. Exécuter la commande Fondation Nouveau Net-Magazine-Tutoriel , Sélectionnez 'Un site Web (Fondation pour sites)', 'Net-Magazine-Tutorial', puis Zurb Modèle. Cela configurera un modèle de projet basé sur la fondation, avec le système de construction et le serveur de développement.

Le modèle est livré avec un exemple de page dans src / pages / index.html . Pour la simplicité, nous allons supprimer cet échantillon et le remplacer par un vide & lt; en-tête & gt; & lt; / en-tête & gt; Pour commencer à partir de la graisse de bâtir notre UI basée sur la carte. Courir NPM Démarrer De la ligne de commande pour exécuter le serveur de développement et que vous devriez voir une page HTML nue prête pour les cartes.

03. Créer une carte

Maintenant, il est temps de créer notre première carte. Pour l'instant, il suffit de le mettre directement dans une section avec la classe Conteneur .Cards . Lors de la création d'une carte à l'aide de la fondation, trois classes principales sont conscientes de: .carte , .Card-section et .card-divider . Pour les utilisateurs plus avancés, chacun de ceux-ci correspond à un mixin SCSS ( conteneur-carte , section de carte et cartonneur ).

A simple card with the Foundation Yeti on it, header and footer created using the card-divider class

[dix] [dix]
Une carte simple avec la fondation Yeti sur elle, l'en-tête et le pied de page créé à l'aide de la classe de division de cartes

Mais pour ce tutoriel, nous utiliserons les classes par défaut pour la simplicité. Le .carte La classe est le conteneur; Chaque carte vivra dans un .carte . Cela définit des choses comme les frontières, les ombres et la coloration par défaut.

Le .Card-section La classe définit un bloc de contenu extensible, où vous pourriez mettre du contenu, tandis que le .card-divider La classe définit un bloc non expansible, tel qu'un pied de page, un en-tête ou un diviseur. Utilisons toutes ces classes pour créer notre première carte de base. 

 & lt; Header & GT;
  & lt; div class = "colonnes rangées" & gt;
    & lt; h3 & gt; les cartes sont les meilleures et lt; / h3 & gt;
  & lt; / div et gt;
& lt; / en-tête & gt;
& lt; classe de section = "Cards-Conteneur" & GT;
  & lt; div class = "carte" & gt;
    & lt; div class = "card-divider" & gt;
      & lt; H4 & GT; Yeti Header & lt; / h4 & gt;
    & lt; / div et gt;
    & lt; div class = "Section de la carte" & GT;
      & lt; img src = "https://foundation.zurb.com/sites/docs/assets/img/yeti.svg" & gt; & lt; / img & gt;
    & lt; / div et gt;
    & lt; div class = "card-divider" & gt;
      & lt; p & gt; yeti pied & lt; / p & gt;
    & lt; / div et gt;
  & lt; / div et gt;
& lt; / section & gt;

04. Ajouter des styles de composants

Si nous venons de le faire, notre carte sera énorme, en expansion pour remplir tout l'écran. Nous allons traiter avec le dimensionnement général prochainement, mais pour le moment, utilisons cela comme une excuse pour apprendre à ajouter des styles de composants dans le gabarit de Zurb.

Ajouter un fichier _Card.scss à SRC / Actifs / SCSS / Composants / Spécifier un max-largeur: 300px pour .carte et inclure le fichier dans notre CSS principal en ajoutant @ import composants / carte; à src / actifs / SCSS / app.scss .

05. Faites de vos cartes réutilisables

Afin de créer une mise en page répétable avec plusieurs cartes, nous allons vouloir que nos cartes soient des composants réutilisables que nous puissions brancher encore et encore. Le gabarit de Zurb que nous utilisons pour ce tutoriel utilise une langue de modèles appelée guidon, qui inclut la possibilité de créer des partiels ou des blocs de code réutilisables.

Déplacer notre mise en œuvre de la carte en une partielle, simplement couper et coller le .carte composant que nous avons construit dans un fichier dans src / partiels , dire src / partiels / base-carte.html . Vous pouvez ensuite inclure ce contenu en ajoutant simplement la ligne {{& gt; Carte de base}} dans votre fichier d'index.

06. Commencez à construire votre mise en page

[dix]

Nous couvrirons différents types de cartes dans un peu, mais utilisons d'abord notre carte de base réutilisable pour commencer à créer une configuration plus grande et réactive pour nos cartes. Pour ce faire, nous allons utiliser un concept de Foundation appelé la grille de bloc.

Fondation contient quelques types de grilles différents, mais ils partent tous du concept de lignes et de colonnes. Une ligne crée un bloc horizontal qui peut contenir plusieurs colonnes verticales. Ces blocs de construction de base constituent le cœur de presque toutes les mises en page.

With a simple block grid, we already have a beautiful, scalable layout for as many cards as we want to include

[dix] [dix]
Avec une grille de bloc simple, nous avons déjà une belle disposition évolutive pour autant de cartes que nous voulons inclure

Les grilles de blocs sont une manière abrégée de créer des colonnes de taille égale et de vous permettre la flexibilité et la liberté d'ajouter une quantité indéterminée de contenu et de la disposer bien de colonnes égales. Vous ajoutez simplement une classe à la ligne, puis ajoutez autant de composants de colonne que vous le souhaitez. Fondation les posera parfaitement pour vous et proprement.

Puisque nous nous attendons à avoir un nombre très important et changeant de cartes, c'est idéal pour nos besoins. Mettons-la rapidement dans une grille à quatre colonnes et ajoutons quelques douzaines de cartes. Pour l'instant, nous ne nous inquiéterons que pour les grands écrans, nous allons donc simplement appliquer le .large-up-4 classe à la ligne. 

 & lt; class de section = "Cards-Conteneur" & GT;
& lt; div class = "rangée grand-up-4" & gt;
{{#repeat 24}}
& lt; div class = "colonne" & gt;
{{& gt; Carte de base}}
& lt; / div et gt;
{{/répéter}}
& lt; / div et gt;
& lt; / section & gt;

07. Rendez-le réactif

Ensuite, considérons ce que nous voulons arriver à différentes tailles d'écran. Fondation est livré avec de petits points d'arrêt, de grands et de grands intégrés, afin que nous puissions simplement appliquer une classe de grille de blocage différente pour chaque point d'arrêt pour déplacer des objets.

Mettons une carte par rangée sur des écrans mobiles et trois par rangée sur tablette, en ajoutant les classes .small-up-1 et .medium-up-3 sur la ligne. Si nous faisons cela et retirons le stopgap largeur maximale Propriété que nous mettons _Card.scss . Nous avons déjà une mise en page magnifiquement réactive qui semble bonne sur toutes les tailles d'écran.

08. Essayez de nouveaux types de cartes

Combine different styles of card to build your layout

[dix] [dix]
Combinez différents styles de carte pour construire votre mise en page

Distribuons maintenant notre ensemble de cartes, un autre type est une photo pure à bord. Les sections de cartes et les diviseurs de cartes contiennent du rembourrage par défaut, mais d'avoir du contenu bord à bord, nous pouvons simplement mettre l'image directement à l'intérieur de la carte. Ajoutons ceci comme un photo-carte.html partiel dans src / partiels . 

 & lt; div class = "carte" & gt;
& lt; img src = "http://foundation.zurb.com/assets/img/foundation-emails/inky-all-devices.svg" / & gt;
& lt; / div & gt;

09. Introduire Flexbox

Il y a des centaines de moyens possibles que nous pouvons mettre ensemble des cartes - pour une inspiration, vous pouvez consulter la fondation référentiel de camion . Mais passons à la façon dont nous gérons la mise en page lorsque nous avons des cartes de taille différentes. Si vous insérez la carte photo partielle dans la mise en page alternant avec la carte de base comme nous l'avons déjà fait, nous nous retrouvons avec un peu d'expérience déchiquetée car nos hauteurs sont différentes. Cela peut aller bien ou nous voudrons peut-être ajuster notre mise en page pour compenser.

The Foundation card pack gives you a great set of pre-built Flexbox cards to level up your card game

[dix] [dix]
La Foundation Card Pack vous donne un excellent ensemble de cartes Flexbox pré-construites pour niveler votre jeu de cartes

Pour ce tutoriel, nous allons indemniser en utilisant notre nouvelle technique de mise en page CSS préférée - Flexbox. Fondation est livré avec un mode Flexbox pour sa grille. Pour l'activer, vous devez simplement ouvrir src / actifs / SCSS / app.scss , commenter @include Foundation-Grid; et @include fondo-float-classes; et notamment @include fondation-flex-grille; et @include Foundation-Flex-Classes; .

10. Faites vos cartes de la même hauteur

Avec les classes Flexbox activées, il est simple d'obtenir que nos cartes soient la même hauteur. Tout d'abord, nous pouvons rendre nos colonnes Flex Parents en ajoutant le .flex-conteneur classer. Ceci est un raccourci prototypage pour ajouter le Affichage: flex; propriété pour eux. Une fois que nous faisons cela, toutes les cartes deviendront la même hauteur, mais puisque Flex Child Elements se rétrécissent par défaut, certaines de nos cartes sont étroites.

Nous pouvons résoudre ce problème en disant simplement à ces éléments de grandir. Ceci est fait en les ciblant avec CSS et en leur donnant Flex-grandir: 1; ou pour la simplicité pendant le prototypage, juste en ajoutant la classe .flex-enfant-grandir . Une fois que tout cela a été fait, toutes nos cartes remplissent les colonnes et seront gentiment la même hauteur.

Cet article a été initialement présenté dans magazine net numéro 293. Achetez-le ici ou Abonnez-vous à Net ici .

Aimait ça? Essayez-les ...

  • 10 raisons pour lesquelles vous devriez utiliser des conceptions atomiques
  • Créer et animer les polygones SVG
  • Astuces CSS pour révolutionner vos mises en page
[dix] [dix]
[dix]

Comment - Most Popular Articles

Comment créer une icône d'application dans Illustrator

Comment Sep 13, 2025

Page 1 sur 2: Comment créer une icône d'application dans l'illustrateur: étapes 01-11 [dix] Comment créer une icône d'application dan..

Comment améliorer votre personnage Art

Comment Sep 13, 2025

[dix] [dix] [dix] [dix] Quand vous êtes chargé de créer un conception de personnag..

Créer un tableau de couleurs simple

Comment Sep 13, 2025

Se mettre à poignée avec théorie des couleurs Peut sembler un peu trop comme apprendre des mathématiques ou des sciences. Vous pouvez sentir que vous voulez simplement êtr..

Trois étapes pour un ciel nocturne étincelante à l'aquarelle

Comment Sep 13, 2025

[dix] [dix] [dix] [dix] L'aquarelle est un moyen incroyable qui, avec la droite Techn..

Créer un papier peint bas Poly dans C4D

Comment Sep 13, 2025

[dix] [dix] [dix] [dix] Page 1 sur 2: Créez un fon..

Faites un composite dans Photoshop

Comment Sep 13, 2025

Adobe lance une nouvelle série de tutoriels vidéo aujourd'hui appelés le faire maintenant, ce qui vise à décrire comment créer des projets de conception spécifiques utilisant divers ..

Utilisez des particules pour créer un éclabousseur 3D

Comment Sep 13, 2025

[dix] [dix] [dix] [dix] Ce didacticiel examinera comment vous pouvez faire une éclaboussure de liqui..

Comment combiner des cartes de déplacement sculptées et peintes

Comment Sep 13, 2025

[dix] [dix] [dix] [dix] Parfois, il est plus efficace de combiner diverses cartes de déplacement au ..

Catégories