#grid

What is Grid Layout? [10 #shopify themes examples]
▻https://hackernoon.com/what-is-grid-layout-10-shopify-themes-examples-16a7cb746e7c?source=rss--

https://cdn-images-1.medium.com/max/800/1*D43yBOZd3MsOACplnJBp3Q.jpeg

What is Grid Layout? PLUS: 10 Shopify Themes ExamplesMessy structures with elements overlapping each other and jumping all over the page could be very creative and original, but the designer has to invest an enormous amount of efforts to make it look understandable. On the other hand, pages that have an accurate layout with strict alignment and clear organization don’t demand some extra observation skills from the users and thus are more user-friendly. The layouts built in a precise and flat way are called grid layout themes.The grid is a set of horizontal and vertical lines which help to define where rows and columns will take place on the page. All the content you want to place to the website is placed into those rows and columns and that’s why it looks so accurate.Despite messy layout (...)

#whats-grid-layout #grid-layout #shopify-theme

CSS Grid in IE : CSS Grid and the New Autoprefixer | CSS-Tricks
▻https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer

https://css-tricks.com/wp-content/uploads/2018/06/ie-tiles.jpg

Utilisation des propriétés CSS3 grid avec Internet Explorer : les adaptations/contournements apportés par Autoprefixer et les propriétés vraiment pas supportées.

Voir aussi :
– le repo d’autoprefixer ▻https://github.com/postcss/autoprefixer (Gulp / Grunt / js autonome...)
– le repo de html-autoprefixer pour les CSS inline : ▻https://github.com/RebelMail/html-autoprefixer

#grid #autoprefixer #Internet_explorer #prefixe #css3

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

J’ai besoin d’aide avec des #CSS. J’essaie de reproduire la présentation ultra-alignée d’images carrées telle qu’on la trouve dans Photos sur l’iPhone. L’idée étant d’avoir des vignettes carrées dont la taille n’est pas totalement fixe, et si possible sans s’embêter avec les media queries usuelles selon la taille de l’écran (genre une case de largeur 25% quand on est entre 600 et 720 pixels…).

L’idée c’est que j’arrive à faire ça très bien avec une flex box :

https://i.imgur.com/Bmfv1da.jpg

Mais le hic, c’est la dernière ligne. Les deux premières lignes, ça fonctionne magnifiquement, les dimensions des vignettes carrées sont très bien gérées quelle que soit la largeur d’affichage, le nombre de vignettes par ligne se calcule tout seul avec « flexibilité », l’alignement est parfait. Bref le bonheur.

Mes CSS pour l’instant :

Sauf comme tu vois, la dernière ligne, qui occupe toute la largeur mais ne s’aligne pas.

Je voudrais obtenir ceci :

https://i.imgur.com/YPLctAk.jpg

Et j’ai pas trouvé comment…

Front-End Tricks: 100% #css control of #masonry Layout w/ left-right content flow
▻https://hackernoon.com/masonry-layout-technique-react-demo-of-100-css-control-of-the-view-e4190

https://cdn-images-1.medium.com/max/1024/1*9jRvf6g6tMKS7jn84JmuOA.png

CSS column-count + array reordering = left-to-right content flowLive Demo: ▻https://github.com/jessekorzan/masonry-css-jsThe problem… column-count works great except for left-to-right scan readingMasonry Layouts… popularized by sites like Pinterest. Loved by non-coding designers and holy-grailed in corporate boardrooms.Naturally, many sharp front-enders have worked on solutions. We have several libraries, techniques and hacks to achieve this marvel of content display.There are times when a masonry layout is an appropriate design decision. Depending on what else that design has to accommodate, these solutions might be a good fit.For me, especially in exploratory efforts, a pure-CSS method is a flexible and fast way to iterate. I don’t want to rely on DOM manipulation or end up with a contrived (...)

#react #javascript #grid-layout

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

Accessibilité des tableaux responsives, et impact sur la lecture vocale de l’utilisation des propriétés css flex ou grid pour la ré-organisation des cellules.

Tables, CSS Display Properties, and ARIA | Adrian Roselli
▻http://adrianroselli.com/2018/02/tables-css-display-properties-and-aria.html

http://adrianroselli.com/wp-content/uploads/2018/02/ARIA-flex-table_generated_thumb-150x150.png

#css#flex#grid#ARIA

CSS Grid for UI Layouts – Mozilla Hacks – the Web developer blog
▻https://hacks.mozilla.org/2018/02/css-grid-for-ui-layouts

https://hacks.mozilla.org/files/2018/02/hacksscreenshot-2_1c.jpg

The fundamental problem with Flexbox is that it is one dimensional. This makes Flexbox great for one dimensional uses, like toolbars and navbars, but it begins to fail when I need to align content both horizontally and vertically at the same time. Instead I need real two dimensional layout, which is why I need CSS Grid. Fundamentally Grid is 2D.

#grid #flexbox #css #webdesign

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

#css#grid#pageBuilder#layout

New #flexbox guides on MDN – Mozilla Hacks – the Web developer blog
▻https://hacks.mozilla.org/2018/01/new-flexbox-guides-on-mdn

How to make your HTML responsive by adding a single line of #CSS
▻https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css

https://cdn-images-1.medium.com/max/1200/1*jCNANupl0ECRzF6cOLuWNw.gif

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

Titre un peu racoleur mais tout de même intéressant.

#grid

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

Responsive, sortable, filterable and draggable grid layouts

Basehold.it - quick, painless, javascript-free baseline overlays
▻https://basehold.it
#css #grid #vertical #rhythm #rythme #typo

Progressively Enhancing #CSS Layout: From #Floats To #Flexbox To #Grid

▻https://www.smashingmagazine.com/2017/07/enhancing-css-layout-floats-flexbox-grid

When you open the demo, you’ll find yourself on the home page of a website with a very basic layout. You can adjust the slider in the top left to enhance the experience. The layout switches from being very basic to being a float-based layout to being a flexbox layout and, finally, to being one that uses grid.

▻https://s.codepen.io/matuzo/debug/Emddvx

In the following sections, I’m going to show you how I built parts of the demo and why some things just work out of the box.

Using #CSS #Grid: Supporting Browsers Without Grid

▻https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid

When using any new CSS, the question of browser support has to be addressed. This is even more of a consideration when new CSS is used for layout as with Flexbox and CSS Grid, rather than things we might consider an enhancement.

In this article, I explore approaches to dealing with #browser_support today. What are the practical things we can do to allow us to use new CSS now and still give a great experience to the browsers that don’t support it?

Does CSS Grid Replace Flexbox? | CSS-Tricks
▻https://css-tricks.com/css-grid-replace-flexbox

https://cdn.css-tricks.com/wp-content/uploads/2017/03/both-grid-and-flex.png

No. Well. Mostly No.

#Grid is much newer than #Flexbox and has a bit less browser support. That’s why it makes perfect sense if people are wondering if CSS grid is here to replace Flexbox.

To put a point on it:

Grid can do things Flexbox can’t do.
Flexbox can do things Grid can’t do.
They can work together: a grid item can be a flexbox container. A flex item can be a grid container.

#web_design

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

An Introduction to the fr CSS unit
▻https://css-tricks.com/introduction-fr-css-unit

https://cdn.css-tricks.com/wp-content/uploads/2017/06/grid-2.png

The fr unit (a “fraction”) can be used when defining grids like any other #CSS length such as %, px or em.

Breaking Out With CSS Grid Layout

►https://cloudfour.com/thinks/breaking-out-with-css-grid-layout

A while back I shared a simple technique for allowing certain elements to fill the full viewport width from within a fixed-width container

As concise as this technique was, it had one big, dumb caveat: On some platforms, you’d see a horizontal scrollbar unless you set overflow-x to hidden on the body element.

It’s now a year later and every modern browser supports (or will soon support) CSS Grid Layout (hooray!!). I thought it might be fun to reexamine this problem with a fancy set of modern layout tools at our disposal.

https://29comwzoq712ml5vj5gf479x-wpengine.netdna-ssl.com/wp-content/uploads/2017/05/grid-breakout-demo-1-r2-opt.gif

#css_grid #full_width

Ça pourrait intéresser @fil pour certains éléments de #visionscarto ;)

CSS Grid Layout arrive, préparez-vous ! – La Tête dans le Flux
▻https://blog.goetter.fr/2016/11/30/css-grid-layout-arrive-preparez-vous/comment-page-1/#comment-616

En résumé :
Grid Layout est un module de positionnement parfait pour construire ses templates et ses grilles, bref l’architecture globale de la page
Flexbox est parfait pour les composants qui constituent l’intérieur de nos gabarits : navigations, sliders, fiches produits, etc.

L’idée serait de pouvoir se passer de bootstrap pour gérer les grilles dans les pages HTML...

Voir aussi :
– comparatif de toutes les possibilités pour des grilles en CSS : float, inline-block, table-cell, columns, flexbox, grid ▻https://blog.goetter.fr/2014/10/27/le-point-sur-les-grilles-en-css

Grid layout :
– le positionnement par grid layout : ▻http://www.alsacreations.com/article/lire/1388-css3-grid-layout.html
– le site de référence pour grid layout, page des exemples : ▻http://gridbyexample.com/examples
– des exemples avancés d’utilisation de grid layout : ▻https://blog.goetter.fr/2016/01/02/grid-layout-vers-la-grille-parfaite
– une sélection de références par le gourou d’Alsacréation : ▻https://www.alsacreations.com/astuce/lire/1739-CSS-Grid-Layout-les-ressources-indispensables-pour-apprendre.htm
– plein d’exemples de layout basés sur grid : ▻https://gridbyexample.com/examples
– l’outil de développement de Firefox spécialisé pour l’inspection des grilles : ►https://www.mozilla.org/en-US/developer/css-grid

Flexbox :
– revue exhaustive des caractéristiques de flex : ▻https://chriswrightdesign.com/experiments/flexbox-adventures
– une présentation complète et progressive de flexbox : ▻https://la-cascade.io/flexbox-guide-complet
– exploration des possibilités de CSS flexbox (flex, flex-item, order...) : ►http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
– un générateur de code pour les propriétés flex : ▻http://the-echoplex.net/flexyboxes
– des exemples de grilles en flex : ▻https://philipwalton.github.io/solved-by-flexbox

Et pour la norme :
– Flexible box : ▻https://www.w3.org/TR/css-flexbox-1
– Grid layout : ▻https://www.w3.org/TR/css-grid-1

#css, #flex, #flexbox, #grid, #grid_layout, #grille #bootstrap

Tableau de bord en temps réel du réseau électrique Français

http://i.imgur.com/tG0JObG.png

On noteras l’ampleur des exportations - remercions nos voisins pionniers de la transition énergétique qui contribuent à redresser la balance commerciale Française !

Whose Grid Map is better? Quality Metrics for Grid Map Layouts — Medium
▻https://medium.com/@kristw/whose-grid-map-is-better-quality-metrics-for-grid-map-layouts-e3d6075d9e80

I have defined a set of metrics for evaluating the quality of a Grid Map layout.

https://cdn-images-1.medium.com/max/800/1*8saT1J-G_csb6oOEooz2gQ.png

#grid_map #cartographie

Fall of the #Designer Part IV: Credible Threats: about the impact of #flat_design and #grid_frameworks on design
►http://www.elischiff.com/blog/2015/4/28/fall-of-the-designer-part-iv-credible-threats

Using #renewable #energy sources as baseline electric production requires solving the problem of their intermittency. Grids are not there yet, but solutions exist in concept - what conversion to renewable energy now requires is political will to invest in engineering development.
▻http://en.wikipedia.org/wiki/Intermittent_energy_source#Solving_intermittency
#electricity #power #wind #solar #geothermal #hydroelectric #HVDC #grid