column-offset function

[xaddict]

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?

[corysimmons]

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.

[corysimmons]

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

[xaddict]

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 [email protected] 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 .

[xaddict]

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 [email protected] 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 [email protected] 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 .

[corysimmons]

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?