Learning CSS by building a new CSS framework that fits few.

There are a lot of CSS frameworks out there, I've easily starred dozens on Github. They come in all sorts of scopes and types from just grids to utility classes to massive enterprise ready projects. Given all that choice, you might wonder if we really need another framework.

Absolutely yes. You should explore what fits your stack and mental model of HTML/CSS.

The web standard isn't static, our frontend expressions shouldn't be either. We have BEM, SMACSS and OOCSS. Not to mention various pre-processors, LESS, SASS and PostCSS.

Developers find what suits them but one thing among these choices is that the complexity of HTML/CSS has to live somewhere. With CSS-in-JS it's in .js, with OOCSS it's right up front in the HTML classes. Which is to say there is no simple solution or silver bullet.

Define the constraints of your framework and go forth. With trim-css I wanted a framework that:

• Was free of preprocessors.
• Used CSS variables for theming.
• Had the simple syntax of React props.
• Was under <10kb gzipped.

Syntax

<grid columns="8" gap="2" />
  <cell bg="black" color="white span="8">
    <h1 mx="4 sm2" my="sm2" p="2" />
  </cell>
</grid>

Here's a sample of how the framework is coming. Mind you it's experimental since it uses HTML custom elements. But more importantly it offers a sense of how we could speak frontend.

Process

I've been keeping notes as I think about this project. Like core architectural choices I keep track of.

columns = columns
gap = gap
p = padding
m = margin
span = span
border = border
bg = background
color = color

Given that it's an experimental framework, I've been bookmarking all the resources I use as I explore what works and doesn't. That aside the thing I did differently this time was starting with a tester page. It's a really efficient way to build documentation and debug at the same time.

Progress

I started with just the core. If I needed to spin up a microsite in 24 hours, what would I need? That forces you to prioritize. As of now there's really just grid, colors, text, and positioning. I'll keep you posted as I add components but in the meanwhile you can see the progress as I go on https://trim-css.netlify.com or just follow me here.