New CSS grid at 1800px

Question

Background
We have to cater to large screens. So I created this portion of a grid system which is shown to users with screens larger than 1800px.

Solution
This grid is 1800px wide but can shrink down to 1200px, has 8 columns. I wanted 10px margin around the sides of each column. So I arrived at the number of 0.55555%.

To get to any column size i:

1. Divided the total width of 1800px by 8
2. Subtracted 20px
3. Divided the solution by 1800px

For example, to get the size of 3 columns:

1. 1800 / 8 = 225
2. 225 x 3 = 675
3. 675 - 20 = 655
4. 655 / 1800 = 0.3638888
5. 3 columns = 36.38888%

Then I just plugged in the values.

.belt {
 width: 1800px;
 max-width: 100%;
 min-width: 1201px;
 margin: 0 auto;
}
.belt .m1 { width: 11.388888%; }
.belt .m2 { width: 23.88888%; }
.belt .m3 { width: 36.38888%; }
.belt .m4 { width: 48.888888%; }
.belt .m5 { width: 61.388888%; }
.belt .m6 { width: 73.88888%; }
.belt .m7 { width: 86.38888%; }
.belt .m8 { width: 98.88888%; }
.belt .m1,.belt .m2, .belt .m3, .belt .m4, .belt .m5, .belt .m6, .belt .m7, .belt .m8
{
 float: left;
 margin-left: 0.55555%;
 margin-right: 0.55555%;
}

Naming this the Saturn framework since Saturn is huge. And the wrapper is named a belt, which is equivalent to Skeleton's .container class.

The columns are prefixed by an m as in moon. (i.e. .m1, .m2, .m3, etc.)

Demo available on this CodePen

Answer 1

I want to suggest that you use LESS/SASS to build your library

You have a lot of math. One problem here is that if you want to change your sizes, you'd be facing a calculator, calculate and change values for each. One decimal place wrong and it could ruin your pixel-perfect calculations.

With LESS/SASS, you can define your values in variables, and have properties as math expressions. Want to change the dimensions? No need to meddle with the implementation, just change the variables (That's how BootStrap customizers work).

@fullWidth : 1800;
.fifty {
 width : percentage(@fullWidth/2);
}

Also, it has nesting. I think this is possible in place of your very long sequence up there. Much cleaner.

.belt {
 .m1, .m2, .m3, .m4, .m5, .m6, .m7, .m8 {
 ...
 }
}

• Madara's Ghost: You know that CSS calc() is supported in all major browsers, right?
• Joseph: @MadaraUchiha But that's just the calculation. CSS variables and Scoped CSS, which are the other points I mentioned, are still far from reality but are done using LESS/SASS. Besides, for maximum cross-browser support, I wouldn't go all in on unstable APIs. Best to play safe.
• Madara's Ghost: True, just mentioning the fact :)

Answer 2

I wouldn't name my classes like that for anything that goes out in the open.

While it sounds cool and is a nice inside joke, the class names are not semantic, hard to remember and not very helpful in general (What's this .belt I see on the source? Where's the actual belt on the page?)

Other than that, CSS3s calc() has some very good browser support, I suggest you try it out instead of doing manual and imperfect accuracy calculation. Alternatively, you can use LESS or SASS like the other answer states.

.container { width: 1800px; }
.container m1 { width: calc(1800px * 1 / 8); }
.container m2 { width: calc(1800px * 2 / 8); }
/* snip */

• JGallardo: I should have mentioned that I have to support IE7. And the calc() is not supported. But you do have good points in most uses, so I am still upvoting.