Crispin & Mulberry Styleguide

5 - Grid

Used to separate content.

This is a point of contention because a base-10 grid would work great; But in order to get pixel perfection of the PSD, we need this fine granularity.

We use a float-based grid because inline-block has problems with white-space which can be mitigated with font-size: 0; line-height: 0; but then requires you to override again to set the font-size back to something useful for the children.

5.1 - Grid 50's

Fifty's grid. The grid can be used anywhere but it was coded for use in the .main-section and .main-section-body.

Ignore the .sg-grid-sandbox wrapping div. This is only for showing of fthe grid in the styleguide.

10
40
13
37
15
15
30
20
30
10
20
20
5
5
5
5
5
5
5
5
5
5
<div class="sg-grid-sandbox">
	<div class="grid">
		<div class="grid-item-10-50"><div class="sg-grid-item-fill">10</div></div>
		<div class="grid-item-40-50"><div class="sg-grid-item-fill">40</div></div>
	</div>
	<div class="grid">
		<div class="grid-item-13-50"><div class="sg-grid-item-fill">13</div></div>
		<div class="grid-item-37-50"><div class="sg-grid-item-fill">37</div></div>
	</div>
	<div class="grid">
		<div class="grid-item-15-50"><div class="sg-grid-item-fill">15</div></div>
		<div class="grid-item-15-50"><div class="sg-grid-item-fill">15</div></div>
		<div class="grid-item-20-50"><div class="sg-grid-item-fill">30</div></div>
	</div>
	<div class="grid">
		<div class="grid-item-20-50"><div class="sg-grid-item-fill">20</div></div>
		<div class="grid-item-30-50"><div class="sg-grid-item-fill">30</div></div>
	</div>
	<div class="grid">
		<div class="grid-item-10-50"><div class="sg-grid-item-fill">10</div></div>
		<div class="grid-item-20-50"><div class="sg-grid-item-fill">20</div></div>
		<div class="grid-item-20-50"><div class="sg-grid-item-fill">20</div></div>
	</div>
	<div class="grid">
		<div class="grid-item-5-50"><div class="sg-grid-item-fill">5</div></div>
		<div class="grid-item-5-50"><div class="sg-grid-item-fill">5</div></div>
		<div class="grid-item-5-50"><div class="sg-grid-item-fill">5</div></div>
		<div class="grid-item-5-50"><div class="sg-grid-item-fill">5</div></div>
		<div class="grid-item-5-50"><div class="sg-grid-item-fill">5</div></div>
		<div class="grid-item-5-50"><div class="sg-grid-item-fill">5</div></div>
		<div class="grid-item-5-50"><div class="sg-grid-item-fill">5</div></div>
		<div class="grid-item-5-50"><div class="sg-grid-item-fill">5</div></div>
		<div class="grid-item-5-50"><div class="sg-grid-item-fill">5</div></div>
		<div class="grid-item-5-50"><div class="sg-grid-item-fill">5</div></div>
	</div>
</div>

5.1.1 - Grid 50's with Spacing

Add an inner .grid-item-inner div to get some spacing between items/cells. The whole grid system markup could be simpler(no inner element) if the old IE's supported box-sizing: border-box;

13
37
10
20
20
<div class="sg-grid-sandbox">
	<div class="grid">
		<div class="grid-item-13-50"><div class="grid-item-inner"><div class="sg-grid-item-fill">13</div></div></div>
		<div class="grid-item-37-50"><div class="grid-item-inner"><div class="sg-grid-item-fill">37</div></div></div>
	</div>
	<div class="grid">
		<div class="grid-item-10-50"><div class="grid-item-inner"><div class="sg-grid-item-fill">10</div></div></div>
		<div class="grid-item-20-50"><div class="grid-item-inner"><div class="sg-grid-item-fill">20</div></div></div>
		<div class="grid-item-20-50"><div class="grid-item-inner"><div class="sg-grid-item-fill">20</div></div></div>
	</div>
</div>
Made with gulp-kss-styleguide