peterramsing / lost

LostGrid is a powerful grid system built in PostCSS that works with any preprocessor and even vanilla CSS.

Home Page:http://lostgrid.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Move and Offset errors

sidonaldson opened this issue · comments

Is this a feature request or a bug report?

Bug

What is the current behavior?

Using offset or move the result is slightly out the bigger the amount, possibly rounding issue.

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

http://codepen.io/sidonaldson/pen/NdyZjJ - first span is move, second with offset

What is the behavior that you expect?

I would expect them to line-up to the background grid

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

Helping my favourite CSS Grid

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

I'm using latest locally, but I believe codepen has an older version

Anything else?

Love your work!

Yeah, Codepen isn't the latest version but that certainly doesn't mean there isn't an issue here. Let me bring your code locally either tonight or Saturday and see if I can pin-point the issue. Thanks for letting me know.

From my initial pokes it looks as though some values are being converted from REM to PX, while the others aren't. see width and left below. (changing 30px to 1rem fixes it)

Update: or that 30px may be hardcoded?

Update2: adding @lost gutter 1rem; fixes it. Have I just misunderstood something?

.one span {
    width: calc(99.9% * 2/12 - (1rem - 1rem * 2/12));
    position: relative;
    left: calc(99.9% * 8/12 - (30px - 30px * 8/12) + 30px);
}

The 30px is indeed hard coded. You will want to override the global gutter of 30px just as you did in your last comment.

I'll look into the docs and see if there is a way to make some of those things more clear. The offset could possibly match the gutter of the selector but that starts to feel a bit "magical" to me.

I'm going to close this issue but please feel free to add comments to it still on how to improve this!

Thanks!

@peterramsing I suspected so once I have dug into the code. Apologies for the false alarm!