A rather geeky/technical weblog, est. 2001, by Bramus
Kevin Pennekamp (Vycke): With the addition of grids, we can overcome media-query fatigue. Not only make our CSS more maintainable, but they also improve the user experience. We can let CSS handle the available space. In this article, I will describe three layout implementations that can improve your (personal) website. The addition of Grid Layout …
Continue reading “Modern CSS grid solutions to common layout problems”
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 …
UPDATE 2020.10.22: Masonry Layout has officially become part of the CSS Grid Module Level 3 spec! A long requested CSS feature is to be able to create a “Masonry Layout” using pure CSS. Today we can already create a Masonry-like layout using grid-auto-flow: dense;, but unfortunately that’s not the real deal. 🤔 Masonry Layout? Masonry …
Continue reading “CSS Grid Layout Module Level 2: Masonry Layout”
Max Stoiber: 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 …
clip-path
On Codrops there’s a tutorial on how to create a Cutout Collage Layout using CSS Grid and Clip Path. The result looks quite nice I must say: 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 …
Continue reading “Crafting a Cutout Collage Layout with CSS Grid and clip-path“
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, …
Continue reading ““Designing Intrinsic Layouts” by Jen Simmons”
Chen Hui Jing: Everything on the web is a box. 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 …
Just like Jules Forrest before, Dan Davies has recreated some magazine layouts using CSS Grid: 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 …
Continue reading “Print to CSS – Magazine layouts recreated with CSS Grid”
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. Be sure to read the section on CSS Logical Properties too, as that will …
When having fullwidth content strips on your site CSS Grid is a thankful piece of technology. You can use it to place items between the first and last grid-line, as detailed in Breaking Elements out of Their Containers in CSS 💁♂️ Alternatively you can also use this .full-bleed utility class To lay out the content …
Continue reading “Fullwidth Content Strips and CSS Subgrid = ❤️”