Inline-block and white space in the grid

[scottmontminy]

I hope to raise this as a new issue for clarity sake, but my apologies upfront because I know this has been discussed all over the place related to inuit.css here and here and elsewhere.

In regards to using inline-block for the grid system, do we suspect that the solution of commenting the whitespace between grid elements is the long-term solution for inuit.css?

The commenting solution is no doubt a robust solution (or removing the whitespace altogether). No argument there and I'm thankful for the solution because using inline-block for grid elements is simply awesome.

However, the commenting solution does make our grid dependent on HTML formatting - which although semantically valid seems like it will present it's fair share of challenges when working with a team of developers and/or using the grid on repeating regions generated from a database. Basically, I'm reluctant to use the grid system with this dependency on a production site if this is the long-term solution.

Again, sorry for the redundancy. Amidst all the issue threads I can find on this topic, I'm a little confused about the short-term vs. long-term ramifications. Thanks.

[kevva]

Instead of commenting out white-space you could try using another method by extending the grid in your application specific stylesheet like this:

.grid {
  letter-spacing: -0.31em;
}

/* Opera hack */
.opera:-o-prefocus,
.grid {
  word-spacing: -0.43em;
}

.grid__item {
  letter-spacing: normal;
  word-spacing: normal;
}

[csswizardry]

This will be in place until a more robust solution presents itself, which it so far hasn’t, so I can (with all confidence) say that this solution could well be around forever.

I was always wary of the [letter|word]-spacing hack, and that proved to be problematic. The most robust method is to just have no whitespace (which make sense, as it’s whitespace that causes the issue in the first place).

At work we regularly generate grids from loops and stuff, and you can write your loops in such a way that your comments will take out the whitespace. Also, in teams, people will know something is awry when their grid breaks, and (I would hope) and developer worth their salt will go and find a grid that does work and reverse engineer their solution based on that (or, y’know, speak to someone on the team).

I’m afraid that, although inuit.css is suited to big projects where you might have a big team, it can’t take responsibility for how that team communicates any details of a project.

[scottmontminy]

Thanks guys. Both responses are helpful.

@csswizardry I was hoping to be able to hold your framework accountable for our boneheaded mistakes with formatting. =) Just kidding of course. Many thanks for all the good work on the framework.

Your advice rings true. I figured we'd just fix the white space issues if they arise. We can surely add the HTML formatting style to our process. And we'll definitely experiment with the extension from @kevva (thanks).

[csswizardry]

Don’t mention it!

I’m sorry there isn’t a better solution to this problem, but I guess it’s the price you gotta pay :( If a (decent) solution does pop up though, I’ll be sure to implement it :D

H

[kevva]

Out of curiosity, what is it that you don't like about the letter-spacing solution? It's the least "hacky" one in my opinion.

[RowboTony]

Hi, I use Inuit.css with several CMS frameworks, and this issue is causing all of them to misbehave, watching this issue with great interest for a better/alternative solution. Thank you.

[Anderson-Juhasc]

I think having to use a bad comment in order to use this grid to "inline-block"...

[scottmontminy]

@kevva I've been working with your css fix noted above, and it is testing out fine in all the major browsers.

We've tested:

• IE (8, 9)
• Chrome (25, 26, +Android)
• Firefox (19)
• Safari (6, +Safari)
• Opera (12).

We're feeling pretty good about using it, but I figured I'd check in with you too see if you're seeing any issues.

[kevva]

There shouldn't be any issues as far as I know.

[csswizardry]

If this does work then I might add a $use-markup-grid-fix var to choose between the bulletproof markup method or this bulletproof-so-far one :)

[andykirk]

I've been using it with no problems too.

+1 for the var.

[scottmontminy]

Somehow I'd feel better about it being in the core as an option =), so +1 for the variable choice. Thanks guys.

[csswizardry]

Coolness :D