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

Element that behaves both as grid and grid__item #48

Open
twissell opened this issue Nov 23, 2013 · 1 comment
Open

Element that behaves both as grid and grid__item #48

twissell opened this issue Nov 23, 2013 · 1 comment

Comments

@twissell
Copy link

First of all say that i don't know if this is the proper usage of grid and grid__items, but i did it in that way because you can avoid unnecessary html tags. To illustrate the problem i make a fiddle with the markup http://jsfiddle.net/Pitxon/qzn9t/.

The first div inside body is aligned center as normal but the children of the div that is both a grid__item and a grid doesn't align center, the parent of that two divs is getting the text-align: left property from his parent, the body element throught the > selector although it has the class grid--center, so i feel that the div should take the property value text-align: center instead of left.

As a quick fix i added !important to the following part of the library:

#{$class-type}grid--center{

text-align:center !important;

   > #{$class-type}grid__item{
    text-align:left;
}
}

The thing is if this is a proper way of do this kind of thing or maybe i should go with an
extra div as grid grid--center?

thx for this awesome grid system!!!!!

@Cleecanth
Copy link

If I understand the question, I believe this would work.

#{$class-type}grid--item{
  @extend #{$class-type}grid;
  @extend #{$class-type}grid--center;
  margin-left: 0;
}

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

No branches or pull requests

2 participants