Catégories
Astuces et Design

Layoutit Grid: apprentissage visuel de la grille CSS avec un générateur

Layoutit Grid est un générateur de grille CSS open source interactif. Il vous permet de dessiner vos créations et de voir le code au fur et à mesure. Vous pouvez interagir avec le code, ajouter ou supprimer des lignes de suivi et les faire glisser pour changer le dimensionnement – et vous pouvez voir le […]

Catégories
Astuces et Design

Un cadre de grille CSS pour les pages de collection Shopify – Smashing Magazine

A propos de l'auteur Liam est un Developer Community Manager chez Shopify, basé en Irlande, et se spécialise dans le développement front-end, Liquid et le travail avec des thèmes. Il est passionné… Plus à propos Liam … Dans cet article, nous verrons comment configurer une disposition en grille pour les produits sur les pages de […]

Catégories
Astuces et Design

Comment utiliser la grille CSS pour les en-têtes et pieds de page collants

CSS Grid est un ensemble de propriétés conçues pour rendre la mise en page plus facile que jamais. Comme tout, il y a un peu de courbe d'apprentissage, mais Grid est honnêtement amusement travailler avec une fois que vous avez compris. Un domaine dans lequel il brille concerne les en-têtes et les pieds de page. […]

Catégories
Astuces et Design

18 dispositions de grille pour créer de superbes sites Web

Lors de la création d'un nouveau site Web, il est toujours judicieux de s'asseoir et de réfléchir à tout le contenu que vous souhaitez vraiment présenter. Si vous trouvez que vous avez beaucoup à dire, les dispositions de grille sont toujours un bon choix. Pour commencer, la plupart sont réactifs et ajusteront automatiquement l'orientation en […]

Catégories
Astuces et Design

Lignes d'accordéon dans la grille CSS – Réflexions archivées d'Eric

Un autre aspect de la refonte de meyerweb que je voudrais explorer est la façon dont j'utilise les lignes CSS Grid pour me donner plus de flexibilité de mise en page. Tout d'abord, visualisons la mise en page par défaut d'une page ici sur meyerweb. Cela ressemble à quelque chose comme ceci: Si simple, même […]

Catégories
Astuces et Design

Grille pour la mise en page, Flexbox pour les composants

Mon frère est un nouveau diplômé en génie informatique et il termine actuellement son stage en développement front-end. Il a appris à la fois la grille CSS et la flexbox, mais j'ai remarqué un modèle que je vois beaucoup sur le Web. Il ne peut pas décider quand utiliser la grille ou la flexbox. Par […]

Catégories
Astuces et Design

Petits trucs sympas pour la grille CSS pour votre blog

J'ai découvert CSS il y a une dizaine d'années en essayant de modifier l'apparence d'un blog que j'avais créé. Très vite, j'ai pu coder des choses sympas avec des fonctionnalités plus mathématiques et, par conséquent, plus faciles à comprendre comme les transformations. Cependant, d'autres domaines du CSS, tels que la mise en page, sont restés […]

Catégories
Astuces et Design

En-tête se chevauchant avec la grille CSS

J'ai cette conception. Historiquement, je l'ai fait avec des marges négatives. L'en-tête a une hauteur qui ajoute un tas de rembourrage au fond, puis le corps obtient un margin-top: -50px ou tout ce que le design demande. Comme je savais que j'allais utiliser Grid pour le shell de cette page, je me suis demandé s'il […]

Catégories
Astuces et Design

Flexbox-like "juste mettre des éléments dans une rangée" avec grille CSS

Cela m'est venu à l'esprit pendant que nous parlions de flexbox et gap cette raison que nous atteignons parfois pour flexbox est de jeter quelques boîtes d'affilée et de les espacer un peu. Mon cerveau atteint toujours pour flexbox dans cette situation, et avec gap, il continuera probablement de le faire. Il convient de noter […]

Catégories
Astuces et Design

Modèles de grille Instagram: 10 exemples + conseils

Un secret utilisé par certaines des marques visuelles les plus audacieuses sur Instagram est d'utiliser une grille ou un modèle de puzzle. Ce que ce style de modèle fait est de créer 12 panneaux cohésifs qui se réunissent en une seule image lorsque quelqu'un visite votre page de profil Instagram. L'astuce ici est que les […]