I'm about to update http://getcrow.eu and have one "issue" to solve that would make the framework everything I always wanted it to be.
Important to know:
Crow does not use tables, absolute positioning, floats or clearfix'es and it should stay that way.
We know that putting inline-blocks next to each other like so:
<div class="parent">
<div>Block 1</div>
<div>Block 2</div>
<div>Block 3</div>
</div>
with CSS:
.parent {
> div {
display: inline-block;
}
}
Creates white-spaces between the blocks. We also know there's a handful of solutions to prevent the white-spaces from creating space, which is highly required if creating a grid framework with this method.
Beneath I list the methods that I'm aware of and why I don't want to/can't use them:
(SKIP IF YOU WANT TO GET TO THE QUESTION)
Comments in the HTML inbetween children div's. No-go because: it creates ugly HTML that the developer, using crow, must be aware of and work with.
Breaking lines at the end of children tags/ not using closing tags. No-go because: same as above
Using minus (-) margins on .parent-wrapper. No-go because: specified margins depends on document font size which mean the grid could break in responsive markup where html { font-size:{X}px; } changes.
Setting 0px font-size to .parent and "reset" the font size on children (this is the method I'm currently using). No-go because: I don't want the developer using crow to force-set the children. I just want the inheritance to be natural without a grid that's setting the font size downwards for me.
Using Javascript to remove all white-spaces from .crow elements. No-go because: I want the framework to be pure CSS and no js. This could also "flick" the DOM after pageload if user has bad connection.
Loading a font with font-family on .parent that has no white spaces. No-go because: loading in an extra font just to get the grid framework is just wrong. Especially as you have to download extra files (font-files) and declare fallbacks for all browsers.
Using letter-spacing -{X}px on .parent. No-go because: same as .3 (see above)
Using flex box. No-go because: the framework focuses on vertical centering (if desired) and flex box lives it own life when it comes to that. I'm also making sure the grid is supporting IE8 which it does today.
So basically I'm searching for a - unknown/not yet discovered/way that I'm not aware of - for removing white spaces in between inline-blocks. I want it to be pure CSS. If you have a method that you know of/think would work - I can try it on different browsers.
Resolving this would surely make Crow the best grid framework. I'm already using it for various websites and I can tell that the possibilites are many when given the ability to easily position elements center vertically.
Sidenote:
Marking up the DOM like so: <div class="parent"><div>Block 1</div><div>Block 2</div></div> does the job just like I want it to. But that would require the developer using Crow to mark it up that way. And I don't want to rely on a framework creating that HTML.
