Skip to content
New issue

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

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

overflowing span in susy 3 #659

Open
lemnis opened this issue Sep 28, 2017 · 3 comments
Open

overflowing span in susy 3 #659

lemnis opened this issue Sep 28, 2017 · 3 comments

Comments

@lemnis
Copy link

lemnis commented Sep 28, 2017

Within susy 2 I could use beneath code to make a inner element wider than the parent.

<div>
  <p>Some random content</p>
</div>
$susy: ( columns: 12 );
div{
  @include span(10 nest);
  @include squish(1);
}
p{
  @include span(12 of 10);
  @include pull(1 of 10);
}

I was trying to do the same, but couldn't recreate it logical.

$susy: ( columns: susy-repeat(12) );
div{
  width: span(10);
  margin-left: span(1 wide);
  margin-right: span(1 wide);
}
p{
  margin-left: - span(1 wide of 10);
  width: span(12 of 10);
}

This creates the error on width: span(12 of 10);:

Error: [su-valid-location] There are not enough columns in grid 1 1 1 1 1 1 1 1 1 1 for span 12 at 1.

Using width: span(6 of 10) * 2 + gutter(of 10); would work, but feels a bit hacky. Is there a better method to have a element bigger than it's parent?

@mirisuzanne
Copy link
Member

We could allow this for symmetrical spans again, that shouldn't be a difficult change.

@helmund
Copy link

helmund commented Feb 9, 2018

Is there a timeline for this or should i use the hacky way?

@mirisuzanne
Copy link
Member

I'm not likely to get to it in the next few weeks - unless someone else wants to make a pull request.

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

No branches or pull requests

3 participants