Select Page

Category: Article

Preventing a Grid Blowout

Say you have a very simple CSS grid layout with one column fixed at 300px and another taking up the rest of the space at 1fr. .grid { display: grid; grid-template-columns: 1fr 300px; } That’s somewhat robust. That 1fr column will take up any remaining space left behind by the fixed 300px column. It’s true that the auto value would do the same, but auto isn’t quite as robust since it’s size is based on the content inside. So, if you had too little content, then your column might not fill the entire space you want it to. But...

Read More

Developing With Automad

Selecting the right CMS for a blog or website can be difficult. Every web project has its own needs and requirements, meaning one CMS may be a better fit for one site but not so much for a different site. Simple solutions might be lacking some essential features, while more complex systems can create easily overhead for a given task. I want to cover Automad, a CMS that is less-known than, say, a behemoth like WordPress, but still offers some powerful features like it while maintaining the nimbleness of smaller, simpler solutions, like static site generators. Specifically, Automad fills...

Read More

Nested Links

The other day I posted an image, quite literally as a thought exercise, about how you might accomplish “nested” links. That is, a big container that is linked to one URL that contains a smaller container or text link inside of it that goes to another URL. That’s harder than it might seem at first glance. The main reason being that… Outside Inside Eric Meyer once called for more flexible linking, but even that doesn’t quite handle a situation where one link is nested inside another. Here’s what happens with that HTML, by the way: The nested link gets...

Read More

A Minimal JavaScript Setup

Some people prefer to write JavaScript with React. For others, it’s Vue or jQuery. For others still, it is their own set of tools or a completely blank document. Some setups are minimal, some allow you to get things done quickly, and some are crazy powerful, allowing you to build complex and maintainable applications. Every setup has advantages and disadvantages, but positives usually outweigh negatives when it comes to popular frameworks verified and vetted by an active community. React and Vue are powerful JavaScript frameworks. Of course they are — that’s why both are trending so high in overall...

Read More

Don’t use empty or low content for your design system grid examples

Dave and I had Jen Simmons on ShopTalk the other day. Jen was talking about Intrinsic Web Design and how one of the core tenets of it is grids with rows and columns that don’t necessarily change at the same rate or ones that have essentially different rules for how they behave. For example, take this (contrived) grid setup: .grid { display: grid; grid-template-columns: 1fr minmax(50px, 100px) 20% auto; } Each of those columns will behave differently. I’m just wrapping my head about this, and definitely don’t fully understand it. Here’s what it seems like to me, numbered 1-4 based on the “strength” (I guess?) of the width. .grid { display: grid; grid-template-columns: 1fr /* #4 - Weakest, will fill remaining space */ minmax(50px, 100px) /* #3 - Will only start changing when other columns force it */ 20% /* #1 - Definite size, steady */ auto /* #2 - Indefinite size, entirely based on content, pushy */ ; } This is much different from quite a long history of how we’ve set up grid columns in the past. Float-based grids typically use percentages (a definite size) to set columns. Same with inline-block-based grids, typically. Even with grid, if you set up all your columns with all percentages or all fractional units, you’d likely have a steady grid in which the content inside won’t mess with sizing. But Jen...

Read More
000webhost logo