bullframe.css
Version:
Solid, fluid, IE-friendly Sass (SCSS) framework
1,224 lines (1,135 loc) • 43.6 kB
HTML
<html class="test" id="top" lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="x-ua-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Test page — bullframe.css Sass (SCSS) framework</title>
<meta name="description"
content="A quick look at a wide range of HTML elements, divided into several sections and rendered into unusual combinations, for testing purpose only." />
<!-- https://realfavicongenerator.net/ -->
<link rel="apple-touch-icon" sizes="180x180" href="./docs/test/icons/apple-touch-icon.png?v=PYqzMzgx6v" />
<link rel="icon" type="image/png" sizes="32x32" href="./docs/test/icons/favicon-32x32.png?v=PYqzMzgx6v" />
<link rel="icon" type="image/png" sizes="16x16" href="./docs/test/icons/favicon-16x16.png?v=PYqzMzgx6v" />
<link rel="mask-icon" href="./docs/test/icons/safari-pinned-tab.svg?v=PYqzMzgx6v" color="#f95c1f" />
<link rel="shortcut icon" href="./docs/test/icons/favicon.ico?v=PYqzMzgx6v" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#f95c1f" />
<link rel="stylesheet" href="./dist/css/bullframe-dark-prefers.min.css" />
<!-- this is just for a nicer demo -->
<link rel="stylesheet" href="./docs/test/css/style.css" />
<!-- enable HTML5 elements in all browsers, and fix IE10 viewport on Windows 8 -->
<script src="./docs/test/js/vendor/html5shiv.js?v3.7.3"></script>
<script src="./docs/test/js/vendor/ie10-viewport-bug-workaround.js?v1..0"></script>
</head>
<body class="bf-responsive-typography bf-reduced-motion">
<a class="bf-sr-only focusable" href="#main-content">Skip to main content</a>
<div class="bf-container bf-container--break-md">
<header class="bf-t-center bf-m-b-3">
<h1>bullframe<span>.css</span></h1>
<p class="bf-lead">Solid, fluid, IE-friendly Sass (SCSS) framework</p>
<a class="bf-btn bf-btn--primary" href="https://github.com/marcop135/bullframe.css/archive/master.zip"
role="button">Download</a>
<a class="bf-btn" href="https://github.com/marcop135/bullframe.css" role="button">GitHub</a>
<p class="description">
This an is a quick look at a wide range of HTML elements, divided into
several sections and rendered into unusual combinations, for testing
purpose only.
</p>
<hr />
<p class="bf-t-center">
CSS build in use:<br />
<mark><code>bullframe-dark-prefers.min.css</code></mark>
</p>
<p class="bf-t-center">
Polyfills:<br />
<code>html5shiv.js v3.7.3</code><br />
<code>ie10-viewport-bug-workaround.js v1..0</code>
</p>
<p class="bf-t-center">
<code><body></code> classes:<br />
<code>.bf-responsive-typography</code><br />
<code>.bf-reduced-motion</code>
</p>
<hr />
</header>
<main id="main-content">
<h2 id="texts" class="h2--section">Text elements</h2>
<div class="bf-row">
<div class="bf-col-6">
<div class="bf-m-b-4">
<h3>Headings</h3>
<h1>Heading 1 <a href="#">with link</a></h1>
<h2>Heading 2 <a href="#">with link</a></h2>
<h3>Heading 3 <a href="#">with link</a></h3>
<h4>Heading 4 <a href="#">with link</a></h4>
<h5>Heading 5 <a href="#">with link</a></h5>
<h6>Heading 6 <a href="#">with link</a></h6>
</div>
<h3>Paragraphs with headings utilities</h3>
<p class="bf-h1">Heading 1</p>
<p class="bf-h2">Heading 2</p>
<p class="bf-h3">Heading 3</p>
<p class="bf-h4">Heading 4</p>
<p class="bf-h5">Heading 5</p>
<p class="bf-h6">Heading 6</p>
</div>
<div class="bf-col-6">
<h3>Inline text elements</h3>
<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 <strong>b 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 <em>i element</em> example<br />
The img element
<img src="../docs/test/images/placeholder-img-16x16.jpg" alt="just a placeholder" loading="lazy" />
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 <strong>strong element</strong> 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>
</div>
</div>
<div class="bf-row">
<div class="bf-col-6">
<h3>Paragraphs</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et m. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula eget dolor.
</p>
<p>
The European languages are members of the same family. Their
separate existence is a myth. For science, music, sport, etc,
Europe uses the same vocabulary. The languages only differ in
their grammar, their pronunciation and their most common words.
Everyone realizes why a new common language would be desirable.
</p>
</div>
<div class="bf-col-6">
<h3>hidden attribute</h3>
<p hidden="">
This should be hidden in all browsers (apart from IE6)
</p>
<h3>Template content</h3>
<template>
<h1>{{title}}</h1>
<content></content>
</template>
<h3>Address</h3>
<address>Address: somewhere, world</address>
</div>
</div>
<div class="bf-row">
<div class="bf-col-12">
<h3>hr</h3>
<hr />
</div>
</div>
<div class="bf-row">
<div class="bf-col-12">
<h3>pre (383 characters)</h3>
<pre>
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.
</pre>
<h3>code (526 characters)</h3>
<code>
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em
0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline
dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
</code>
</div>
</div>
<div class="bf-row">
<div class="bf-col-12">
<h3>pre code</h3>
<pre><code><!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title >...</title>
<link rel="stylesheet" href="bullframe.css">
</head>
<body>
<main>...</div>
</body>
</html></code></pre>
</div>
</div>
<div class="bf-row">
<div class="bf-col-12">
<h3>blockquotes</h3>
<blockquote>
<p>
Some sort of famous witty quote marked up with a
<code><blockquote></code> and a child
<code><p></code> element.
</p>
<small>Tom Whatever</small>
</blockquote>
<blockquote>
Even better philosophical quote marked up with just a
<code><blockquote></code> element.
</blockquote>
</div>
</div>
<div class="bf-row">
<div class="bf-col-4">
<h3>Ordered list</h3>
<ol>
<li>list item 1</li>
<li>
list item 1
<ol>
<li>list item 2</li>
<li>
list item 2
<ol>
<li>list item 3</li>
<li>list item 3</li>
</ol>
</li>
<li>list item 2</li>
<li>list item 2</li>
</ol>
</li>
<li>list item 1</li>
<li>list item 1</li>
</ol>
</div>
<div class="bf-col-4">
<h3>Unordered list</h3>
<ul>
<li>list item 1</li>
<li>
list item 1
<ul>
<li>list item 2</li>
<li>
list item 2
<ul>
<li>list item 3</li>
<li>list item 3</li>
</ul>
</li>
<li>list item 2</li>
<li>list item 2</li>
</ul>
</li>
<li>list item 1</li>
<li>list item 1</li>
</ul>
</div>
<div class="bf-col-4">
<h3>Definition list</h3>
<dl>
<dt>Description name</dt>
<dd>Description value</dd>
<dt>Description name</dt>
<dd>Description value</dd>
<dt>Description name</dt>
<dd>Description value</dd>
</dl>
</div>
</div>
<div class="bf-row">
<div class="bf-col-6">
<h3>Unstyled list</h3>
<ol class="bf-list-unstyled">
<li>list item 1</li>
<li>
list item 1
<ol>
<li>list item 2</li>
<li>
list item 2
<ol>
<li>list item 3</li>
<li>list item 3</li>
</ol>
</li>
<li>list item 2</li>
<li>list item 2</li>
</ol>
</li>
<li>list item 1</li>
<li>list item 1</li>
</ol>
</div>
<div class="bf-col-6">
<h3>Navigation list</h3>
<nav>
<ul>
<li>list item 1</li>
<li>
list item 1
<ol>
<li>list item 2</li>
<li>
list item 2
<ol>
<li>list item 3</li>
<li>list item 3</li>
</ol>
</li>
<li>list item 2</li>
<li>list item 2</li>
</ol>
</li>
<li>list item 1</li>
<li>list item 1</li>
</ul>
</nav>
</div>
</div>
<div class="bf-row">
<div class="bf-col-12">
<h2 id="embedded-content" class="h2--section">Embedded content</h2>
</div>
</div>
<div class="bf-row">
<div class="bf-col-6">
<h3>Linked figure with an image and a caption</h3>
<figure>
<a href="#">
<img src="../docs/test/images/placeholder-img-800x40.jpg" alt="just a placeholder" loading="lazy" />
</a>
<figcaption>The image above is 800x400 pixels</figcaption>
</figure>
</div>
<div class="bf-col-6">
<h3>SVG</h3>
<svg width="200px" height="200px">
<circle cx="0" cy="0" r="200" fill="#ff0000" />
</svg>
</div>
</div>
<div class="bf-row">
<div class="bf-col-6">
<div class="bf-m-b-3">
<h3>HTML5 video with controls</h3>
<video poster="./docs/test/images/video-poster.png" controls width="450">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
type="video/webm" />
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
type="video/mp4" />
Sorry, your browser doesn't support embedded videos.
</video>
</div>
<div class="bf-m-b-3">
<h3>Audio with controls</h3>
<audio controls>
<source src="https://media.html5media.info/audio.mp3" type="audio/mp3" />
<source src="https://media.html5media.info/audio.ogg" type="audio/ogg" />
<p>Your browser does not support the HTML5 Audio element.</p>
</audio>
</div>
</div>
<div class="bf-col-6">
<h3>YouTube iframe 16:9 (default)</h3>
<div class="bf-embed-responsive">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Z-4v4I7Gzk0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
loading="lazy"></iframe>
</div>
</div>
</div>
<div class="bf-row">
<div class="bf-col-6 bf-m-b-4">
<h3>Progress</h3>
<div class="bf-m-b-3">
<label for="file">File progress:</label>
<progress id="file" max="100" value="70">70%</progress>
</div>
<h3>Meter</h3>
<label for="fuel">Fuel level:</label>
<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">
at 50/100
</meter>
</div>
<div class="bf-col-6">
<h3>Details with a summary</h3>
<div class="bf-m-b-2">
<details>
<summary>Click to Open</summary>
Something small enough to escape casual notice.
</details>
</div>
<details open>
<summary>Click to Hide</summary>
Something small enough to escape casual notice.
</details>
</div>
</div>
<div class="bf-row">
<div class="bf-col-12">
<h2 id="forms" class="h2--section">Forms</h2>
</div>
</div>
<div class="bf-row">
<div class="bf-col-6 bf-m-b-3">
<h3>Inputs</h3>
<form>
<fieldset>
<legend>
HTML5 has several new input types for forms (legend).
</legend>
<div class="bf-m-b-4">
<label>Text input as sibling of label</label>
<input type="text" value="default value that goes on and on without stopping or punctuation" />
<label>Text input as descendant of label (not recommended)
<input type="text"
value="default value that goes on and on without stopping or punctuation" /></label>
<label disabled>Text input as sibling of label (disabled)</label>
<input type="text" value="default value that goes on and on without stopping or punctuation" disabled />
<label aria-disabled="true">Text input as sibling of label (aria-disabled)</label>
<input type="text" value="default value that goes on and on without stopping or punctuation"
aria-disabled="true" />
<label class="bf-disabled">Text input as sibling of label (.bf-disabled)</label>
<input type="text" value="default value that goes on and on without stopping or punctuation"
class="bf-disabled" />
<label class="bf-disabled">Text input as descendant of label (disabled, not
recommended)
<input type="text" value="default value" disabled /></label>
<label>Text input (focused)</label>
<input class="bf-focused" type="text" value="default value" />
<label>Text input (invalid)</label>
<input class="bf-invalid" type="text" value="invalid value" />
<label>Email input (required)</label>
<input type="email" required />
<label>Number input</label>
<input id="in" max="10" min="0" type="number" value="5" />
<label>Tel input</label> <input type="tel" />
<label>URL input</label> <input type="url" />
<label>Date input</label>
<input id="idd" type="date" value="1970-01-01" />
<label>Month input</label>
<input id="idm" type="month" value="1970-01" />
<label>Week input</label>
<input id="idw" type="week" value="1970-W01" />
<label>Datetime-local input</label>
<input id="idtl" type="datetime-local" value="1970-01-01T00:00" />
<label>Password input</label>
<input type="password" value="password" />
<label>Search input</label>
<input id="search" name="search" type="search" />
<label for="myBrowser">Input datalist (choose a browser)</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
<option value="Chrome"></option>
<option value="Firefox"></option>
<option value="Internet Explorer"></option>
<option value="Opera"></option>
<option value="Safari"></option>
<option value="Microsoft Edge"></option>
</datalist>
<label>File input</label>
<input type="file" />
<label>Range input</label>
<input id="ir" type="range" value="10" />
</div>
<h3>Radio and checkbox inputs</h3>
<h4>Radios</h4>
<div class="bf-m-b-3">
<div>
<input type="radio" id="huey" name="drone" value="huey" checked />
<label for="huey">Huey</label>
</div>
<div>
<input type="radio" id="louie" name="drone" value="louie" checked />
<label for="louie">Louie (checked)</label>
</div>
<div>
<input type="radio" id="jake" name="drone" value="jake" disabled />
<label class="bf-disabled" for="jake">Jake (disabled)</label>
</div>
</div>
<h4>Checkboxes</h4>
<div>
<input type="checkbox" id="scales" name="scales" />
<label for="scales">Scales</label>
</div>
<div>
<input type="checkbox" id="horns" name="horns" checked />
<label for="horns">Horns (checked)</label>
</div>
<div>
<input type="checkbox" id="wings" name="wings" disabled />
<label class="bf-disabled" for="wings">Wings (disabled)</label>
</div>
</fieldset>
</form>
</div>
<div class="bf-col-6">
<form>
<h3>Selects</h3>
<fieldset>
<label for="s">Select field</label>
<select id="s">
<option>Option 01</option>
<option>Option 02</option>
<option>Option 03</option>
<option>Option 04</option>
<option>Option 05</option>
</select>
<label for="s-ltr">Select field (RTL)</label>
<select id="s-ltr" dir="rtl">
<option>Option 01</option>
<option>Option 02</option>
<option>Option 03</option>
<option>Option 04</option>
<option>Option 05</option>
</select>
<label class="bf-disabled" for="s2">Select field (disabled)</label>
<select id="s2" disabled>
<option>Option 01</option>
<option>Option 02</option>
<option>Option 03</option>
<option>Option 04</option>
<option>Option 05</option>
</select>
<label for="select_multi">Select [size="2"]</label>
<select id="select_size" name="select_size" size="2">
<optgroup label="Group 1">
<option value="1">Some text goes here</option>
<option value="2">Another choice could be here</option>
<option value="3">Yet another item to be chosen</option>
</optgroup>
<optgroup label="Group 2">
<option value="4">Some text goes here</option>
<option value="5">Another choice could be here</option>
<option value="6">Yet another item to be chosen</option>
</optgroup>
</select>
<label for="select_multi">Select multiple</label>
<select id="select_multi" multiple="multiple" name="select_multi">
<optgroup label="Group 1">
<option value="1">Some text goes here</option>
<option value="2">Another choice could be here</option>
<option value="3">Yet another item to be chosen</option>
</optgroup>
<optgroup label="Group 2">
<option value="4">Some text goes here</option>
<option value="5">Another choice could be here</option>
<option value="6">Yet another item to be chosen</option>
</optgroup>
<optgroup label="Group 3">
<option value="7">Some text goes here</option>
<option value="8">Another choice could be here</option>
<option value="9">Yet another item to be chosen</option>
</optgroup>
</select>
</fieldset>
</form>
<h3>Textareas</h3>
<form>
<fieldset>
<label>Textarea</label>
<textarea rows="7">Textarea text</textarea>
<label>Textarea placeholder</label>
<textarea id="textarea" name="textarea" placeholder="This is an example of HTML5 placeholder text."
rows="7"></textarea>
</fieldset>
</form>
<h3>Textareas (disabled)</h3>
<form>
<fieldset disabled>
<label>Textarea</label>
<textarea rows="7">Textarea text</textarea>
<label>Textarea placeholder</label>
<textarea id="textarea2" name="textarea2" placeholder="This is an example of HTML5 placeholder text."
rows="7"></textarea>
</fieldset>
</form>
</div>
</div>
<div class="bf-row">
<div class="bf-col-6">
<h3>Clickable inputs</h3>
<fieldset class="bf-m-b-3">
<div class="input-image">
<input alt="Image (input)" src="../docs/test/images/placeholder-img-130x14.jpg" type="image" /><br />
<code>input type="image" (130x40px)</code>
</div>
<div>
<input type="reset" value="Reset (input)" />
</div>
<div>
<input type="button" value="Button (input)" />
</div>
<div>
<input type="submit" value="Submit (input)" />
</div>
<div>
<a class="bf-btn" href="#" title="button link" role="button">Button (link)</a>
</div>
<div>
<a class="bf-btn bf-btn--primary" href="#" title="button link" role="button">Primary button (link)</a>
</div>
</fieldset>
<fieldset disabled>
<h3>Clickable inputs (disabled)</h3>
<div class="input-image">
<input alt="Image (input)" src="../docs/test/images/placeholder-img-130x14.jpg" type="image" /><br />
<code>input type="image" (130x40px)</code>
</div>
<div>
<input type="reset" value="Reset (input)" />
</div>
<div>
<input type="button" value="Button (input)" />
</div>
<div>
<input type="submit" value="Submit (input)" />
</div>
<div>
<a class="bf-btn" href="#" title="button link" role="button">Button (link)</a>
</div>
<div>
<a class="bf-btn bf-btn--primary" href="#" title="button link" role="button">Primary button (link)</a>
</div>
</fieldset>
</div>
<div class="bf-col-6">
<h3>Buttons</h3>
<fieldset class="bf-m-b-3">
<div>
<button type="reset">Reset (button)</button>
</div>
<div>
<button type="button">Button (button)</button>
</div>
<div>
<button type="submit">Submit (button)</button>
</div>
<div>
<button class="bf-btn bf-btn--primary" type="submit">
Primary submit (button)
</button>
</div>
</fieldset>
<h3>Buttons (.bf-disabled)</h3>
<fieldset>
<div>
<button type="reset" class="bf-disabled">Reset (button)</button>
</div>
<div>
<button type="button" class="bf-disabled">
Button (button)
</button>
</div>
<div>
<button type="submit" class="bf-disabled">
Submit (button)
</button>
</div>
<div>
<button class="bf-btn bf-btn--primary bf-disabled" type="submit">
Primary submit (button)
</button>
</div>
</fieldset>
</div>
</div>
<div class="bf-row">
<div class="bf-col-12">
<h2 id="tables" class="h2--section">Tables</h2>
</div>
</div>
<div class="bf-row">
<div class="bf-col-6">
<h3>Unstyled tabular data</h3>
<table>
<caption>
Jimi Hendrix - albums
</caption>
<thead>
<tr>
<th>Album</th>
<th>Year</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Are You Experienced</td>
<td>1967</td>
<td>$1.00</td>
</tr>
<tr>
<td>Axis: Bold as Love</td>
<td>1967</td>
<td>$12.00</td>
</tr>
<tr>
<td>Electric Ladyland</td>
<td>1968</td>
<td>$1.00</td>
</tr>
<tr>
<td>Band of Gypsys</td>
<td>1970</td>
<td>$12.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Album</th>
<th>Year</th>
<th>Price</th>
</tr>
</tfoot>
</table>
</div>
<div class="bf-col-6">
<h3>Styled tabular data</h3>
<table class="bf-table">
<caption>
Jimi Hendrix - albums
</caption>
<thead>
<tr>
<th>Album</th>
<th>Year</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Are You Experienced</td>
<td>1967</td>
<td>$1.00</td>
</tr>
<tr>
<td>Axis: Bold as Love</td>
<td>1967</td>
<td>$12.00</td>
</tr>
<tr>
<td>Electric Ladyland</td>
<td>1968</td>
<td>$1.00</td>
</tr>
<tr>
<td>Band of Gypsys</td>
<td>1970</td>
<td>$12.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Album</th>
<th>Year</th>
<th>Price</th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="bf-row">
<div class="bf-col-12">
<h3>Styled responsive tabular data</h3>
<div class="bf-table-responsive">
<table class="bf-table">
<caption>
Caption goes here
</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
</thead>
<tr>
<td>row1_cell1</td>
<td>row1_cell2</td>
<td>row1_cell3</td>
<td>row1_cell4</td>
<td>row1_cell5</td>
<td>row1_cell6</td>
<td>row1_cell7</td>
<td>row1_cell8</td>
</tr>
<tr>
<td>row2_cell1</td>
<td>row2_cell2</td>
<td>row2_cell3</td>
<td>row2_cell4</td>
<td>row2_cell5</td>
<td>row2_cell6</td>
<td>row2_cell7</td>
<td>row2_cell8</td>
</tr>
<tr>
<td>row3_cell1</td>
<td>row3_cell2</td>
<td>row3_cell3</td>
<td>row3_cell4</td>
<td>row3_cell5</td>
<td>row3_cell6</td>
<td>row3_cell7</td>
<td>row3_cell8</td>
</tr>
<tr>
<td>row4_cell1</td>
<td>row4_cell2</td>
<td>row4_cell3</td>
<td>row4_cell4</td>
<td>row4_cell5</td>
<td>row4_cell6</td>
<td>row4_cell7</td>
<td>row4_cell8</td>
</tr>
<tr>
<td>row5_cell1</td>
<td>row5_cell2</td>
<td>row5_cell3</td>
<td>row5_cell4</td>
<td>row5_cell5</td>
<td>row5_cell6</td>
<td>row5_cell7</td>
<td>row5_cell8</td>
</tr>
<tfoot>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<div class="bf-row">
<div class="bf-col-4 bf-m-b-3">
<h3>Styled tabular data + zebra striping</h3>
<table class="bf-table bf-table--zebra">
<caption>
Jimi Hendrix - albums
</caption>
<thead>
<tr>
<th>Album</th>
<th>Year</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Are You Experienced</td>
<td>1967</td>
<td>$1.00</td>
</tr>
<tr>
<td>Axis: Bold as Love</td>
<td>1967</td>
<td>$12.00</td>
</tr>
<tr>
<td>Electric Ladyland</td>
<td>1968</td>
<td>$1.00</td>
</tr>
<tr>
<td>Band of Gypsys</td>
<td>1970</td>
<td>$12.00</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Album</th>
<th>Year</th>
<th>Price</th>
</tr>
</tfoot>
</table>
</div>
<div class="bf-col-8">
<h3>Styled responsive tabular data + zebra striping</h3>
<div class="bf-table-responsive bf-table-responsive--zebra">
<table class="bf-table">
<caption>
Caption goes here
</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
</thead>
<tr>
<td>row1_cell1</td>
<td>row1_cell2</td>
<td>row1_cell3</td>
<td>row1_cell4</td>
<td>row1_cell5</td>
<td>row1_cell6</td>
<td>row1_cell7</td>
<td>row1_cell8</td>
</tr>
<tr>
<td>row2_cell1</td>
<td>row2_cell2</td>
<td>row2_cell3</td>
<td>row2_cell4</td>
<td>row2_cell5</td>
<td>row2_cell6</td>
<td>row2_cell7</td>
<td>row2_cell8</td>
</tr>
<tr>
<td>row3_cell1</td>
<td>row3_cell2</td>
<td>row3_cell3</td>
<td>row3_cell4</td>
<td>row3_cell5</td>
<td>row3_cell6</td>
<td>row3_cell7</td>
<td>row3_cell8</td>
</tr>
<tr>
<td>row4_cell1</td>
<td>row4_cell2</td>
<td>row4_cell3</td>
<td>row4_cell4</td>
<td>row4_cell5</td>
<td>row4_cell6</td>
<td>row4_cell7</td>
<td>row4_cell8</td>
</tr>
<tr>
<td>row5_cell1</td>
<td>row5_cell2</td>
<td>row5_cell3</td>
<td>row5_cell4</td>
<td>row5_cell5</td>
<td>row5_cell6</td>
<td>row5_cell7</td>
<td>row5_cell8</td>
</tr>
<tfoot>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<div class="bf-row">
<div class="bf-col-12">
<h2 id="grid-system" class="h2--section">Grid System</h2>
<p>
12 columns fluid Grid System with containers, rows and columns.<br />
At 575, 768 or 991 pixels the columns could be 100% of the row's
width.<br />
The default container <code>.bf-container</code> has a
<code>max-width</code> set to 1140 pixels by default.<br />
The custom container <code>.bf-container--fluid</code> doesn't
have a <code>max-width</code>.
</p>
<p class="bf-m-b-0">
This is a default container with a
<code>bf-container--break-md</code> class and a set a columns
combinations.
</p>
</div>
</div>
<div class="grid bf-m-b-4">
<div class="bf-row">
<div class="bf-col-12">
<div class="col-wrapper">12 col</div>
</div>
</div>
<div class="bf-row">
<div class="bf-col-11">
<div class="col-wrapper">11 col</div>
</div>
<div class="bf-col-1">
<div class="col-wrapper">1 col</div>
</div>
</div>
<div class="bf-row">
<div class="bf-col-10">
<div class="col-wrapper">10 col</div>
</div>
<div class="bf-col-2">
<div class="col-wrapper">2 col</div>
</div>
</div>
<div class="bf-row">
<div class="bf-col-9">
<div class="col-wrapper">9 col</div>
</div>
<div class="bf-col-3">
<div class="col-wrapper">3 col</div>
</div>
</div>
<div class="bf-row">
<div class="bf-col-8">
<div class="col-wrapper">8 col</div>
</div>
<div class="bf-col-4">
<div class="col-wrapper">4 col</div>
</div>
</div>
<div class="bf-row">
<div class="bf-col-7">
<div class="col-wrapper">7 col</div>
</div>
<div class="bf-col-5">
<div class="col-wrapper">5 col</div>
</div>
</div>
<div class="bf-row">
<div class="bf-col-6">
<div class="col-wrapper">6 col</div>
</div>
<div class="bf-col-6">
<div class="col-wrapper">6 col</div>
</div>
</div>
<div class="bf-row">
<div class="bf-col-5">
<div class="col-wrapper">5 col</div>
</div>
<div class="bf-col-7">
<div class="col-wrapper">7 col</div>
</div>
</div>
<div class="bf-row">
<div class="bf-col-4">
<div class="col-wrapper">4 col</div>
</div>
<div class="bf-col-4">
<div class="col-wrapper">4 col</div>
</div>
<div class="bf-col-4">
<div class="col-wrapper">4 col</div>
</div>
</div>
<div class="bf-row">
<div class="bf-col-3">
<div class="col-wrapper">3 col</div>
</div>
<div class="bf-col-3">
<div class="col-wrapper">3 col</div>
</div>
<div class="bf-col-3">
<div class="col-wrapper">3 col</div>
</div>
<div class="bf-col-3">
<div class="col-wrapper">3 col</div>
</div>
</div>
<div class="bf-row">
<div class="bf-col-2">
<div class="col-wrapper">2 col</div>
</div>
<div class="bf-col-2">
<div class="col-wrapper">2 col</div>
</div>
<div class="bf-col-2">
<div class="col-wrapper">2 col</div>
</div>
<div class="bf-col-2">
<div class="col-wrapper">2 col</div>
</div>
<div class="bf-col-2">
<div class="col-wrapper">2 col</div>
</div>
<div class="bf-col-2">
<div class="col-wrapper">2 col</div>
</div>
</div>
<p>No gutters between columns (<code>.bf-no-gutters</code>)</p>
<div class="bf-row bf-no-gutters">
<div class="bf-col-2 bf-no-gutters">
<div class="col-wrapper">2 col</div>
</div>
<div class="bf-col-2 bf-no-gutters">
<div class="col-wrapper">2 col</div>
</div>
<div class="bf-col-2 bf-no-gutters">
<div class="col-wrapper">2 col</div>
</div>
<div class="bf-col-2 bf-no-gutters">
<div class="col-wrapper">2 col</div>
</div>
<div class="bf-col-2 bf-no-gutters">
<div class="col-wrapper">2 col</div>
</div>
<div class="bf-col-2 bf-no-gutters">
<div class="col-wrapper">2 col</div>
</div>
</div>
</div>
</main>
<footer>
<div class="bf-row bf-m-b-4">
<div class="bf-col-12 bf-t-center">
<div class="bf-m-b-4 bf-p-t-3">
<h2>Fork, download or contribute</h2>
<code class="bf-display-block bf-m-b-3">
$ git clone https://github.com/marcop135/bullframe.css.git
</code>
<a class="bf-btn bf-btn--primary" href="https://github.com/marcop135/bullframe.css/archive/master.zip"
role="button">Download</a>
<a class="bf-btn" href="https://github.com/marcop135/bullframe.css" role="button">GitHub</a>
</div>
<div class="bf-t-center">
<a class="bf-display-inline-block" href="#top">Back to top</a>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>