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 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
Don’t Use My Grid System (or any others)
▻https://noti.st/mirisuzanne/DDJo3H
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.”
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 …
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
Ingrid | Visually build responsive layouts with CSS grid
▻http://ingrid.guide
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.
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
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
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).
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 (...)
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
Fonts have feelings too — ooomf labs — Medium
▻https://medium.com/who-what-why/1523564d966c
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.
L’étude citée dans l’article : ▻http://affect.media.mit.edu/pdfs/05.larson-picard.pdf
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
« Apprendre les mises en page CSS »
►http://fr.learnlayout.com
Ce site vise à vous apprendre les bases de #CSS utilisées pour structurer n’importe quel site #web.
Je suppose que vous savez déjà ce que sont les sélecteurs, les propriétés et les valeurs. Et vous connaissez probablement une ou deux choses sur les mise en page, même si ça peut vous donner envie de vous arracher les cheveux. Si vous voulez apprendre le HTML et le CSS depuis le début, vous devriez allez faire un tour sur ce #tutoriel
▻http://learn.shayhowe.com/html-css
Sinon, voyons si nous pouvons vous éviter de vous énerver sur votre prochain projet.
Via ▻http://www.alsacreations.com/outils/lire/1573-learnlayout.html
#css #intégration #web #mise-en-page #layout
Très bien foutu dans la présentation des chapitres aussi (manque juste la navigation au clavier genre précédent/suivant avec les flèches, ça serait pas mal).
Au secours !
Sur l’écran de mon portable Nexus S en position verticale (portrait) le champ de recherche #seenthis saute dans la ligne en dessous (avec Chrome). Il cache alors une partie du texte.
En position horizontale (paysage) le champ recherche reste dans sa position en haut d el’écran.
Les icônes gouvernail et bol de soupe chaude restent bien en place.
A mon avis les guillemets seenthis positionnés à gauche en haut prennent trop d’espace horizontal et provoquent le saut de ligne - peut-être vous pourriez déplacer tous les éléments de la barre supérieure dans un seul bloc afin de profiter de la totalité de l’espace en largeur d’une manière plus flexible. On perdrait le positionnement à droite du gouvernail, mais bof ...
Peut-être il est possible d’attribuer des largeurs flexibles aux blocs existants ... Ce sont juste des idée pour expliquer mon observation, je ne connais pas le code.
La traduction allemande s’affiche bien sur mon portable, pour le texte d’invitation c’est bien aussi.
Maintenant il faudrait internationaliser/traduire la partie « A lire » qui s’affiche directement en dessous du formulaire d’inscription.
Comment faire ?
#CSS 3 #Flexbox Layout module
►http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
Un article récent (mars 2013) sur le nouveau modèle de boite Flexbox qui arrive, présentant la syntaxe finale. Ce module intègre entre autre le principe des grilles CSS des frameworks directement dans le noyau de base. Avec alignement vertical et horizontal à l’intérieur du parent.
L’autre point génial : définir explicitement l’ordre visuel des boites, sans changer l’ordre du code HTML. Un peu comme dans #Layout-Gala cette fois, mais là aussi directement dans le noyau, avec des règles toutes simples.
jQuery : Customizable layout using drag and drop - DevHeart
▻http://devheart.org/articles/jquery-customizable-layout-using-drag-and-drop
Un tuto sur la mise en place d’un layout personnalisable par drag n drop avec jquery ui (pour la future interface du noizettier de spipclear).
