CODEWITHSUNDEEP
htmlcss
Francis Rodgers
Francis Rodgers

Reputation: 4685

CSS Additive Sizing

I am playing around with designing my own grid system. I decided to go with something that splits columns on percentage i.e. 10% 20% 30% etc. So I have Col-10 for a column that is 10%.

However, instead of doing a lot of coding, I want instead to use some sort of additive method. Think of it like money.

You have 100 note, a 50 note, a 20 note, a 10 note a 5 note and a bunch of small coins usually of the same denomination 100p coin, 50p coin, 20p coin, 10p coin, 5p coin and of course the all important 2p and 1p.

There is no 77 note. That would be made of 50, 20, and 5 notes, and 2 x 100p coins.

I want to do likewise with CSS. Instead of defining and using a specific width, lets say I want a column of width 77%. I would like to be able to do a class like this:

<div class="Col-50 Col-20 Col-5 Col-2">Content</div>

and in my CSS I would have these classes defined according to their respective percentages.

My problem is. The last class here, would be all that is applied. giving me a 2% column instead of the 77% column I intended.

Is there any magic CSS trick that will allow me to do some sort of additive % like what I am thinking or is this a JavaScript the only option.

I could do this in JavaScript but I want to avoid using JavaScript / jQuery or other code apart from HTML5/CSS3 at all costs because I want to remove external dependencies. While rare, it is still possible to disable JavaScript in browsers and I want my system to work without it if possible.

I also know I could us SCSS / LESS etc but ultimately the end result would be a very large CSS file filled with almost every % between 0 and 100. This is not my goal.

Upvotes: 1

Views: 237

Answers (2)

gorrilla10101
gorrilla10101

Reputation: 394

no it isn't possible, At some point you would have to have 100 classes for the width. If you are set on staying css only. I would write a CSS generator that basically loops through and creates the redundant code and saves it to a file for you. Then you could go in and add to the file as needed.

Upvotes: 0

Jason
Jason

Reputation: 4159

I don't believe this is possible with CSS alone. CSS is a styling language, so (with the exception of calc() https://developer.mozilla.org/en-US/docs/Web/CSS/calc) it doesn't have math calculations. It really isn't designed to compound values in that matter. Even a preprocessor like SASS/Less, I don't believe, would be able to accomplish that since the preprocessing is on the CSS side, not the HTML side. Perhaps an HTML preprocessor?

Either way, I'm not sure I follow the benefit of the class; adding 4 classes just to specify a width seems superfluous.

Maybe if they come out with "Compounding Style Sheets"? :)

Upvotes: 2

Related Questions