Search
Grid, content re-ordering and accessibility
13.6.2019
Take this:
<ol>
<li>Get hungry</li>
<li>Order pizza</li>
<li>Eat pizza</li>
</ol>
That HTML ends up in the DOM that way (and thus how it is is exposed to assistive technology), and by default, those list items are also visually...
Using the Grid Shepherd Technique to Order Data with CSS
28.5.2019
Shepherds are good at tending to their sheep, bringing order and structure to their herds. Even if there are hundreds of those wooly animals, a shepherd still herds them back to the farm at the end of the day.
When dealing with data, programmers often don't know if it is correctly filtered...
Code as Documentation: New Strategies with CSS Grid
24.5.2019
I work for Supercool, a fast-moving design agency that makes custom built sites for arts clients, powered by the off-the-shelf system, Craft CMS; it's high-spec graphic design with relatively demanding typography and art direction. Over the past few months we’ve been moving to CSS grid. We’re...
Creating Grid-to-Fullscreen Animations with Three.js
22.5.2019
Learn how to create thumbnail to fullscreen animations for image grids using Three.js.
Creating Grid-to-Fullscreen Animations with Three.js was written by Daniel Velasquez and published on Codrops
Animated Image Columns
16.5.2019
An experimental web layout where several image columns get animated out when a menu item is clicked.
Animated Image Columns was written by Mary Lou and published on Codrops
CSS Grid v MSIE: Jde to. I s automatickým umísťováním do mřížky
16.5.2019
CSS Grid je možné za pomoci Autoprefixeru v řadě případů použít i v Internet Exploreru. Podíváme se na problematickou oblast, kterou je automatické umísťování prvků do mřížky
A responsive grid layout with no media queries
9.5.2019
Andy Bell made a really cool demo that shows us how to create a responsive grid layout without any media queries at all. It happens to look like this when you change the size of the browser window:
I think this is a wonderful layout technique that’s just 6 lines (!) of CSS.
.auto-grid...
The Dark Side of the Grid
10.3.2019
Manuel Matuzovic makes the point that in order to use CSS grid in some fairly simple markup scenarios, we might be tempted to flatten our HTML to make sure all the elements we need to can participate on the grid. What we need is subgrid and non-buggy display: contents;, so I'd like to think in...
What We Want from Grid
27.2.2019
We felt spoiled with CSS grid for a minute there. It arrived hot and fast in all the major browsers all at once. Now that we're seeing a lot more usage, we're seeing people want more from grid.
Michelle Barker lists hers wants (and I'll put my commentary after):
Styling row and column gaps. I've...
Look Ma, No Media Queries! Responsive Layouts Using CSS Grid
27.2.2019
Not only has CSS Grid reshaped the way we think and build layouts for the web, but it has also contributed to writing more resilient code, replacing "hacky" techniques we've used before, and in some cases, killing the need to rely on code for specific resolutions and viewports. What's so cool about...
Using CSS Grid the right way
22.2.2019
Violet Peña has shared her recommendations for using CSS Grid. They basically boil down to these high-level points:
Use names instead of numbers for setting up our grid columns.
fr should be our flexible unit of choice.
We don’t really need a grid system anymore.
Although this is all great advice...
IE10-Compatible Grid Auto-Placement with Flexbox
18.2.2019
If you work on web applications that support older browsers, and have lusted after CSS Grid from the sidelines like I have, I have some good news: I've discovered a clever CSS-only way to use grid auto-placement in IE10+!
Now, it's not actually CSS Grid, but without looking at the code itself,...
Grid Reveal Effects with Anime.js
13.2.2019
Some experiments with the new staggering system of Anime.js where we try different effects for hiding and showing thumbnails in an image grid.
Grid Reveal Effects with Anime.js was written by Mary Lou and published on Codrops
Quick! What’s the Difference Between Flexbox and Grid?
12.2.2019
Let's go rapid fire and try to answer this question with quick points rather than long explanations. There are a lot of similarities between flexbox and grid, starting with the fact that they are used for layout and much more powerful than any layout technique that came before them. They...
Grid v návrhu uživatelského rozhraní — jednodušší, než si myslíte, ale důležitější, než jste čekali
30.1.2019
Nic nového pod sluncem. Bootstrap, vertikální grid, horizontální grid. Spočítejte, nastavte, pochopte a porušujte. Co jste o gridu možná nevěděli
Layer Motion Slideshow
24.1.2019
A CSS Grid-based slideshow template with a layer motion effect on the main image and title.
Layer Motion Slideshow was written by Mary Lou and published on Codrops
Piecing Together Approaches for a CSS Masonry Layout
11.1.2019
Masonry layout, on the web, is when items of an uneven size are laid out such that there aren't uneven gaps. I would guess the term was coined (or at least popularized) for the web by David DeSandro because of his popular Masonry JavaScript library, which has been around since 2010.
JavaScript...
Why we need CSS subgrid
11.1.2019
I’m a huge fan of CSS Grid and I use it on pretty much every project these days. However, there’s one part of it that makes things much more complicated than they really ought to be: the lack of subgrids. And in this post on the matter, Ken Bellows explains why they’d be so gosh darn useful:
But...
Algorithmic Layouts
10.1.2019
Don't miss this video by Heydon that digs into CSS layouts. It's great how he combines fundamental knowledge, like the way elements flow, wrap, and can have margin with new layout methods like flexbox and grid (with specific examples). Of particular note is the clear demonstration of how flexbox...
A CSS Venn Diagram
17.12.2018
This is pretty wild: Adrian Roselli has made a series of rather complex Venn diagrams using nothing but CSS. With a combination of the Firefox dev inspector, plus a mixture of CSS Grid and the shape-outside property, it’s possible to do this and without a ton of hacks, too.
I also think it’s super...