Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Fixed columns that respect the grid, not viewport. #70

msisto opened this Issue Mar 28, 2013 · 3 comments


None yet
2 participants

msisto commented Mar 28, 2013

It would be really great if there was a way for grid elements with position: fixed to respect the grid rather than the viewport.

For example:

.foo {
  @include span-columns(4);
  @include position(fixed, 0px 0 0px 0);

.bar {
 @include span-columns(8);
 @include shift(4);

Where .foo's width would not change when fixed.

The app I'm working on sets $max-width: 100%, so it conveniently works, but it would be nice to do this on non-fullscreen apps.

Edit: I see that there is no built in way to do this (#62), but unlike that issue, I'm not interested in mixing % and px.

kaishin commented Apr 4, 2013

I'm having trouble envisioning what you are trying to do. What would be the CSS output of the SCSS snippet you pasted above?

msisto commented Apr 4, 2013

Here's a diagram. Hope it's clear.

Like I said, it just so happens that this project wound up being full-width so it worked out (see: Figure C) since $max-width and viewport width are equal. Basically, I'm wondering if there could be a way for .foo in Figure B to be the same size as it is in Figure A while still being fixed.

Something like @include span-columns(fixed, 0px 0 0px 0); would be sweet, but I'm not sure how it would be accomplished.

Screen Shot 2013-04-04 at 4 39 15 PM
Screen Shot 2013-04-04 at 4 39 22 PM
Screen Shot 2013-04-04 at 4 39 28 PM

kaishin commented Apr 4, 2013

@msisto I see what you mean. Unfortunately there is no way around that. Position fixed is meant to be relative to the viewport in the CSS spec.

@kaishin kaishin closed this Apr 4, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment