#css

My quest for simplicity has led to some people doing some pretty interesting stuff. Even more appealing to me than Utopia is Every Layout, which frankly seems hard to sum up in an elevator pitch, but like Utopia it aims to get CSS back to declaration and away from prescription. In this case, it seems largely because declarative just works better. My only beef with this thing is the price. It's no doubt that a lot of work went into it but 70 bucks is steep.

The further I read into the sample content, the more I'm standing up, punching the air, screaming. It's that invigorating and it makes that much sense.

Incidentally, one of the authors is responsible for CUBE CSS, which I'm been looking at with interest too. I'm a BEM-head from way back, but this looks like an interesting philosophical take on CSS that embraces a recent trend among true HTML/CSS folks: Stop fighting the cascade. You're speaking my language.

Now this is something interesting.

Obviously we've gotten pretty far away from the fundamentals of the web. "Text with hyperlinks" is the mission of the Gemini project, something that's described as heavier than Gopher and lighter than the web. So there's an appetite for those simpler days. All the myriad ways we've strayed from Hypertext's light would take quite a few more blog posts and sound like an old man yelling at clouds, but in terms of web design it feels pretty specific. Build tools. Compiled code. Scoping and renaming classes at runtime. Arguments about whether to put CSS in JS. Not gonna belabor that, you get it.

I taught myself to ditch tables around 2002-2003 by reading Eric Meyer's O'Reilly title CSS: The Definitive Guide, which is purely a reference title. It was not what I would call complicated. It probably took me just as long to figure out how to implement Grunt, which was already supplanted by Gulp by that time. Life is complicated, and I guess life in CSS has gotten that way as well. It feels such a long way from the CSS Zen Garden.

I don't necessarily think that breakpoints and media queries are an extreme example of the complication — remember conditional comments? Remember writing separate sites from Netscape and Internet Explorer? But I do think Utopia's authors asserting that their framework is "declarative" instead of "prescriptive" or "instructive" brings it back to the fundamentals of CSS. I find it a bit ironic though that they're using some really complicated calculations to achieve simplicity for the user. I recognize that bootstrap does something similar when calculating the grid, but the deeper the math I don't understand burrows, the more scared I am of relying on it.

I haven't read enough of the material here to understand how they handle anything other than the spacing and typography — and whether they like it or not, there is more to it than that, even if those are the only two things you can't take away. Looks like it may be relying on CSS grids to keep things in one media space. And lord knows I haven't adequately learned CSS grids yet. But I'm going to give this a shot. Maybe the next version of this site will be Utopian.

Here's Jeremy Keith on the logic inherent in CSS, and putting in guardrails.

Rachel Andrew, the Guru of Grids, on why you don't need a "Grid Framework" to use CSS Grid. For me, part of the desire to use grid is right here — the additional overhead of throwing in a grid system is just unnecessary. And with Grid comes horizontal and vertical alignment, markup without containers, and so many more possibilities for layout.

Even fallbacks, one reason frameworks tend to get popular, aren't needed in her estimation:

Create solid markup, uncluttered by additional elements that the past tells you that you need. Design your site using what Grid and other new methods have to offer. Then look at how you deal with the browsers without support, by serving them something slightly simpler.

Now that Edge fully supports Grid, it's probably time to stop farting around and really learn it, now that I've finally embraced flexbox.

This is a really cool idea.

Firefox and Chrome have now officially launched support for CSS grid. Months of saving Rachel Andrew talks in your Pocket account and saying "I'll get to that soon, it won't be ready for a couple years anyway" have finally paid off!

I'm kind of stoked to get into it. Here's a CSS-Tricks primer.

EDIT: I spent a lot of time using Jeet on a lot of sites and apps once I discovered it. Thanks, Jeet.

I've used a lot of CSS frameworks, minimal grids, etc etc. I've even made my own, which frankly would've worked for this site. But it didn't work for the more complex purpose I had hoped to apply it to, so I ended up using Jeet, which is a variation on what this site actually uses.

This site uses Lost Grid, a PostCSS based system that's pretty neat. But its creator's earlier work, Jeet (for Stylus or Sass), is a pretty beautiful creation on its own. Awesomely, it's now being maintained again by someone else, so it feels alive and pretty safe to use. That's nice because I'm just not quite ready to throw PostCSS-based tools into production yet. I need speed, and speed means familiarity. That means Sass. I'd encourage anyone looking for a grid that is only a grid to look at Jeet.

Here's Jonathan Snook with what is probably a more measured response than mine.