Element that behaves both as grid and grid__item
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!!!!!
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;
}