Open xaddict opened 7 years ago
You're trying to get column-width + column-gutter
? Or do you need half a gutter?
I think we could add something like span-width
to do this.
I'd also heavily suggest you check out postcss-ant. It was specifically developed to get whatever sizes you could possibly imagine in an intuitive way.
For instance, here is a column, column + 1/2 gutter, column + full gutter: https://codepen.io/corysimmons/pen/dvNNbj?editors=1100
yeah, column width (3/12) plus one whole gutter width.
with a '12 column' grid the column-offset for 3/12 would
(1/12 column + 1/12 gutter)*3
On Wed, 8 Mar 2017 at 21:35 Cory Simmons notifications@github.com wrote:
I'd also heavily suggest you check out postcss-ant http:///corysimmons/postcss-ant. It was specifically developed to get whatever sizes you could possibly imagine in an intuitive way.
For instance, here is a column, column + 1/2 gutter, column + full gutter: https://codepen.io/corysimmons/pen/dvNNbj?editors=1100
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mojotech/jeet/issues/525#issuecomment-285161007, or mute the thread https://github.com/notifications/unsubscribe-auth/ADJIhOtfrdNIKGeXXjqZGTgFASYfIMvxks5rjxEogaJpZM4MXLoj .
Before Jeet I used to ONLY use Less CSS. And in LESS it's pretty easy (if Jeet supported LESS):
@column2: column-width(2/12); // 14.1666666667% @gutter: column-gutter(1/12); // 3%
.col-sm-offset-3 { margin-left: (@column2 + @gutter); }
And the margin-left would be an added up percentage (17.1666666667%). No need for postCSS, just LESS compiling to CSS.
On Wed, 8 Mar 2017 at 23:13 Luuk Lamers darklightdusk@gmail.com wrote:
yeah, column width (3/12) plus one whole gutter width.
with a '12 column' grid the column-offset for 3/12 would
(1/12 column + 1/12 gutter)*3
On Wed, 8 Mar 2017 at 21:35 Cory Simmons notifications@github.com wrote:
I'd also heavily suggest you check out postcss-ant http:///corysimmons/postcss-ant. It was specifically developed to get whatever sizes you could possibly imagine in an intuitive way.
For instance, here is a column, column + 1/2 gutter, column + full gutter: https://codepen.io/corysimmons/pen/dvNNbj?editors=1100
— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/mojotech/jeet/issues/525#issuecomment-285161007, or mute the thread https://github.com/notifications/unsubscribe-auth/ADJIhOtfrdNIKGeXXjqZGTgFASYfIMvxks5rjxEogaJpZM4MXLoj .
Sorry, I hate, and have hated, LESS' syntax so I never ported Jeet to it.
Why would you need the full gutter? span()
works by getting half gutter. I see a case for span-column()
being introduced, but think your need might be too fringe to warrant more API.
So far as postcss-ant, if you're already into a project, then I wouldn't migrate, but for future projects you should really look into it. It works with any preprocessor (i.e. LESS) or even vanilla CSS.
I think wrapping what you're trying to do in a function is your best bet for now: https://codepen.io/corysimmons/pen/bqgrqo?editors=1100
And this should serve as a lesson that Sass, and other preprocessors, are grossly underpowered. I think they should be used for syntax sugar, but for libs, or anything custom, PostCSS is king.
@pixeldesu Thoughts on this issue?
I'm looking for an easy way to calculate just the offset of a column (think of bootstrap's col-sm-offset-3).
column-width(3/12) + column-gutter(1/12)
would be an easy way to calculate this but both of those functions return a string.To get rid of the string I need the following code:
$offset3: to-number(str-slice(column-width(3/12), 0, -2)) + $gutter + unquote("%");
where to-number is an annoying helper function just to get the percentage string to be recognised as a float.
Is there any way column-width and column-gutter can be modified to only return a float?