#layout

Better CSS layouts: Time.com Hero Section
▻https://ishadeed.com/article/time-layout

In this article, I went through a #layout that looks simple at first, and took it further to make it more dynamic with #CSS. Having this flexibility is a game-changer as it will allow you to build fluid and conditional layouts, with less CSS.

For example, being able to combine CSS #:has() and #grid-area is a powerful combination! Add #container #querie to it, and magic will happen.

▻https://ishadeed.com/_astro/layout-analyze-1.C7KPAnhT_o8i4H.webp
▻https://ishadeed.com/_astro/layout-analyze-2.DtggeFWO_2fnkGR.webp
▻https://ishadeed.com/_astro/layout-analyze-3.DDurODEH_1f4aoM.webp
▻https://ishadeed.com/_astro/layout-analyze-4.Cze0A0FS_1vo7XE.webp
▻https://ishadeed.com/_astro/layout-analyze-5.DbQDrqe8_Z1MpGWI.webp

The “Most Hated” #CSS Feature: cos() and sin() | CSS-Tricks
▻https://css-tricks.com/the-most-hated-css-feature-cos-and-sin

https://i0.wp.com/css-tricks.com/wp-content/uploads/2025/09/most_hated_feature.jpg

If we go by the unit circle definition of cos() and sin(), then it’s easy to see how they might be used to create #circular #layouts in CSS.

«Next Gen CSS: @container» de Una Kravets, CSS Tricks, 11.05.2021
▻https://css-tricks.com/next-gen-css-container

« […] You can think of these like a media query (@media), but instead of relying on the viewport to adjust styles, the parent container of the element you’re targeting can adjust those styles.

Container queries will be the single biggest change in web styling since CSS3, altering our perspective of what “responsive design” means.

No longer will the viewport and user agent be the only targets we have to create responsive layout and UI styles. With container queries, elements will be able to target their own parents and apply their own styles accordingly. This means that the same element that lives in the sidebar, body, or hero could look completely different based on its available size and dynamics. […] »

#webdev #layout

Éléments HTML5 de structure - romy.tetue.net
▻http://romy.tetue.net/elements-html-5-de-structure

Le mémo de romy.tetue.net pour l’organisation de la structure d’une page en HTML5
Sur les imbrications section/article voir aussi : ▻https://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html
Sur la structuration implicite du plan des éléments de la page généré par ces balises, voir : ▻https://developer.mozilla.org/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document

#html5 #layout #structure #section #article

Flexbox ou Grid Layout ? - Alsacreations
▻https://www.alsacreations.com/article/lire/1794-flexbox-ou-grid-layout.html

CSS : combiner Flexbox et Grid layout pour l’organisation des pages web.
Voir aussi :
– ▻https://bigint.fr/blog/2018-12-19/CSS-Grid-ou-Flexbox-les-deux-bien-sr
– ▻https://la-cascade.io/utiliser-grid-ou-flexbox
– sur MDN :
. ressources pour grid layout :
concepts de base : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout
Références : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Grid_Layout
Exemples : ►https://gridbyexample.com/examples
. ressources pour flexbox : ▻https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Flexible_Box_Layout

#CSS #grid #flexbox #layout

CSS masonry with flexbox, :nth-child(), and order | Tobias Ahlin
►https://tobiasahlin.com/blog/masonry-with-css

Méthode « tout CSS » pour faire un layout masonry : à base de flexbox, :nth-child() et order
difficulté possible : semble nécessiter de fixer la hauteur de l’ensemble...

Voir aussi : 10 exemples de layout « types » en flebox : ▻https://tobiasahlin.com/blog/common-flexbox-patterns

#css #masonry #layout

CSS Layout cookbook - CSS: Cascading Style Sheets (▻https://develope...
▻https://diasp.eu/p/7852931

CSS Layout cookbook - CSS: Cascading Style Sheets | #cookbook #CSS #MDN #layout

Grid Garden - un jeu pour apprendre les #grid #CSS
▻http://cssgridgarden.com

http://cssgridgarden.com/images/screenshot.png

#layout #web_design #css-grid #carottes

Don’t Use My Grid System (or any others)
▻https://noti.st/mirisuzanne/DDJo3H

https://on.notist.cloud/slides/ext/large-b975b5b4c1b9c897.png

#css#layout#grid

What’s in the Drupal 8 Roadmap?
▻https://www.ostraining.com/blog/drupal/drupal-8-roadmap

"In the past, Drupal’s release cycles were vague. “It will be ready when it’s ready” was a favorite quote. That was not the approach that Dries took in Nashville. Instead, he presented a very specific roadmap for where Drupal is headed."

#Drupal_D8_roadmap_layout_JSONAPI_MediaLibrary_clevermarks

Carrer Blog : 1 Line CSS Framework
▻http://www.vcarrer.com/2018/03/1-line-css-framework.html

you can make CSS grid layout only with one line of code.

tellement évident …

#css#layout#gridsystem

Layout Land - la chaine pédagogique de Jen Simmons de Mozilla
▻https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag

Nouvelles vidéos deux fois par semaine.

Exemple
▻https://www.youtube.com/watch?v=dQHtT47eH0M

via ▻https://seenthis.net/messages/670728

#intégration #web #HTML #CSS #css-grid #layout

Ingrid | Visually build responsive layouts with CSS grid
▻http://ingrid.guide

#css#grid#pageBuilder#layout

Muuri - Responsive, sortable, filterable and draggable grid layouts
▻https://haltu.github.io/muuri

Responsive, sortable, filterable and draggable grid layouts

Common UI Patterns
▻http://gridbyexample.com/patterns

A collection of built #patterns to use as starting points, complete with fallbacks. Remember that you do not need to use these for full page #layout, they could as easily be a small component in a design.

https://gridbyexample.com/img/pattern1.png https://gridbyexample.com/img/pattern5.png

#css #grids

Playing With #flexbox and Quantity Queries, From the Notebook of Aaron Gustafson
▻http://www.aaron-gustafson.com/notebook/playing-with-flexbox-and-quantity-queries

The Idea: A grid #layout that flexes to visually highlight 1-2 upcoming future events and allows the others to flow in at the default grid size. It should be set up to handle everything from a single future event to a dozen or more. Tags: flexbox layout #grille #clevermarks

▻https://github.com/GlitterOrg/pipeline

Glitter is a project to explain #CSS & #Layout on the #web, in line with the #Extensible Web Manifesto. This document is meant to describe the problems that we are trying to solve and potential solutions to these problems.

These are by no means formal proposals, they should be seen as conversation starters for a more extensible web platform.

By explaining CSS & Layout we believe that we should empower developers/frameworks to create polyfills of wanted features in CSS. As an example, new features such as regions, should be polyfill-able without having to implement in native code.

This creates a virtuous cycle between developers, implementers, and working groups.

Aux origines de Chihiro et Totoro, créatures du Studio Ghibli
▻http://www.lemonde.fr/cinema/article/2015/01/28/aux-origines-de-chihiro-et-totoro-creatures-du-studio-ghibli_4564931_3476.ht

http://golem13.fr/wp-content/uploads/2014/09/ArtLudiqueGhibli-01001.jpg

Les adolescents qui ont grandi avec Totoro, Pompoko, Kiki, Chihiro ou Ponyo pour compagnons de rêveries, et les adultes qui ont conservé une part d’enfance, pousseront avec émerveillement les portes du Musée Art Ludique à Paris. Jusqu’au 1er mars, le lieu, situé en bord de Seine, présente, sur 1 200 mètres carrés, 1 300 dessins originaux issus du studio japonais Ghibli, d’où sont sorties ces merveilles de l’animation que sont Le Voyage de Chihiro, Princesse Mononoké, Le Tombeau des Lucioles ou Mon Voisin Totoro, pour ne citer que les plus connus des films de Hayao #Miyazaki ou de son partenaire Isao Takahata.

L’exposition du Studio Ghibli ouvre ses portes à Paris
▻http://golem13.fr/art-ludique-le-musee-studio-ghibli-dessins
C’est la première fois que ces documents originaux, pour la plupart dessinés de la main même des deux fondateurs du studio tokyoïte, sont exposés en Europe. L’occasion pour les fans de ces deux maîtres de l’animation, et pour tous les passionnés d’un genre cinématographique trop souvent cantonné au public enfantin, de s’immerger dans leur univers et d’en découvrir les coulisses. Mais aussi de mesurer, en s’approchant au plus près du processus créatif, la virtuosité des deux artistes, dont chaque dessin, conjuguant encre, mine, crayon, gouache et aquarelle, constitue une œuvre en soi.

http://golem13.fr/wp-content/uploads/2014/09/GalerieArttLudique-dessins-Ghibli-studio2.jpg http://golem13.fr/wp-content/uploads/2014/09/GalerieArttLudique-dessins-Ghibli-studio7.jpg http://golem13.fr/wp-content/uploads/2014/09/GalerieArttLudique-dessins-Ghibli-studio5.jpg http://golem13.fr/wp-content/uploads/2014/09/GalerieArttLudique-dessins-Ghibli-studio3.jpg

Gaunt Face | Matt Gaunt - What the #virtual #viewport?
▻https://gauntface.com/blog/2015/01/16/what-the-virtual-viewport

the idea is splitting the notion of “the viewport” into the “layout viewport” (where fixed position items are attached) and the “visual viewport” (What the users actually see) Tags: viewport virtual #layout #RWD

Dessins du Studio Ghibli, les secrets du layout exposés | Citazine, Le Magazine urbain tendance et culturel
▻http://www.citazine.fr/article/dessins-studio-ghibli-secrets-layout-exposes-art-ludique

http://www.citazine.fr/sites/default/files/imagecache/article_img/3388dessinsdustudioghibliarticlechihirocitazine.jpg

Après avoir proposé des #expositions sur les univers Pixar et Marvel, le musée #Art Ludique met à disposition du public une partie des #archives du célèbre Studio Ghibli à travers une sélection de plus d’un millier de #layouts, des #dessins originaux exposés pour la première fois en Europe. Didactiques, les explications qui accompagnent ces dessins préparatoires – fournies par un audioguide indispensable – lèvent le voile sur le long travail nécessaire pour aboutir à des #films comme Le Voyage de Chichiro (2001), Ponyo sur la Falaise (2008) ou encore Mes voisins les Yamada (1999).

#graphisme

A Complete Guide to #flexbox
►http://css-tricks.com/snippets/css/a-guide-to-flexbox

Tags : flexbox #documentation #CSS #mise_en_page #layout #RWD #référence

Leveling Up With #flexbox
▻http://zomigi.com/blog/leveling-up-with-flexbox

“Today I spoke at Smashing Conference in Oxford, England, on “Leveling Up With Flexbox.” The talk was based off my earlier flexbox presentation, but I focused less on the basic syntax, since I think most of us have already read at least a bit about that by now, and dove right into more code examples. I talked about how to actually put it to use in the real world—today. I demonstrated a bunch of practical ideas for how to use flexbox as progressive enhancement, adding it in bits and pieces on individual page components with simple fallbacks.” Tags: #CSS flexbox #présentation (...)

#layout

Responsive Layouts Beyond the Sidebar | Jen Simmons
▻http://responsivelayouts.jensimmons.com

Les slides de la présentation de Jen Simmons sur le Responsive Web Design en mode #Mobile_first (et avec des MQs en #em !) Tags : #mise_en_page #layout Responsive Web Design (RWD) em #todo:formation:rwd Mobile first

#Responsive_Web_Design_RWD_

Fonts have feelings too — ooomf labs — Medium
▻https://medium.com/who-what-why/1523564d966c

https://d262ilb51hltx0.cloudfront.net/max/800/1*b8-yjFI0AA_3fmMoXT2wrQ.png

The researchers found that readers felt bad while reading the poorly designed layout. Sometimes, this feeling would be expressed physically with a frown.

The corrugator supercilii facial muscles that help produce a frown have been linked to the amygdala, an area of your brain responsible for emotion.

Meanwhile, the participants who read content from the good reading layout, felt like it took less time to read and felt better.

#web_design #typographie

Breaq, a resizer bookmarklet - CSS | Thomas Zilliox
►http://tzi.fr/CSS/Responsive/Breaq-bookmarklet

Breaq is a bookmarklet that allows you to resize a website to its critical sizes. It automatically detects the breakpoints in pixel and em

#layout #html #javascript #responsive #mobile #taille #critique