I've been trying to think through a small issue for some time now ... not coding, just sitting and thinking through the issue.
Let's define the issue. We already have ways of offsetting columns. In both Bootstrap and Bulma, you add a class name for the column size, and then add another class to offset (by size) that column. One single container, two class names (or in case of Bulma, three class names).
In Bulma, for example:
<div class="columns">
<div class="column is-4 is-offset-8"></div>
</div>
One of the nice things about Bulma is the plain and simple syntax. The only part that doesn't make much sense is the use of "columns" instead of "row". The first point is "columns" is plural ... but the CSS code is defined as nowrap ... can only be one single line (plurals suggests multiple). The other line reads properly as: it's a column, it is 4 columns wide, and is offset by 8 columns of width.
In Bootstrap, for example:
<div class="row">
<div class="col-4 offset-8"></div>
</div>
Just my opinion, Bootstrap is cleaner. Syntax you get used to, but could be a bit simpler: A row with one column that is 4 columns in width and offset by 8 columns in width.
In both cases, the underlying CSS is nearly identical. The only difference between the two is that in their respective CSS files Bootstrap uses 8 decimal points and Bulma uses 5.
Bootstrap has 71 lines of code to define all of their offsets. Bulma has 176 lines of code. (Wonder now why Bulma is so bloated?) ...
After mulling this over, I had an observation. We already have the column widths defined, already have the spacing for those columns ... why not make the HTML a bit more syntax correct? What if it looked like:
<div class="row">
<div class="col-8 offset"></div>
<div class="col-4"></div>
</div>
Well, I coded that to see what the CSS would look like and was able to achieve offsets with a grand total of five lines of code. That's GRAND TOTAL ... five lines of code for all possible widths. My own CSS Framework also defined offsets. Mine are closer to the Bootstrap versions, but mine spans 75 lines. Including my tests with the additional five lines of code, my raw CSS file size is 12Kb. By removing the 75 lines of code and relying entirely on the new five lines, my CSS file size is now 7Kb. Now think about this for a minute or two: Bootstraps CSS grid file size (v5.3.3) is 69Kb. (It's actually closer to 45Kb ... their grid file includes a few other non-grid items). The Bulma CSS grid file size (v0.9.4) is 35Kb. My CSS Framework grid achieves everything that Bootstrap and Bulma do ... everything ... but does it at a significant bandwidth savings. My CSS Framework grid is only 15.6% the size of Bootstrap and only 20% the size of Bulma.
I am considering, by the way, in changing the grid syntax in my CSS Framework grid. In the above example, I like that the HTML syntax is cleaner and shows two separate DIVs, one for the offset, one for the actual data. That makes life a lot simpler for anyone coding a CMS or using any database-driven streams. Still, must think about this. What if "col-8" were expressed as "eight-columns"? ... well, this examle wouldn't work well, but need to think about this some more.
In the meantime, I have a terrific solution to the offset issue.
And, how did I do that? I won't show the code, but think about how to make an already specified column have no border, no outline, and all content (if any) has no visibility ... there's three lines, plus the class definition & braces: 5 lines.
Update: I'll stick with the 12Kb. Now I can use either method for offset, plus have the ability to use a variety of components.