Spending some time going over my CSS Framework code, in particular - the grid system.
I found a small issue when it wrapped and the row conained an offset. I had forgotten to add a condition to remove the spacing on an offset ... more important, I had forgotten that an offset should be hidden in the "phone" or "mobile" size.
Ended up in a full review and a re-think of my original strategy. I had ended up with four breakpoints (meaning five possible viewports). I like the idea of five possible viewports, it seems to give more control over designs for various screen sizes. There are other reasons that are more compelling to have only three breakpoints (meaning four possible viewports). The first one is that seems to be the industry standard. If I used the phrase "responsive grid standard breakpoints", most reference sites (including the most important ones) showed breakpoints at 768px, 992px, and 1200px. Three breakpoints, four possible viewports. And most give them acronyms:
- Up to 768px, "xs" (extra small) - or "mobile" or "phone"
- First Breakpoint: Minimum 768px, "sm" (small) - or "tablet" or "touch"
- Second Breakpoint: Minimum 992px, "md" (medium) - or "desktop"
- Third Breakpoint: Minimum 1200px, "lg" (large) - or "wide" or "large desktop"
There are many flexbox grid systems available as "open source" projects. Most, however, are dated. You see, the Flexbox spec has gone through at least three iterations since its initial launch in 2009. Many of the projects are based on the initial or early versions of flexbox – along with their work-arounds for the early limitations. In 2024 all modern browsers support flexbox. (And a PS here: IE is not a modern browser and I'm not interested in creating work-arounds to support IE - neither is Microsoft, by the way). I want my CSS Framework to support the 2024 version of flexbox with modern attributes. I also want it intuitive with simple syntax. "xs-col-12" isn't simple syntax. I'd prefer "col-12" syntax style.
I re-wrote the flexbox grid and now call it "simple_grid.css". My original version had two glitches and sized in at 15Kb. The new one has no glitches (well, at least that I know of from my testing), two additional features and sizes in at 7Kb. I think I can get that down a little bit too ... and possibly restructure the breakpoints so that HTML markup would be dramatically changed. All four viewports accommodated in one simple column class declaration. You see, I'm also a programmer, when you start thinking like a programmer while writing CSS, you get a bit frustrated at the limitations of CSS ... but you also apply a different logic that helps you look at the needs differently. I'm on it.