@getbase/base

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Base Styleguide</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="core.css"> <link rel="stylesheet" href="code.css"> <link rel="stylesheet" href="forms.css"> <link rel="stylesheet" href="tables.css"> <link rel="stylesheet" href="typography.css"> <link rel="stylesheet" href="headings.css"> <style> .header { background: #ffeb3b; } .logo { text-decoration: none; margin: 0; cursor: pointer; transition: .3s all; } .logo:hover, .logo:focus { opacity: .8; } .navigation { list-style: none; margin: 0; } .navigation-link, .logo { color: #010101; } .navigation-link:hover, .navigation-link:focus { text-decoration: none; } .card { border: 1px solid #eee; } .table-responsive { overflow-x: auto; } </style> <link rel="stylesheet" href="containers.css"> <link rel="stylesheet" href="grid.css"> <link rel="stylesheet" href="horizontal-spacers.css"> <link rel="stylesheet" href="vertical-spacers.css"> <link rel="stylesheet" href="spacers.css"> <link rel="stylesheet" href="display-helpers.css"> <link rel="stylesheet" href="flex-helpers.css"> <link rel="stylesheet" href="position-helpers.css"> <link rel="stylesheet" href="typography-helpers.css"> </head> <body> <div class="header padding-top-0-5rem padding-bottom-0-5rem"> <div class="container"> <div class="padding-top-1rem padding-bottom-1rem"> <h1 class="logo h4 flex flex-align-items-center"> <img class="block" src="logo.svg" alt="Base"> <span class="block padding-left-1rem"> <span class="sr">Base </span> <span>Styleguide</span> </span> </h1> <div class="padding-top-1rem"> <ul class="navigation small flex-l padding-0"> <li class="padding-right-1rem-m"> <a class="navigation-link" href="#typography">Typography</a> </li> <li class="padding-right-1rem-m"> <a class="navigation-link" href="#headings">Headings</a> </li> <li class="padding-right-1rem-m"> <a class="navigation-link" href="#typography-helpers">Typography Helpers</a> </li> <li class="padding-right-1rem-m"> <a class="navigation-link" href="#tables">Tables</a> </li> <li class="padding-right-1rem-m"> <a class="navigation-link" href="#forms">Forms</a> </li> <li class="padding-right-1rem-m"> <a class="navigation-link" href="#containers">Containers</a> </li> <li class="padding-right-1rem-m"> <a class="navigation-link" href="#grid">Grid</a> </li> <li class="padding-right-1rem-m"> <a class="navigation-link" href="#horizontal-spacers">Horizontal Spacers</a> </li> <li class="padding-right-1rem-m"> <a class="navigation-link" href="#vertical-spacers">Vertical Spacers</a> </li> <li class="padding-right-1rem-m"> <a class="navigation-link" href="#spacers">Spacers</a> </li> </ul> </div> </div> </div> </div> <div id="typography" class="padding-top-2rem"> <div class="container"> <h2>Typography</h2> <div class="row"> <div class="col-12"> <div class="card"> <div class="flex flex-align-items-center flex-space-between padding-1rem"> <strong class="h1">Sans Serif</strong> <span class="h1 block">Aa <small class="h6">Regular</small></span> <strong class="h1 block">Aa <small class="h6 font-400">Bold</small></strong> </div> <div style="border-bottom: 1px solid #eee; border-top: 1px solid #eee;"> <code class="block small padding-1rem">base-font-family: sans-serif<br>base-font-size: 16px<br>base-line-height: 22px<br>base-font-color: #333<br>base-font-weight: 400<br>base-background-color: #fff</code> </div> <div class="padding-1rem"> <h3>Body & Elements</h3> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> <div class="padding-top-1rem padding-bottom-1rem"> <blockquote> <p> This is a blockquote in all its awesomeness and this text can be from a famous author / poet / artist </p> <cite>Unknown author</cite> </blockquote> </div> <p> The <a href="#">a element</a> example<br> The <abbr>abbr element</abbr> and <abbr title="Title text">abbr element with title</abbr> examples<br> The <b>b element</b> example<br> The <strong>strong element</strong> example<br> The <cite>cite element</cite> example<br> The <code>code element</code> example<br> The <del>del element</del> example<br> The <dfn>dfn element</dfn> and <dfn title="Title text">dfn element with title</dfn> examples<br> The <em>em element</em> example<br> The <i>i element</i> example<br> The <ins>ins element</ins> example<br> The <kbd>kbd element</kbd> example<br> The <mark>mark element</mark> example<br> The <q>q element <q>inside</q> a q element</q> example<br> The <s>s element</s> example<br> The <samp>samp element</samp> example<br> The <small>small element</small> example<br> The <span>span element</span> example<br> The <sub>sub element</sub> example<br> The <sup>sup element</sup> example<br> The <u>u element</u> example<br> The <var>var element</var> example </p> <address>Address: this is an example of how the address element looks</address> <pre> <pre> html </pre></pre> <p> Below is a Horizontal Rule </p> <hr> </div> </div> </div> </div> </div> </div> <div id="headings" class="padding-top-2rem"> <div class="container"> <h2>Headings</h2> <div class="row"> <div class="col-12 padding-bottom-1rem"> <div class="card"> <div class="padding-0-5rem"> <strong class="h1">All Headings</strong> <code class="block small padding-top-0-5rem">base-heading-font-family: sans-serif</code> </div> </div> </div> <div class="col-12 padding-bottom-1rem col-1-2-m"> <div class="card"> <div class="padding-0-5rem"> <strong class="block h1">Heading 1 <small><h1></small></strong> <code class="block small padding-top-0-5rem">base-h1-font-size: 32px<br>base-h1-line-height: 38px</code> </div> </div> </div> <div class="col-12 padding-bottom-1rem col-1-2-m"> <div class="card"> <div class="padding-0-5rem"> <strong class="block h1">class .h1</strong> <code class="block small padding-top-0-5rem">base-h1-font-size: 32px<br>base-h1-line-height: 38px</code> </div> </div> </div> <div class="col-12 padding-bottom-1rem col-1-2-m"> <div class="card"> <div class="padding-0-5rem"> <strong class="block h2">Heading 2 <small><h2></small></strong> <code class="block small padding-top-0-5rem">base-h2-font-size: 26px<br>base-h2-line-height: 32px</code> </div> </div> </div> <div class="col-12 padding-bottom-1rem col-1-2-m"> <div class="card"> <div class="padding-0-5rem"> <strong class="block h2">class .h2</strong> <code class="block small padding-top-0-5rem">base-h2-font-size: 26px<br>base-h2-line-height: 32px</code> </div> </div> </div> <div class="col-12 padding-bottom-1rem col-1-2-m"> <div class="card"> <div class="padding-0-5rem"> <strong class="block h3">Heading 3 <small><h3></small></strong> <code class="block small padding-top-0-5rem">base-h3-font-size: 22px<br>base-h3-line-height: 28px</code> </div> </div> </div> <div class="col-12 padding-bottom-1rem col-1-2-m"> <div class="card"> <div class="padding-0-5rem"> <strong class="block h3">class .h3</strong> <code class="block small padding-top-0-5rem">base-h3-font-size: 22px<br>base-h3-line-height: 28px</code> </div> </div> </div> <div class="col-12 padding-bottom-1rem col-1-2-m"> <div class="card"> <div class="padding-0-5rem"> <strong class="block h4">Heading 4 <small><h4></small></strong> <code class="block small padding-top-0-5rem">base-h4-font-size: 18px<br>base-h4-line-height: 24px</code> </div> </div> </div> <div class="col-12 padding-bottom-1rem col-1-2-m"> <div class="card"> <div class="padding-0-5rem"> <strong class="block h4">class .h4 <small><h4></small></strong> <code class="block small padding-top-0-5rem">base-h4-font-size: 18px<br>base-h4-line-height: 24px</code> </div> </div> </div> <div class="col-12 padding-bottom-1rem col-1-2-m"> <div class="card"> <div class="padding-0-5rem"> <strong class="block h4">Heading 5 <small><h5></small></strong> <code class="block small padding-top-0-5rem">base-h5-font-size: 16px<br>base-h5-line-height: 22px</code> </div> </div> </div> <div class="col-12 padding-bottom-1rem col-1-2-m"> <div class="card"> <div class="padding-0-5rem"> <strong class="block h4">class .h5</strong> <code class="block small padding-top-0-5rem">base-h5-font-size: 16px<br>base-h5-line-height: 22px</code> </div> </div> </div> <div class="col-12 padding-bottom-1rem col-1-2-m"> <div class="card"> <div class="padding-0-5rem"> <strong class="block h4">Heading 6 <small><h6></small></strong> <code class="block small padding-top-0-5rem">base-h6-font-size: 14px<br>base-h6-line-height: 20px</code> </div> </div> </div> <div class="col-12 padding-bottom-1rem col-1-2-m"> <div class="card"> <div class="padding-0-5rem"> <strong class="block h4">class .h6</strong> <code class="block small padding-top-0-5rem">base-h6-font-size: 14px<br>base-h6-line-height: 20px</code> </div> </div> </div> </div> </div> </div> <div id="typography-helpers" class="padding-top-2rem"> <div class="container"> <h2>Typography Helpers</h2> <div class="table-responsive"> <table> <thead> <tr> <th>Class</th> <th>Outcome</th> </tr> </thead> <tbody> <tr> <td> <code>.no-select</code> </td> <td> <span class="block no-select">Disables highlighting and selection for all devices</span> </td> </tr> <tr> <td> <code>.font-100</code> </td> <td> <span class="block font-100">Sets a font weight of 100 for mobile devices and up</span> </td> </tr> <tr> <td> <code>.font-200</code> </td> <td> <span class="block font-200">Sets a font weight of 200 for mobile devices and up</span> </td> </tr> <tr> <td> <code>.font-300</code> </td> <td> <span class="block font-300">Sets a font weight of 300 for mobile devices and up</span> </td> </tr> <tr> <td> <code>.font-400</code> </td> <td> <span class="block font-400">Sets a font weight of 400 for mobile devices and up</span> </td> </tr> <tr> <td> <code>.font-500</code> </td> <td> <span class="block font-500">Sets a font weight of 500 for mobile devices and up</span> </td> </tr> <tr> <td> <code>.font-600</code> </td> <td> <span class="block font-600">Sets a font weight of 600 for mobile devices and up</span> </td> </tr> <tr> <td> <code>.font-700</code> </td> <td> <span class="block font-700">Sets a font weight of 700 for mobile devices and up</span> </td> </tr> <tr> <td> <code>.font-800</code> </td> <td> <span class="block font-800">Sets a font weight of 800 for mobile devices and up</span> </td> </tr> <tr> <td> <code>.font-900</code> </td> <td> <span class="block font-900">Sets a font weight of 900 for mobile devices and up</span> </td> </tr> <tr> <td> <code>.uppercase</code> </td> <td> <span class="block uppercase">Sets text to Uppercase for all devices</span> </td> </tr> <tr> <td> <code>.lowercase</code> </td> <td> <span class="block lowercase">Sets text to Lowercase for all devices</span> </td> </tr> <tr> <td> <code>.capitalize</code> </td> <td> <span class="block capitalize">Sets text to capitalize for all devices</span> </td> </tr> <tr> <td> <code>.text-left</code> </td> <td> <span class="block text-left">Aligns text to the left for all devices</span> </td> </tr> <tr> <td> <code>.text-right</code> </td> <td> <span class="block text-right">Aligns text to the right for all devices</span> </td> </tr> <tr> <td> <code>.text-center</code> </td> <td> <span class="block text-center">Aligns text to the center for all devices</span> </td> </tr> <tr> <td> <code>.text-left-m</code> </td> <td> <span class="block text-left-m">Aligns text to the left for medium devices and up</span> </td> </tr> <tr> <td> <code>.text-right-m</code> </td> <td> <span class="block text-right-m">Aligns text to the right for medium devices and up</span> </td> </tr> <tr> <td> <code>.text-center-m</code> </td> <td> <span class="block text-center-m">Aligns text to the center for medium devices and up</span> </td> </tr> <tr> <td> <code>.text-left-l</code> </td> <td> <span class="block text-left-l">Aligns text to the left for large devices and up</span> </td> </tr> <tr> <td> <code>.text-right-l</code> </td> <td> <span class="block text-right-l">Aligns text to the right for large devices and up</span> </td> </tr> <tr> <td> <code>.text-center-l</code> </td> <td> <span class="block text-center-l">Aligns text to the center for large devices and up</span> </td> </tr> <tr> <td> <code>.text-left-xl</code> </td> <td> <span class="block text-left-xl">Aligns text to the left for extra large devices and up</span> </td> </tr> <tr> <td> <code>.text-right-xl</code> </td> <td> <span class="block text-right-xl">Aligns text to the right for extra large devices and up</span> </td> </tr> <tr> <td> <code>.text-center-xl</code> </td> <td> <span class="block text-center-xl">Aligns text to the center for extra large devices and up</span> </td> </tr> </tbody> </table> </div> </div> </div> <div id="tables" class="padding-top-2rem"> <div class="container"> <h2>Tables</h2> <div class="table-responsive"> <table> <thead> <tr> <th>Table Heading 1</th> <th>Table Heading 2</th> </tr> </thead> <tbody> <tr> <td>Table data cell</td> <td>Table data cell</td> </tr> <tr> <td>Table data cell</td> <td>Table data cell</td> </tr> </tbody> </table> </div> </div> </div> <div id="forms" class="padding-top-2rem"> <div class="container"> <h2>Forms</h2> <div class=""> <form> <fieldset> <legend class="h3 strong">Legend</legend> <div class="padding-top-1rem"> <label for="inputtext">input text label</label> <input placeholder="text" type="text" name="inputtext" id="inputtext"> </div> <div class="padding-top-1rem"> <label for="inputemail">input email label</label> <input placeholder="email" type="email" name="inputemail" id="inputemail"> </div> <div class="padding-top-1rem"> <label for="inputpassword">input password label</label> <input placeholder="password" type="password" name="inputpassword" id="inputpassword"> </div> <div class="padding-top-1rem"> <label for="inputtel">input tel label</label> <input placeholder="tel" type="tel" name="inputtel" id="inputtel"> </div> <div class="padding-top-1rem"> <label for="inputnumber">input number label</label> <input placeholder="number" type="number" name="inputnumber" id="inputnumber"> </div> <div class="padding-top-1rem"> <label for="inputdate">input date label</label> <input type="date" name="inputdate" id="inputdate"> </div> <div class="padding-top-1rem"> <label for="inputsearch">input search label</label> <input placeholder="search" type="search" name="inputsearch" id="inputsearch"> </div> <div class="padding-top-1rem"> <label for="inputurl">input url label</label> <input placeholder="url" type="url" name="inputurl" id="inputurl"> </div> <div class="padding-top-1rem"> <label for="textarea">textarea label</label> <textarea name="textarea" id="textarea"></textarea> </div> <div class="padding-top-1rem"> <label for="select">select label</label> <select name="select" id="select"> <option value="" hidden>Select</option> <option value="html">HTML</option> <option value="css">CSS</option> <option value="js">JS</option> </select> </div> <div class="padding-top-1rem"> <div class="flex flex-align-items-center padding-top-0-25rem"> <input type="radio" name="radio" id="radio1"> <label for="radio1" class="padding-left-0-5rem">radio label 1</label> </div> <div class="flex flex-align-items-center padding-top-0-25rem"> <input type="radio" name="radio" id="radio2"> <label for="radio2" class="padding-left-0-5rem">radio label 2</label> </div> </div> <div class="padding-top-1rem"> <div class="flex flex-align-items-center padding-top-0-25rem"> <input type="checkbox" name="checkbox" id="checkbox1"> <label for="checkbox1" class="padding-left-0-5rem">checkbox label 1</label> </div> <div class="flex flex-align-items-center padding-top-0-25rem"> <input type="checkbox" name="checkbox" id="checkbox2"> <label for="checkbox2" class="padding-left-0-5rem">checkbox label 2</label> </div> </div> <div class="padding-top-1rem"> <button type="button">Button</button> <button type="button" disabled>Button [disabled]</button> <input type="submit" value="Submit"> <input type="submit" disabled value="Submit [disabled]"> </div> </fieldset> </form> </div> </div> </div> <div id="containers" class="padding-top-2rem"> <div class="container"> <h2>Containers</h2> <p> Styles for containers for all breakpoints. </p> <div class="table-responsive"> <table> <thead> <tr> <th>Class</th> <th>Purpose</th> <th>Example</th> <th>Outcome</th> </tr> </thead> <tbody> <tr> <td><code>.container</code></td> <td>Apply a <code>.container</code></td> <td><code><div class="container">This is a container for all breakpoints</div></code></td> <td>Applies a <code>.container</code> to a <code>div</code> element for all breakpoints</td> </tr> <tr> <td><code>.container-m</code></td> <td>Apply a <code>.container-m</code></td> <td><code><div class="container-m">This is a container for medium devices and above</div></code></td> <td>Applies a <code>.container-m</code> to a <code>div</code> element for medium devices and above</td> </tr> <tr> <td><code>.container-l</code></td> <td>Apply a <code>.container-l</code></td> <td><code><div class="container-l">This is a container for large devices and above</div></code></td> <td>Applies a <code>.container-l</code> to a <code>div</code> element for large devices and above</td> </tr> <tr> <td><code>.container-xl</code></td> <td>Apply a <code>.container-xl</code></td> <td><code><div class="container-xl">This is a container for extra large devices and above</div></code></td> <td>Applies a <code>.container-xl</code> to a <code>div</code> element for extra large devices and above</td> </tr> </tbody> </table> </div> </div> <div class="container"> <div style="margin-top: 2rem; margin-bottom: 1rem; border: 1px solid #ccc;"> <div class="padding-0-5rem"> This is a <code>.container</code> which is applied for mobile and above breakpoints </div> </div> </div> <div class="container-m"> <div style="margin-bottom: 1rem; border: 1px solid #ccc;"> <div class="padding-0-5rem"> This is a <code>.container-m</code> which is applied for medium devices and above (full width for mobile. Medium width for medium devices and above) </div> </div> </div> <div class="container-l"> <div style="margin-bottom: 1rem; border: 1px solid #ccc;"> <div class="padding-0-5rem"> This is a <code>.container-l</code> which is applied for large devices and above (full width for mobile. Large width for large devices and above) </div> </div> </div> <div class="container-xl"> <div style="margin-bottom: 1rem; border: 1px solid #ccc;"> <div class="padding-0-5rem"> This is a <code>.container-xl</code> which is applied for extra large devices and above (full width for mobile. Extra Large width for extra large devices and above) </div> </div> </div> </div> <div id="grid" class="padding-top-2rem"> <div class="container"> <h2>Grid</h2> <p> Contains styles for flex grids, rows and basic columns for all breakpoints. </p> <div class="table-responsive"> <table> <thead> <tr> <th>Class</th> <th>Purpose</th> <th>Example</th> <th>Outcome</th> </tr> </thead> <tbody> <tr> <td><code>.row</code></td> <td>Apply a <code>.row</code> when wrapping columns</td> <td><code><div class="row">This needs to be wrapped around columns.</div></code></td> <td>Applies a <code>.row</code> to a <code>div</code> element which has a negative margin left and right of the gutter spacing for all breakpoints</td> </tr> <tr> <td><code>.col-1</code></td> <td>Apply a <code>.col-1</code></td> <td><code><div class="col-1">Column</div></code></td> <td>Applies a <code>.col-1</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 8.33333% for all breakpoints</td> </tr> <tr> <td><code>.col-2</code></td> <td>Apply a <code>.col-2</code></td> <td><code><div class="col-2">Column</div></code></td> <td>Applies a <code>.col-2</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 16.66667% for all breakpoints</td> </tr> <tr> <td><code>.col-3</code></td> <td>Apply a <code>.col-3</code></td> <td><code><div class="col-3">Column</div></code></td> <td>Applies a <code>.col-3</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 25%</td> </tr> <tr> <td><code>.col-4</code></td> <td>Apply a <code>.col-4</code></td> <td><code><div class="col-4">Column</div></code></td> <td>Applies a <code>.col-4</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 33.33333% for all breakpoints</td> </tr> <tr> <td><code>.col-5</code></td> <td>Apply a <code>.col-5</code></td> <td><code><div class="col-5">Column</div></code></td> <td>Applies a <code>.col-5</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 41.66667% for all breakpoints</td> </tr> <tr> <td><code>.col-6</code></td> <td>Apply a <code>.col-6</code></td> <td><code><div class="col-6">Column</div></code></td> <td>Applies a <code>.col-6</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 50% for all breakpoints</td> </tr> <tr> <td><code>.col-7</code></td> <td>Apply a <code>.col-7</code></td> <td><code><div class="col-7">Column</div></code></td> <td>Applies a <code>.col-7</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 58.33333% for all breakpoints</td> </tr> <tr> <td><code>.col-8</code></td> <td>Apply a <code>.col-8</code></td> <td><code><div class="col-8">Column</div></code></td> <td>Applies a <code>.col-8</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 66.66667% for all breakpoints</td> </tr> <tr> <td><code>.col-9</code></td> <td>Apply a <code>.col-9</code></td> <td><code><div class="col-9">Column</div></code></td> <td>Applies a <code>.col-9</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 75% for all breakpoints</td> </tr> <tr> <td><code>.col-10</code></td> <td>Apply a <code>.col-10</code></td> <td><code><div class="col-10">Column</div></code></td> <td>Applies a <code>.col-10</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 83.33333% for all breakpoints</td> </tr> <tr> <td><code>.col-11</code></td> <td>Apply a <code>.col-11</code></td> <td><code><div class="col-11">Column</div></code></td> <td>Applies a <code>.col-11</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 91.66667% for all breakpoints</td> </tr> <tr> <td><code>.col-12</code></td> <td>Apply a <code>.col-12</code></td> <td><code><div class="col-12">Column</div></code></td> <td>Applies a <code>.col-12</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 100% for all breakpoints</td> </tr> <tr> <td><code>.col-1-2</code></td> <td>Apply a <code>.col-1-2</code></td> <td><code><div class="col-1-2">Column</div></code></td> <td>Applies a <code>.col-1-2</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 50% for all breakpoints</td> </tr> <tr> <td><code>.col-1-3</code></td> <td>Apply a <code>.col-1-3</code></td> <td><code><div class="col-1-3">Column</div></code></td> <td>Applies a <code>.col-1-3</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 33.33333% for all breakpoints</td> </tr> <tr> <td><code>.col-2-3</code></td> <td>Apply a <code>.col-2-3</code></td> <td><code><div class="col-2-3">Column</div></code></td> <td>Applies a <code>.col-2-3</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 66.66667% for all breakpoints</td> </tr> <tr> <td><code>.col-1-4</code></td> <td>Apply a <code>.col-1-4</code></td> <td><code><div class="col-1-4">Column</div></code></td> <td>Applies a <code>.col-1-4</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 25% for all breakpoints</td> </tr> <tr> <td><code>.col-3-4</code></td> <td>Apply a <code>.col-3-4</code></td> <td><code><div class="col-3-4">Column</div></code></td> <td>Applies a <code>.col-3-4</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 75% for all breakpoints</td> </tr> <tr> <td><code>.col-1-5</code></td> <td>Apply a <code>.col-1-5</code></td> <td><code><div class="col-1-5">Column</div></code></td> <td>Applies a <code>.col-1-5</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 20% for all breakpoints</td> </tr> <tr> <td><code>.col-2-5</code></td> <td>Apply a <code>.col-2-5</code></td> <td><code><div class="col-2-5">Column</div></code></td> <td>Applies a <code>.col-2-5</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 40% for all breakpoints</td> </tr> <tr> <td><code>.col-3-5</code></td> <td>Apply a <code>.col-3-5</code></td> <td><code><div class="col-3-5">Column</div></code></td> <td>Applies a <code>.col-3-5</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 60% for all breakpoints</td> </tr> <tr> <td><code>.col-4-5</code></td> <td>Apply a <code>.col-4-5</code></td> <td><code><div class="col-4-5">Column</div></code></td> <td>Applies a <code>.col-4-5</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 80% for all breakpoints</td> </tr> <tr> <td><code>.col-full</code></td> <td>Apply a <code>.col-full</code></td> <td><code><div class="col-full">Column</div></code></td> <td>Applies a <code>.col-full</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 100% for all breakpoints</td> </tr> <tr> <td><code>.row-m</code></td> <td>Apply a <code>.row-m</code> when wrapping columns</td> <td><code><div class="row-m">This needs to be wrapped around columns.</div></code></td> <td>Applies a <code>.row-m</code> to a <code>div</code> element which has a negative margin left and right of the gutter spacing for medium devices and up</td> </tr> <tr> <td><code>.col-1-m</code></td> <td>Apply a <code>.col-1-m</code></td> <td><code><div class="col-1-m">Column</div></code></td> <td>Applies a <code>.col-1-m</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 8.33333% for medium devices and up</td> </tr> <tr> <td><code>.col-2-m</code></td> <td>Apply a <code>.col-2-m</code></td> <td><code><div class="col-2-m">Column</div></code></td> <td>Applies a <code>.col-2-m</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 16.66667% for medium devices and up</td> </tr> <tr> <td><code>.col-3-m</code></td> <td>Apply a <code>.col-3-m</code></td> <td><code><div class="col-3-m">Column</div></code></td> <td>Applies a <code>.col-3-m</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 25%</td> </tr> <tr> <td><code>.col-4-m</code></td> <td>Apply a <code>.col-4-m</code></td> <td><code><div class="col-4-m">Column</div></code></td> <td>Applies a <code>.col-4-m</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 33.33333% for medium devices and up</td> </tr> <tr> <td><code>.col-5-m</code></td> <td>Apply a <code>.col-5-m</code></td> <td><code><div class="col-5-m">Column</div></code></td> <td>Applies a <code>.col-5-m</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 41.66667% for medium devices and up</td> </tr> <tr> <td><code>.col-6-m</code></td> <td>Apply a <code>.col-6-m</code></td> <td><code><div class="col-6-m">Column</div></code></td> <td>Applies a <code>.col-6-m</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 50% for medium devices and up</td> </tr> <tr> <td><code>.col-7-m</code></td> <td>Apply a <code>.col-7-m</code></td> <td><code><div class="col-7-m">Column</div></code></td> <td>Applies a <code>.col-7-m</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 58.33333% for medium devices and up</td> </tr> <tr> <td><code>.col-8-m</code></td> <td>Apply a <code>.col-8-m</code></td> <td><code><div class="col-8-m">Column</div></code></td> <td>Applies a <code>.col-8-m</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 66.66667% for medium devices and up</td> </tr> <tr> <td><code>.col-9-m</code></td> <td>Apply a <code>.col-9-m</code></td> <td><code><div class="col-9-m">Column</div></code></td> <td>Applies a <code>.col-9-m</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 75% for medium devices and up</td> </tr> <tr> <td><code>.col-10-m</code></td> <td>Apply a <code>.col-10-m</code></td> <td><code><div class="col-10-m">Column</div></code></td> <td>Applies a <code>.col-10-m</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 83.33333% for medium devices and up</td> </tr> <tr> <td><code>.col-11-m</code></td> <td>Apply a <code>.col-11-m</code></td> <td><code><div class="col-11-m">Column</div></code></td> <td>Applies a <code>.col-11-m</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 91.66667% for medium devices and up</td> </tr> <tr> <td><code>.col-12-m</code></td> <td>Apply a <code>.col-12-m</code></td> <td><code><div class="col-12-m">Column</div></code></td> <td>Applies a <code>.col-12-m</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 100% for medium devices and up</td> </tr> <tr> <td><code>.col-1-2-m</code></td> <td>Apply a <code>.col-1-2-m</code></td> <td><code><div class="col-1-2-m">Column</div></code></td> <td>Applies a <code>.col-1-2-m</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 50% for medium devices and up</td> </tr> <tr> <td><code>.col-1-3-m</code></td> <td>Apply a <code>.col-1-3-m</code></td> <td><code><div class="col-1-3-m">Column</div></code></td> <td>Applies a <code>.col-1-3-m</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 33.33333% for medium devices and up</td> </tr> <tr> <td><code>.col-2-3-m</code></td> <td>Apply a <code>.col-2-3-m</code></td> <td><code><div class="col-2-3-m">Column</div></code></td> <td>Applies a <code>.col-2-3-m</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 66.66667% for medium devices and up</td> </tr> <tr> <td><code>.col-1-4-m</code></td> <td>Apply a <code>.col-1-4-m</code></td> <td><code><div class="col-1-4-m">Column</div></code></td> <td>Applies a <code>.col-1-4-m</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 25% for medium devices and up</td> </tr> <tr> <td><code>.col-3-4-m</code></td> <td>Apply a <code>.col-3-4-m</code></td> <td><code><div class="col-3-4-m">Column</div></code></td> <td>Applies a <code>.col-3-4-m</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 75% for medium devices and up</td> </tr> <tr> <td><code>.col-1-5-m</code></td> <td>Apply a <code>.col-1-5-m</code></td> <td><code><div class="col-1-5-m">Column</div></code></td> <td>Applies a <code>.col-1-5-m</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 20% for medium devices and up</td> </tr> <tr> <td><code>.col-2-5-m</code></td> <td>Apply a <code>.col-2-5-m</code></td> <td><code><div class="col-2-5-m">Column</div></code></td> <td>Applies a <code>.col-2-5-m</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 40% for medium devices and up</td> </tr> <tr> <td><code>.col-3-5-m</code></td> <td>Apply a <code>.col-3-5-m</code></td> <td><code><div class="col-3-5-m">Column</div></code></td> <td>Applies a <code>.col-3-5-m</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 60% for medium devices and up</td> </tr> <tr> <td><code>.col-4-5-m</code></td> <td>Apply a <code>.col-4-5-m</code></td> <td><code><div class="col-4-5-m">Column</div></code></td> <td>Applies a <code>.col-4-5-m</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 80% for medium devices and up</td> </tr> <tr> <td><code>.col-full-m</code></td> <td>Apply a <code>.col-full-m</code></td> <td><code><div class="col-full-m">Column</div></code></td> <td>Applies a <code>.col-full-m</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 100% for medium devices and up</td> </tr> <tr> <td><code>.row-l</code></td> <td>Apply a <code>.row-l</code> when wrapping columns</td> <td><code><div class="row-l">This needs to be wrapped around columns.</div></code></td> <td>Applies a <code>.row-l</code> to a <code>div</code> element which has a negative margin left and right of the gutter spacing for large devices and up</td> </tr> <tr> <td><code>.col-1-l</code></td> <td>Apply a <code>.col-1-l</code></td> <td><code><div class="col-1-l">Column</div></code></td> <td>Applies a <code>.col-1-l</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 8.33333% for large devices and up</td> </tr> <tr> <td><code>.col-2-l</code></td> <td>Apply a <code>.col-2-l</code></td> <td><code><div class="col-2-l">Column</div></code></td> <td>Applies a <code>.col-2-l</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 16.66667% for large devices and up</td> </tr> <tr> <td><code>.col-3-l</code></td> <td>Apply a <code>.col-3-l</code></td> <td><code><div class="col-3-l">Column</div></code></td> <td>Applies a <code>.col-3-l</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 25%</td> </tr> <tr> <td><code>.col-4-l</code></td> <td>Apply a <code>.col-4-l</code></td> <td><code><div class="col-4-l">Column</div></code></td> <td>Applies a <code>.col-4-l</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 33.33333% for large devices and up</td> </tr> <tr> <td><code>.col-5-l</code></td> <td>Apply a <code>.col-5-l</code></td> <td><code><div class="col-5-l">Column</div></code></td> <td>Applies a <code>.col-5-l</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 41.66667% for large devices and up</td> </tr> <tr> <td><code>.col-6-l</code></td> <td>Apply a <code>.col-6-l</code></td> <td><code><div class="col-6-l">Column</div></code></td> <td>Applies a <code>.col-6-l</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 50% for large devices and up</td> </tr> <tr> <td><code>.col-7-l</code></td> <td>Apply a <code>.col-7-l</code></td> <td><code><div class="col-7-l">Column</div></code></td> <td>Applies a <code>.col-7-l</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 58.33333% for large devices and up</td> </tr> <tr> <td><code>.col-8-l</code></td> <td>Apply a <code>.col-8-l</code></td> <td><code><div class="col-8-l">Column</div></code></td> <td>Applies a <code>.col-8-l</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 66.66667% for large devices and up</td> </tr> <tr> <td><code>.col-9-l</code></td> <td>Apply a <code>.col-9-l</code></td> <td><code><div class="col-9-l">Column</div></code></td> <td>Applies a <code>.col-9-l</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 75% for large devices and up</td> </tr> <tr> <td><code>.col-10-l</code></td> <td>Apply a <code>.col-10-l</code></td> <td><code><div class="col-10-l">Column</div></code></td> <td>Applies a <code>.col-10-l</code> to a <code>div</code> element which has a padding left and right of gutter spacing and a width of 83.33333% for large devices and up</td> </tr> <tr> <td><code>.col-11-l</code></td> <td>App