Re-thinking my own CSS framework and grids

Research shows there are at least three categories of CSS Frameworks.

1. Classless
2. Class-light
3. General

None appeal to me anymore. In the "classless" category every single one I have looked at go well beyond "classless" and include application classes to show a demo page. Every "class-light" framework contains classes and grids that I believe are impractical or useless. I view the "general" frameworks with contempt ... bloated, although useful - they are kitchen-sink and try to do way too much.

I started my own project ... and I must say, as a long time programmer, building your own is usually a dumb idea. Why reinvent the wheel? In the case of CSS Frameworks, the wheel is not round. It doesn't roll well.

While research this issue ... again ... I found a few articles with decent advice and promising direction.

I'm now working on a complete re-write ... well, not entirely. I have a lot of reusable code so it will be much easier. My original framework topped up a bit over 100Kb. My target was to get under 100Kb. My target now is to stay under 50Kb, and I have done that.

The first part of the task is to come to terms with what "classless" means. Classless is supposed to mean support of semantic HTML. No classes, just css code to support pure HTML. That was my first task. Convert what I had so that the core module could be used all by itself as "classless". One of the initial decision was to start by using "modern-normalize.css". 

I have seven "modules":

1. Classless
2. Buttons
3. Forms
4. Forms Icons
5. Spacing
6. Layout (rows)
7. Columns

I did it this way so that any module could be optional – or replaceable with something else.

One of the major changes is in grids. I, we, are so used to the 12 column grid system that we maintain that even though there are alternatives and much better. I'm glad the days of divs and floats are gone. Flexbox was supposed to be the ultimate tool to replace the divs and floats ... but it was not fully implemented and not completed. CSS Grid is closer to the ideal, but itself has some limitations.

My seven modules come in at a total of about 35Kb. A bit of room for fixes and enhancements.

The biggest change is in the grid. I had originally designed on a 12 column basis. I've come up with an entirely new strategy that can accommodate any number of columns from 2 up. Need 60 columns? Yup, it can handle that and even more. All in 10 lines of code, with a default of three columns. All of the columns are evenly spaced. With an additional 11th line, I can repeat columns of any quantity, any width. And with a 12th line, I can have static, repeatable, uneven width columns.

This is possible by using variables in the HTML code within styles. Did you know you could do that? Here's an example:

  <div class="grid-container" style="–cols:3;">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
  </div>

... and the end result:

The key to making this work is the "–cols:3;" inside the style tag. That means the variable –cols is equal to 3, and will only affect that block, nothing else. You control the number of columns with this variable.

This new strategy keeps things simple. And small.