Offsets about reflex HOT 13 CLOSED

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!).

from reflex.

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

from reflex.

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.

from reflex.

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.

from reflex.

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.

from reflex.

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.

from reflex.

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 !)

from reflex.

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.

from reflex.

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

from reflex.

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

from reflex.

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.

from reflex.

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.

from reflex.

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.

from reflex.