Strange Grid Comments Undocumented

[marcwiest]

Could someone explain the strange comments between grid__item tags? In my case, they seem to be required.

   <div class="grid__item  one-third">
       <p>One third grid</p>
   </div><!--

--><div class="grid__item  two-thirds">
       <p>Two thirds grid</p>
   </div>

[csswizardry]

These do need documenting, yes. Because the grid system uses display:inline-block; you need to remove the whitespace from between the grid items :)

[marcwiest]

Thanks, I didn't know inline-block can cause that kind of problem. I just did a quick search and found this http://css-tricks.com/fighting-the-space-between-inline-block-elements/

[csswizardry]

The grid system used to use a non-markup fix, but that had issues:

csswizardry/csswizardry-grids@744d4b2

[marcwiest]

I see. The current solution is seems to be the most fitting. Any idea at what point this doesn't need to be accounted for anymore?

[csswizardry]

It will always need to be accounted for; whitespace between inline-block elements should exist, only we don’t want it to in this case.

[marcwiest]

Why did you opt. for inline-block? Wouldn't it be better to use display: block; float: left; instead?

[csswizardry]

inline-block allows for greater control through vertical alignment as well as manipulation with text-align :)

[marcwiest]

How do you feel about making inline-block optional via a variable?

[csswizardry]

I wouldn’t do it, there would be too much overhead maintaining two types of grid system and the benefits of inline-block far outweight the downsides.

[bvdputte]

Harry, will this fix be added to inuit?
#170 (comment)
That way people can opt to choose using $use-markup-grid-fix or not...
If a better fix appears (from YUI or something) you can simply use that fix without changing the $use-markup-grid-fix var...

[kevva]

@bvdputte, I've done some extensive testing (see suitcss/components-button-group#2 and #107) and didn't find a better solution. I feel that this solution is pretty solid though.

[KingScooty]

Aahh, this is frustrating. Started a node project earlier today and was really looking forward to using inuit 5.0 on it. Commenting out the whitespace is such a deal breaker :( Unless i completely uglify the source by compressing all the HTML, i simply can't avoid the whitespace in the nicely formatted markup - commenting the whitespace in jade is beyond a ballache.

I get that using inline-block is appealing in order to use text-align etc. But i've never applied cosmetic styles to grid elements/wrappers anyway, only their children. So i find the switch from display: block; float:left; to display: inline-block; in inuit 5.0 a little frustrating :/

I'm hoping i can get away with overriding .grid__item on this project by simply adding the following after the inclusion of inuit without any repercussions:

.grid__item {
    float: left;
    display: block;
}

Although i have a feeling it'll affect something further down the line...

[kevva]

@KingScooty, #170 (comment).

[euantorano]

Just want to add a +1 for documenting this. Been using inuit for a while (old versions). Just today started a new project on the new version and I was stumped till I found this issue and added the comments.

[aniketpant]

Finally someone created an issue for this. Even I was struck by the same problem like most of you because of the white-space problem. And then I looked around the web a lot to solve the issue but I couldn't help but notice that @csswizardry had added html comments in the example. On doing that I was able to fix the breaking layout in most places except for one.

This issue should definitely be documented in _grids.scss