Offsets

[OldNick]

I like this grid system - particularly that you can write semantic html rather than <div class="row"> etc.

However, I'm developing for a site using Concrete5 which has the capacity to do on-the-fly layouts but, to set this up, you have to provide "offset" classes. I suppose I could basically copy the bootstrap offset system, but there may be a better way to do it.

I realize including offset classes would go a good way to doubling the size of the file - but perhaps have it in a less file which could be commented out by default and included if wished ?

[leejordan]

You're right that it would increase the size greatly but it is something I have considered adding (I just haven't found the time yet).

I realise it doesn't help your use case with Concrete5 but one thing you can do is use empty columns to offset things, or just add horizontal padding to the grid element.

[OldNick]

I figured you could use an empty column - although, if you're a purist, the semantic side of things gets a bit let down ! I wonder if Concrete5 would accept it though - probably worth a try.
I had a look at the LESS files and it's at a level of sophistication way above my capacities ! Perhaps, looking at it closely, I can work something out.

[leejordan]

the semantic side of things gets a bit let down

Yea I agree totally.

I'd like to add offsets one day as an optional extra for sure.

[OldNick]

I think I've cracked the offset question !! Mostly by trial and error...
in mixins.less add

.make-reflex-offsets(@class: ~'') {
    .loop-reflex-columns(@reflex-columns - 1, @class, width);
}
.calc-reflex-offsets(@index, @class, @type) when (@type = margin-left) and (@index > 0) {
    .@{reflex-prefix}@{class}@{index} {
        margin-left: percentage((@index / @reflex-columns));
        *margin-left: percentage((@index / @reflex-columns)) - 0.1;
    }
}

.loop-reflex-offsets(@index, @class, @type) when (@index >= 0) {
    .calc-reflex-offsets(@index, @class, @type);
    // next iteration
    .loop-reflex-offsets((@index - 1), @class, @type);
}

(the magic is simply adding "- 1" to give "@reflex-columns - 1 ")

in grid.less add:

.make-reflex-offsets(grid--offset-);

@media (min-width: @reflex-xs) {
    .make-reflex-offsets(grid--offset-xs-);
}

@media (min-width: @reflex-sm) {
    .make-reflex-offsets(grid--offset-sm-);
}

@media (min-width: @reflex-md) {
    .make-reflex-offsets(grid--offset-md-);
}

@media (min-width: @reflex-lg) {
    .make-reflex-offsets(grid--offset-lg-);
}

@media (min-width: @reflex-xlg) {
    .make-reflex-offsets(grid--offset-xlg-);
}`

I don't know about auto-columns, but it'll be a similar process.
(tested using Crunch)

Having said that I can't remember how flex plays with margins... (I sort of dip into site building every six months or so... I'm not a full time swimmer !)

[OldNick]

Just been looking here [(http://codepen.io/goerk/pen/uFkny)]
and it seems possible to have offsets vertically !

Do we want to go there...?

Although
margin : auto
is quite useful if you have images of different sizes / dimensions to place in a predefined box.

[ShaggyDude]

With flexbox you can controll ordering => https://developer.mozilla.org/en-US/docs/Web/CSS/order. Are you wanting offsets just for visual indention?

[leejordan]

Yea, just for visual indentation but I'm not entirely sure it's required.

[OldNick]

Actually I don't think it's order that would control offsets it's more justify-content that would help. However this might not give the precision you want.
There are certain CMS systems, Concrete5 being the one I know, that allow layouts on the fly. Their default layout system is Bootstrap, which I intensely dislike because of its unsemantic, code-bloating markup. To set up the on-the-fly layouts you need both the column classes and offset classes for it to work - so I got interested in offsets.
Offsets may have other uses - as it is at the moment, I leave them commented out in the LESS file until such time they may be necessary...
There is a small problem with the Reflex order classes - if on a large screen you want order 1, 2, 3 for 3 elements, but on mobiles you want 1,3, 2 you have to use old fashioned CSS instead of the classes because the classes, as they stand, don't have variations for media queries.

[leejordan]

There is a small problem with the Reflex order classes - if on a large screen you want order 1, 2, 3 for 3 elements, but on mobiles you want 1,3, 2 you have to use old fashioned CSS instead of the classes because the classes, as they stand, don't have variations for media queries.

This was raised in another issue but I am not sure I want to add it to the core as it will bloat it out and it's fairly trivial to add it as you have found. I may reconsider though.

[OldNick]

I think the best procedure may well be to add the code in the .LESS files but commented out. The user could activate it if necessary (after due warning about bloat!).

[andreasisaak]

This was raised in another issue but I am not sure I want to add it to the core as it will bloat it out and it's fairly trivial to add it as you have found. I may reconsider though.

I created a pull request for this feature #35

[dmoojunk]

Perhaps use the pattern of variables controlling inclusion? - i.e. $use-offsets: false!default; and wrap the code in question in an if statement? its cleaner than commenting in/out.
It would start a pattern that would allow the core to remain slim, but extendable.

[leejordan]

Having tried this out, I am going to add @andreasisaak proposal to the core library as after gzip it only adds 1k to filesize and is very useful.