margin-right: settings.gutter !important when disabling offset

[plesiecki]

Is this a feature request or a bug report?

Bug report

What is the current behavior?

When you attempt to disable the offset lost outputs margin-right: settings.gutter !important

If it's a bug please provide the steps to reproduce it and maybe some code samples.

@lost gutter 1rem;
lost-offset: 0 or lost-offset: -0 or lost-offset: none or lost-offset: -0/1
outputs
margin-right: 1rem !important

What is the behavior that you expect?

see below

What's the motivation or use-case behind changing the behavior?

I would like to disable the offset on certain breakpoint.

What version of LostGrid, browser and browser version are affected by this issue? Did this happen in previous versions?

n/a

Example on codepen
http://codepen.io/plesiecki/pen/BKXEGz

[peterramsing]

Will look into this.

[steve-holland]

Is there any update on this issue?

I'm having the exact same problem and it would be great to use something like this at certain breakpoints:

lost-offset: none

I'm using v7.1.0.

[peterramsing]

@codebybrassneck I've been working on some other things for LostGrid but can certainly put some time into this.

[peterramsing]

Sorry you're having this issue. I think there are two issues here: 1 being the important rule and of course the feature for adding an offset. I'm going to label this up and hopefully see if I can get something sorted...I just don't know what the right solution would be here just yet.

[steve-holland]

I really appreciate you looking into this.

I don't know whether this will help or hinder your efforts but I think the reason I came across this issue is at certain breakpoints I needed to center columns one above the other, but then at other breakpoints they needed to be side by side. What I was hoping to do was use something like this:

lost-center: 6/12

That didn't seem to be supported, so instead I used lost-column and lost-offset like this:

lost-column: 6/12
lost-offset: -3/12

(these are contrived examples, so not necessarily what I actually used, but it gives you a flavour of what I was doing/trying)

This meant I had the remnants of the offset which I then needed to cancel out at another breakpoint, hence the enquiry here.

If it's more straightforward, getting support for the centering syntax in the example above, for the width, then maybe just margin-left: auto; margin-right: auto without any !important flags, would certainly remove my need to cancel out the offsetting.

As this looks likely to be an edge case, I'd hate for you to waste a load of time on this, if it would be better spent elsewhere. Also, if there's anything I can help with, please do say. I have a little time in the evenings spare.

[peterramsing]

Hmm. Off the top of my head, lost-center: 6/12 might not be that hard to support. I'll look into that.

Thanks for the additional feedback.

[lifeinchords]

Hi there,

I'm using this syntax which seems to be outputting margin-left: 0 !important, and helping me override offsets from smaller breakpoints

    @include mq(tablet)  { lost-column: 6/12; lost-offset: -3/12;  } 
    @include mq(desktop) { lost-column: 6/12; lost-offset: -6/12;  } 
    @include mq(xl)      { lost-column: 8/12; lost-offset: -0/12; } 

The syntax is a bit awkward, but seems to be the only thing I got working..
I think this would be a really helpful tool, to implement diff designs at different breakpoints.

Thanks!
~s

[peterramsing]

sigh I have a possible solution for this using the lost-offset: none; idea but I keep coming back to the fact that there are !importants cluttering this up...and that I should really work to figure out how to make it so those don't need to be there.

...and if indeed those !importants can indeed be removed would that cause a bunch of issues for present users...

[peterramsing]

Closing this to migrate conversation to the PR: #363