castlecss-docs

{% set currentPageId = 'grid' %}{% set pageTitle = 'Grid - CastleCSS' %}{% include "inc/header.html" %}  <div class="b0_12 b4_14 b4_push_01"> <div class="p p-b3-3x"> <div class="block"> <h1>Breakpoints & Grid</h1> <p class="intro">Easy to use flexbox grid, using the CastleCSS breakpoint system.</p> <h2 id="thebasics">The basics</h2> <p >CastleCSS has a completely fluid and nestable flexbox grid, with 12 to 24 columns, depending on the breakpoint you are viewing. The column widths are predefined as fixed percentages and the gutter widths are variables that can be influenced per breakpoint.</p> <p>To start a new grid in html you first create an element with the <code>g</code> class (which stands for grid).<br /> Only the direct children of this element will function as grid items. </p> <p>This is how you set the item width per breakpoint: <code>b{breakpoint}_{columnwidth}</code></p> <p><strong>For example:</strong> This item <code>div class="b0_12 b3_18"</code> is 12 columns wide from breakpoint 0 and up, and 18 columns wide from breakpoint 3 and up.</p> <p>By default a grid is fluid, but wrapping the <code>g</code> in an element with the class <code>container</code> enables a fixed width per breakpoint.</p> </div> <div class="block"> <h2 id="breakpoints" class="head head2">Breakpoints</h2> <p>Castlecss uses six breakpoints, which are derived from average device resolutions, by default. Up untill breakpoint 3 the grid has 12 columns, but from breakpoint 3 and up it uses 24 columns for extra flexibility. </p> <p>Per breakpoint it's possible to: <ul> <li>Change the breakpoints themselves</li> <li>Set gutter spacing from said breakpoint and up</li> <li>Set the container width</li> </ul> </p> <p><strong>Make these changes in your own variable file</strong> if you want to continue receiving CastleCSS updates.</p> <div class="specs"> <table class="full"> <tr> <th scope="col">Breakpoint</th> <th scope="col">Viewport width</th> <th class="ta-center" scope="col">Device</th> <th scope="col">Class</th> <th scope="col">Gutter</th> <th scope="col">Container width</th> </tr> <tr> <td>$b0</td> <td>0 +</td> <td class="ta-center"><i class="fa fa-2x fa-globe"></td> <td><code>b0_01 t/m 12</code></td> <td>12px</td> <td>100%</td> </tr> <tr> <td>$b1</td> <td>320px +</td> <td class="ta-center"><i class="fa fa-2x fa-mobile"></i></td> <td><code>b1_01 t/m 12</code></td> <td>12px</td> <td>100%</td> </tr> <tr> <td>$b2</td> <td>480px +</td> <td class="ta-center"><i class="fa fa-2x fa-mobile fa-rotate-90"></i></td> <td><code>b2_01 t/m 12</code></td> <td>12px</td> <td>100%</td> </tr> <tr> <td>$b3</td> <td>768px +</td> <td class="ta-center"><i class="fa fa-2x fa-tablet"></i></td> <td><code>b3_01 t/m 24</code></td> <td>12px</td> <td>768px</td> </tr> <tr> <td>$b4</td> <td>1024px +</td> <td class="ta-center"><i class="fa fa-2x fa-tablet fa-rotate-90"></i></td> <td><code>b4_01 t/m 24</code></td> <td>12px</td> <td>1024px</td> </tr> <tr> <td>$b5</td> <td>1280px +</td> <td class="ta-center"><i class="fa fa-2x fa-desktop"></i></td> <td><code>b5_01 t/m 24</code></td> <td>12px</td> <td>1280px</td> </tr> <tr> <td>$b6</td> <td>1600px +</td> <td class="ta-center"><i class="fa fa-2x fa-desktop"></i></td> <td><code>b6_01 t/m 24</code></td> <td>12px</td> <td>1400px</td> </tr> </table> </div> </div> <div id="basicexamples" class="block"> <h2>Basic grid examples</h2> <div class="g"> <div class="b0_12"><div class="demo-block">b0_12</div></div> <div class="b0_06 b3_12"><div class="demo-block">b0_06 b3_12</div></div> <div class="b0_06 b3_12"><div class="demo-block">b0_06 b3_12</div></div> <div class="b0_06 b3_06"><div class="demo-block">b0_06 b3_06</div></div> <div class="b0_06 b3_18"><div class="demo-block">b0_06 b3_18</div></div> <div class="b0_12 b3_06"><div class="demo-block">b0_12 b3_06</div></div> <div class="b0_12 b3_06"><div class="demo-block">b0_12 b3_06</div></div> <div class="b0_12 b3_06"><div class="demo-block">b0_12 b3_06</div></div> <div class="b0_12 b3_06"><div class="demo-block">b0_12 b3_06</div></div> <div class="b0_12 b3_03"><div class="demo-block">b0_12 b3_03</div></div> <div class="b0_12 b3_03"><div class="demo-block">b0_12 b3_03</div></div> <div class="b0_12 b3_03"><div class="demo-block">b0_12 b3_03</div></div> <div class="b0_12 b3_03"><div class="demo-block">b0_12 b3_03</div></div> <div class="b0_12 b3_06"><div class="demo-block">b0_12 b3_06</div></div> <div class="b0_12 b3_06"><div class="demo-block">b0_12 b3_06</div></div> <div><div class="demo-block">auto</div></div> </div> <pre class="brush: xml;"> <div class="g"> <div class="b0_12"></div> <div class="b0_12 b3_12"></div> <div class="b0_12 b3_12"></div> <div class="b0_12 b3_06"></div> <div class="b0_12 b3_18"></div> <div class="b0_12 b3_06"></div> <div class="b0_12 b3_06"></div> <div class="b0_12 b3_06"></div> <div class="b0_12 b3_06"></div> <div class="b0_12 b3_03"></div> <div class="b0_12 b3_03"></div> <div class="b0_12 b3_03"></div> <div class="b0_12 b3_03"></div> <div class="b0_12 b3_06"></div> <div class="b0_12 b3_06"></div> <div>auto</div> </div></pre> </div> <div class="block"> <h3>5 or 7 in a row (breakpoint 3 and up)</h3> <div class="g"> <div class="b3_x5"><div class="demo-block">b3_x5</div></div> <div class="b3_x5"><div class="demo-block">b3_x5</div></div> <div class="b3_x5"><div class="demo-block">b3_x5</div></div> <div class="b3_x5"><div class="demo-block">b3_x5</div></div> <div class="b3_x5"><div class="demo-block">b3_x5</div></div> <div class="b3_x7"><div class="demo-block">b3_x7</div></div> <div class="b3_x7"><div class="demo-block">b3_x7</div></div> <div class="b3_x7"><div class="demo-block">b3_x7</div></div> <div class="b3_x7"><div class="demo-block">b3_x7</div></div> <div class="b3_x7"><div class="demo-block">b3_x7</div></div> <div class="b3_x7"><div class="demo-block">b3_x7</div></div> <div class="b3_x7"><div class="demo-block">b3_x7</div></div> </div> <p>Even though 5 and 7 aren't sharable through a grid of 12 or 24, you might still want to be able to do this. That's why you can use the classes <code>x5</code> en <code>x7</code> on a grid item (breakpoint 3+) </p> <pre class="brush: xml;"> <div class="g"> <div class="b3_x5"></div> <div class="b3_x5"></div> <div class="b3_x5"></div> <div class="b3_x5"></div> <div class="b3_x5"></div> <div class="b3_x7"></div> <div class="b3_x7"></div> <div class="b3_x7"></div> <div class="b3_x7"></div> <div class="b3_x7"></div> <div class="b3_x7"></div> <div class="b3_x7"></div> </div></pre> </div> <div class="block"> <h3 class="head head3">Nested grids</h3> <p>Nesting is easy. Just place a <code>g</code> inside a grid item. <div class="alert"> Note: the only thing that's not possible is a <code>g</code> as a direct child of a <code>g</code> </div> </p> <h4>Example of nested <grids></grids></h4> <div class="demo-block"> <p>group 1/1</p> <div class="g"> <div class="b0_12"> <div class="g"> <div class="b0_12 b3_12"> <div class="demo-block"> <p>group 1/2</p> <div class="g"> <div class="b0_06"> <div class="demo-block">1/2</div> </div> <div class="b0_06"> <div class="demo-block">1/2</div> </div> </div> </div> </div> <div class="b0_12 b3_12"> <div class="demo-block"> <p>group 1/2</p> <div class="g"> <div class="b0_06"> <div class="demo-block">1/2</div> </div> <div class="b0_06"> <div class="demo-block">1/2</div> </div> </div> </div> </div> </div> </div> </div> </div> <pre class="brush: xml;"> <div class="g"> <div class="b0_12"> <div class="g"> <div class="b0_12 b3_12"> <div class="g"> <div class="b0_06"></div> <div class="b0_06"></div> </div> </div> <div class="b0_12 b3_12"> <div class="g"> <div class="b0_06"></div> <div class="b0_06"></div> </div> </div> </div> </div> </div></pre> </div> <div id="order" class="block"> <h2>Order</h2> <p>You can switch the order of items by applying the class <code>order-{order}</code>.</p> <table class="specs"> <tr> <th>Class</th> <th>Value</th> </tr> <tr> <td>order-[0-12]</td> <td>order: 0-12;</td> </tr> </table> </div> <div id="gutters" class="block"> <h2>Gutters</h2> <p>The gutter is adjustable per breakpoint. For example; you can set a default gutter of 12px wide and a gutter of 30px wide at breakpoint 3. You can also use <code>gutter-large</code> or <code>gutter-small</code> if you want to use multiple gutter widths.</p> <p>Default: <code>padding-left: $grid-gutter</code></p> <div class="specs"> <table> <tr> <th>Breakpoint</th> <th>Extra class</th> <th>Gutter</th> <th>CastleCSS Default</th> </tr> <tr> <td>$b0</td> <td> </td> <td>$grid-gutter</td> <td>12px</td> </tr> <tr> <td>$b1</td> <td> </td> <td>$grid-gutter-b1</td> <td>12px</td> </tr> <tr> <td>$b2</td> <td> </td> <td>$grid-gutter-b2</td> <td>12px</td> </tr> <tr> <td>$b3</td> <td> </td> <td>$grid-gutter-b3</td> <td>12px</td> </tr> <tr> <td>$b4</td> <td> </td> <td>$grid-gutter-b4</td> <td>12px</td> </tr> <tr> <td>$b5</td> <td> </td> <td>$grid-gutter-b5</td> <td>12px</td> </tr> <tr> <td>$b6</td> <td> </td> <td>$grid-gutter-b6</td> <td>12px</td> </tr> <tr> <td>all</td> <td><code>gutter-small</code></td> <td>$grid-gutter/2</td> <td>6px</td> </tr> <tr> <td>all</td> <td><code>gutter-large</code></td> <td>$grid-gutter*2</td> <td>24px</td> </tr> <tr> <td>all</td> <td><code>gutter-none</code></td> <td>0</td> <td>0</td> </tr> </table> </div> <h3>Gutter examples</h3> <div class="g"> <div class="gi b0_12 b3_12"> <strong>Default gutter</strong> <div class="g"> <div class="b0_06"><div class="demo-block"> </div></div> <div class="b0_06"><div class="demo-block"> </div></div> </div> <pre class="brush: xml;"> <div class="g"> <div class="b0_06"></div> <div class="b0_06"></div> </div></pre> </div> <div class="gi b0_12 b3_12"> <strong>Large gutter</strong> <div class="g gutter-large"> <div class="b0_06"><div class="demo-block"> </div></div> <div class="b0_06"><div class="demo-block"> </div></div> </div> <pre class="brush: xml;"> <div class="g gutter-large"> <div class="b0_06"></div> <div class="b0_06"></div> </div></pre> </div> <div class="gi b0_12 b3_12"> <strong>Small gutter</strong> <div class="g gutter-small"> <div class="b0_06"><div class="demo-block"> </div></div> <div class="b0_06"><div class="demo-block"> </div></div> </div> <pre class="brush: xml;"> <div class="g gutter-small"> <div class="b0_06"></div> <div class="b0_06"></div> </div></pre> </div> <div class="gi b0_12 b3_12"> <strong>No gutter</strong> <div class="g gutter-none"> <div class="b0_06"><div class="demo-block"> </div></div> <div class="b0_06"><div class="demo-block"> </div></div> </div> <pre class="brush: xml;"> <div class="g gutter-none"> <div class="b0_06"></div> <div class="b0_06"></div> </div></pre> </div> </div> </div> <div id="directionalignment" class="block"> <h2>Direction and alignment</h2> <div class="block"> <h3 class="head head3">Flex direction</h3> <p>With the class <code>dir-{direction}</code> placed on a <code>g</code> you can adjust the <strong>main-axis</strong>, thus defining the direction flex items are placed in the flex container. </p> <p>This affects justify-content, align-items and align-self.</p> <p>Default: <code>flex-direction: row;</code></p> <table> <tr> <th>Class</th> <th>Value</th> </tr> <tr> <td><code>dir-row</code></td> <td>flex-direction: row;</td> </tr> <tr> <td><code>dir-row-reverse</code></td> <td>flex-direction: row-reverse;</td> </tr> <tr> <td><code>dir-column</code></td> <td>flex-direction: column;</td> </tr> <tr> <td><code>dir-column-reverse</code></td> <td>flex-direction: column-reverse;</td> </tr> </table> <h4>Examples</h4> <div class="g"> <div class="b0_12 b3_12"></div> </div> <div class="g auto dir-row-reverse"> <div class="b0_01"><div class="demo-block">1</div></div> <div class="b0_01"><div class="demo-block">2</div></div> <div class="b0_01"><div class="demo-block">3</div></div> <div class="b0_01"><div class="demo-block">4</div></div> <div class="b0_01"><div class="demo-block">5</div></div> </div> <pre class="brush: xml;"> <div class="g dir-row-reverse"> <div class="b0_01"></div> <div class="b0_01"></div> <div class="b0_01"></div> <div class="b0_01"></div> <div class="b0_01"></div> </div></pre> <div class="g dir-column"> <div class="b0_01"><div class="demo-block">1</div></div> <div class="b0_01"><div class="demo-block">2</div></div> <div class="b0_01"><div class="demo-block">3</div></div> <div class="b0_01"><div class="demo-block">4</div></div> <div class="b0_01"><div class="demo-block">5</div></div> </div> <pre class="brush: xml;"> <div class="g dir-column"> <div class="b0_01"></div> <div class="b0_01"></div> <div class="b0_01"></div> <div class="b0_01"></div> <div class="b0_01"></div> </div></pre> </div> <div class="block"> <h3 class="head head3">Justify content</h3> <p>With the <code>jc-</code> class as addition for <code>g</code> it's possible to align items on the <strong>primaire</strong> axis.</p> <div class="specs"> <table> <tr> <th>Class</th> <th>Value</th> </tr> <tr> <td><code>jc-flex-start</code></td> <td>justify-content: flex-start;</td> </tr> <tr> <td><code>jc-flex-end</code></td> <td>justify-content: flex-end;</td> </tr> <tr> <td><code>jc-center</code></td> <td>justify-content: center;</td> </tr> <tr> <td><code>jc-space-around</code></td> <td>justify-content: space-around;</td> </tr> <tr> <td><code>jc-space-between</code></td> <td>justify-content: space-between;</td> </tr> </table> </div> <div class="g jc-center"> <div class="b0_01"><div class="demo-block">1</div></div> <div class="b0_01"><div class="demo-block">2</div></div> <div class="b0_01"><div class="demo-block">3</div></div> <div class="b0_01"><div class="demo-block">4</div></div> <div class="b0_01"><div class="demo-block">5</div></div> </div> <pre class="brush: xml;"> <div class="g jc-center"> <div class="b0_01"></div> <div class="b0_01"></div> <div class="b0_01"></div> <div class="b0_01"></div> <div class="b0_01"></div> </div></pre> </div> <div class="block"> <h3 class="head head3">Auto fill grid</h3> <p>It's possible to let the grid figure out the widths for itself. When you don't know what the width will be but you want the grid to fill out, the <code>auto</code> class is a nice addition to the grid (<code>g</code>). <div> <strong>Example</strong> </div> <div class="g auto"> <div><div class="demo-block">Grid item</div></div> <div><div class="demo-block">Grid item</div></div> <div><div class="demo-block">Grid item</div></div> <div><div class="demo-block">Grid item</div></div> <div><div class="demo-block">Grid item</div></div> <div><div class="demo-block">Long grid item</div></div> <div><div class="demo-block">Grid item</div></div> <div><div class="demo-block">Grid item</div></div> <div><div class="demo-block">Long grid item</div></div> <div><div class="demo-block">A most super duper long, longer, longest grid item</div></div> <div><div class="demo-block">Grid item</div></div> <div><div class="demo-block">Grid item</div></div> <div><div class="demo-block">Grid item</div></div> <div><div class="demo-block">Grid item</div></div> </div> <pre class="brush: xml;"> <div class="g auto"> <div></div> <div></div> <div></div> <div></div> <div></div> </div></pre> </div> <div class="block"> <h3 class="head head3">Flex wrap</h3> <p>Add the class <code>wrap</code> or <code>nowrap</code> to a <code>g</code> element to overwrite flex wrapping.</p> <p>Default: <code>flex-direction: wrap;</code></p> <table class="specs"> <tr> <th>Class</th> <th>Value</th> </tr> <tr> <td><code>wrap</code></td> <td>flex-wrap: wrap;</td> </tr> <tr> <td><code>nowrap</code></td> <td>flex-wrap: nowrap;</td> </tr> </table> <h5>Example with wrapping</h5> <div class="g"> <div class="b0_06"><div class="demo-block">1/2</div></div> <div class="b0_06"><div class="demo-block">1/2</div></div> <div class="b0_06"><div class="demo-block">1/2</div></div> <div class="b0_06"><div class="demo-block">1/2</div></div> <div class="b0_06"><div class="demo-block">1/2</div></div> </div> <pre class="brush: xml;"> <div class="g"> <div class="b0_06">I should be 1/2</div> <div class="b0_06">I should be 1/2</div> <div class="b0_06">I should be 1/2</div> <div class="b0_06">I should be 1/2</div> <div class="b0_06">I should be 1/2</div> </div></pre> <h5>Example without wrapping</h5> <div class="g nowrap"> <div class="b0_06"><div class="demo-block">I should be 1/2</div></div> <div class="b0_06"><div class="demo-block">I should be 1/2</div></div> <div class="b0_06"><div class="demo-block">I should be 1/2</div></div> <div class="b0_06"><div class="demo-block">I should be 1/2</div></div> <div class="b0_06"><div class="demo-block">I should be 1/2</div></div> </div> <pre class="brush: xml;"> <div class="g nowrap"> <div class="b0_06"></div> <div class="b0_06"></div> <div class="b0_06"></div> <div class="b0_06"></div> <div class="b0_06"></div> </div></pre> <div class="alert"> * When you use <code>nowrap</code> in IE10 the grid items won't stay withing the container. We don't recommend using this option if you need to support IE10. </div> </div> <h3>Align self</h3> <p>With the <code>as-</code> class addition to the direct child of <code>g</code> class you can align grid items vertically to the <strong>secondary axis</strong> of the grid.</p> <div class="specs"> <table> <tr> <th>Class</th> <th>Value</th> </tr> <tr> <td>as-flex-start</td> <td>align-self: flex-start;</td> </tr> <tr> <td>as-flex-end</td> <td>align-self: flex-end;</td> </tr> <tr> <td>as-stretch</td> <td>align-self: stretch;</td> </tr> <tr> <td>as-center</td> <td>align-self: center;</td> </tr> <tr> <td>as-baseline</td> <td>align-self: baseline;</td> </tr> <tr> <td>as-initial</td> <td>align-self: initial;</td> </tr> <tr> <td>as-inherit</td> <td>align-self: inherit;</td> </tr> </table> </div> <h5>Example</h5> <div class="g"> <div class="b0_01"><div class="demo-block">1<br /> </div></div> <div class="b0_01"><div class="demo-block">2<br /> </div></div> <div class="as-center b0_01"><div class="demo-block"> </div></div> <div class="b0_01"><div class="demo-block">4<br /> </div></div> <div class="b0_01"><div class="demo-block">5<br /> </div></div> <pre class="brush: xml;"> <div class="g"> <div class="b0_01"></div> <div class="as-center b0_01"></div> <div class="b0_01"></div> <div class="b0_01"></div> <div class="b0_01"></div> </div></pre> </div> </div> <div class="block"> <h3>Grid pushing</h3> <p>You can "push" grid-items across the grid with push classes: <code>{breakpoint}-push-</code> classes.</p> <p><strong>Example:</strong> <code>b3_push_01</code> (push 1 column from breakpoint 3 and up.</p> <div class="specs"> <table> <tr> <td>b{breakpoint}-push[1-12]</td> <td>Push column 1-12</td> </tr> <tr> <td>b{breakpoint}-push[1-24]</td> <td>Push column 1-24 breakpoint 3+</td> </tr> </table> </div> <h4>Push examples</h4> <div class="g"> <div class="b0_03"><div class="demo-block"> </div></div> <div class="b0_03 b0_push_03"><div class="demo-block">b0_push_03</div></div> <div class="b0_03"><div class="demo-block"> </div></div> </div> <pre class="brush: xml;"> <div class="g"> <div class="b0_03"></div> <div class="b0_03 b0_push_03"></div> <div class="b0_03"></div> </div></pre> <div class="g"> <div class="b0_12 b3_06 b3_push_12"><div class="demo-block">b3_push_12</div></div> <div class="b0_12 b3_06"><div class="demo-block"> </div></div> </div> <pre class="brush: xml;"> <div class="g"> <div class="b0_12 b3_06 b3_push_12"></div> <div class="b0_12 b3_06"></div> </div></pre> </div> </div> </div>  {% include "inc/footer.html" %}