Already making rounds on Twitter last week, but now the video’s been released too:
In this dynamic talk, Una goes over the power of modern CSS layout techniques by highlighting a few key terms and how much detail can be described in a single line of code. Learn a few layout tricks you can implement in your codebase today, and be able to write entire swaths of layout with just a few lines of code.
Masonry is a grid layout based on columns, as popularized by Pinterest. Unlike other grid layouts, it doesn’t have fixed height rows. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall.
☝️ That’s grid-template-rows being set to masonry there, and grid-template-columns to the already familiar repeat(auto-fit, minmax(20em, 1fr))
Knowing that Tab Atkins – author of CSS Grid Layout Level 1 – responded with I’m liking this quite a bit! was a good sign. What’s even better is that Firefox Nightly (version 77a1) has implemented it by now, behind a flag.
👨🔬 Do note that this Masonry addition is still a proposal and is considered to be highly experimental at the time of writing. The syntax is still being discussed upon and is NOT final at all. Heck, you can’t even find a mention of Masonry in the CSS Grid Module Level 2 Draft!
To enable the experimental Masonry implementation in Firefox Nightly go to about:config and set layout.css.grid-template-masonry-value.enabled to true.
Once enabled the following pen should show a nice Masonry Layout:
We should ban margin from our components. Hear me out.
By banning margin from all components you have to build more reusable and encapsulated components.
I think the message is a bit more nuanced though: margins of course still are allowed and used throughout your CSS, but if you want to allow a developer to tweak the spacing used inside your component provide a prop to let them do so.
What I’m not too excited about in this implementation is the fact that it requires you to manually cut up the image into parts beforehand, even though clip-path is used later on. I’ve quickly made a pen that uses the one single image, yielding a similar cutout effect.
Twenty-five years after the web began, we finally have a real toolkit for creating layouts. Combining CSS Grid, Flexbox, Multicolumn, Flow layout and Writing Modes gives us the technical ability to build layouts today without the horrible hacks and compromises of the past.
In this hour-long talk captured live at An Event Apart DC 2019, Jen Simmons walks you through the thinking process of creating accessible & reusable page and component layouts.
The positioning algorithms used to calculate the position of a box on the page is determined by the position and float properties. I’ll try my best to explain this in a way that makes sense. But first, let’s look at them individually.
Good introductory post to the values for CSS’s position. Also touches Logical box offset values
I’m a huge fan of magazine layouts, the use of typography, the structures, just the general look. I also love CSS Grid and as part of my learning, I have been looking at magazines for inspiration so I decided to merge the two things together and recreate some of the print work that I’ve seen and liked.
Ahmad Shadeed created this extensive RTL reference.
Over 292 million people around the world speak Arabic as their first language. Arabic is my native language, and I sometimes build websites that need to support both left-to-right (LTR) and right-to-left (RTL) styles.