bohemia
Version:
Yet another CSS framework. Baked with goodness of SASS, Bourbon & flexbox-based grid.
322 lines (315 loc) • 12.1 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Index</title>
<link rel="stylesheet" href="dist/bohemia.css"/>
</head>
<body>
<div class="container">
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h5>heading 6</h5>
<p>A new paragraph</p>
<button class="is-primary">Button</button>
<hr />
<div class="box">
<h1>Some stuff in the box</h1>
</div>
<hr />
<h1>Forms</h1>
<label>Name</label>
<p class="control">
<input class="input" type="text" placeholder="Text input">
</p>
<label>Username</label>
<p class="control has-icon has-icon-right">
<input class="input is-success" type="text" placeholder="Text input" value="">
<i class="fa fa-check"></i>
<span class="help is-success">This username is available</span>
</p>
<label>Email</label>
<p class="control has-icon has-icon-right">
<input class="input is-danger" type="text" placeholder="Email input" value="">
<i class="fa fa-warning"></i>
<span class="help is-danger">This email is invalid</span>
</p>
<label>Subject</label>
<p class="control">
<span class="select">
<select>
<option>Select dropdown</option>
<option>With options</option>
</select>
</span>
</p>
<label>Message</label>
<p class="control">
<textarea class="textarea" placeholder="Textarea"></textarea>
</p>
<p class="control">
<label class="checkbox">
<input type="checkbox">
Remember me
</label>
</p>
<p class="control">
<label class="radio">
<input type="radio" name="question">
Yes
</label>
<label class="radio">
<input type="radio" name="question">
No
</label>
</p>
<p class="control">
<button class="button is-primary">Submit</button>
<button class="button is-info">Cancel</button>
</p>
<hr />
<h1>Images</h1>
<figure class="image is-128x128">
<img src="http://placehold.it/256x256">
</figure>
<hr />
<h1>Notification</h1>
<div class="notification is-danger">
<button class="delete"></button>
Danger lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor sit amet,
consectetur adipiscing elit
</div>
<hr />
<h1>Tables</h1>
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
</tr>
</thead>
<tbody>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
</tbody>
</table>
<hr />
<h1>Card</h1>
<div class="card is-fullwidth">
<header class="card-header">
<p class="card-header-title">
Component
</p>
<a class="card-header-icon">
<i class="fa fa-angle-down"></i>
</a>
</header>
<div class="card-content">
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris. <a href="#">@bulmaio</a>. <a href="#">#css</a> <a href="#">#responsive</a>
<br>
<small>11:09 PM - 1 Jan 2016</small>
</div>
</div>
<footer class="card-footer">
<button class="card-footer-item">Save</button>
<button class="card-footer-item">Edit</button>
<button class="card-footer-item">Delete</button>
</footer>
</div>
<hr />
<h1>Grid</h1>
<div class="columns">
<div class="column is-one-sixth">
<p class="notification is-info">
<code class="html">is-one-sixth</code>
</p>
</div>
<div class="column">
<p class="notification is-warning">Auto</p>
</div>
<div class="column">
<p class="notification is-danger">Auto</p>
</div>
</div>
<div class="columns">
<div class="column is-one-quarter">
<p class="notification is-info">
<code class="html">is-one-quarter</code>
</p>
</div>
<div class="column">
<p class="notification is-warning">Auto</p>
</div>
<div class="column">
<p class="notification is-danger">Auto</p>
</div>
</div>
<div class="columns">
<div class="column is-one-third">
<p class="notification is-info">
<code class="html">is-one-third</code>
</p>
</div>
<div class="column">
<p class="notification is-warning">Auto</p>
</div>
<div class="column">
<p class="notification is-danger">Auto</p>
</div>
</div>
<div class="columns">
<div class="column is-half">
<p class="notification is-info">
<code class="html">is-half</code>
</p>
</div>
<div class="column">
<p class="notification is-warning">Auto</p>
</div>
<div class="column">
<p class="notification is-danger">Auto</p>
</div>
</div>
<h1>Menu</h1>
<hr />
<aside class="menu">
<p class="menu-label">
General
</p>
<ul class="menu-list">
<li><a href="#">Dashboard</a></li>
<li><a href="#">Customers</a></li>
</ul>
<p class="menu-label">
Administration
</p>
<ul class="menu-list">
<li><a href="#">Team Settings</a></li>
<li>
<a class="is-active" href="#">Manage Your Team</a>
<ul>
<li><a href="#">Members</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Add a member</a></li>
</ul>
</li>
<li><a href="#">Invitations</a></li>
<li><a href="#">Authentication</a></li>
</ul>
<p class="menu-label">
Transactions
</p>
<ul class="menu-list">
<li><a href="#">Payments</a></li>
<li><a href="#">Transfers</a></li>
<li><a href="#">Balance</a></li>
</ul>
</aside>
<hr />
<h1>Modal</h1>
<div class="modal">
<div class="modal-background"></div>
<div class="modal-container">
<div class="modal-content">
<h1>Contents of modal</h1>
</div>
</div>
<button class="modal-close"></button>
</div>
<hr />
<h1>Pagination</h1>
<nav class="pagination">
<button>Previous</button>
<button>Next page</button>
<ul>
<li>
<button>1</button>
</li>
<li>
<span>...</span>
</li>
<li>
<button>4</button>
</li>
<li>
<button class="is-active">5</button>
</li>
<li>
<button>6</button>
</li>
<li>
<span>...</span>
</li>
<li>
<button>10</button>
</li>
</ul>
</nav>
<hr />
<h1>Tabs</h1>
<div class="tabs is-boxed">
<ul>
<li class="is-active">
<a>
<span class="icon is-small"><i class="fa fa-image"></i></span>
<span>Pictures</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-music"></i></span>
<span>Music</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-film"></i></span>
<span>Videos</span>
</a>
</li>
<li>
<a>
<span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
<span>Documents</span>
</a>
</li>
</ul>
</div>
<h1>Message</h1>
<article class="message is-critical">
<div class="message-header">
Primary
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque risus mi, tempus quis placerat ut, porta nec
nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam
gravida purus diam, et dictum felis venenatis efficitur.
Aenean ac eleifend lacus, in mollis lectus. Donec sodales,
arcu et sollicitudin porttitor, tortor urna tempor ligula,
id porttitor mi magna a neque. Donec dui urna, vehicula et
sem eget, facilisis sodales sem.
</div>
</article>
<h1>Section & Footer</h1>
<section>
<footer class="footer">
<h3>Footer Text</h3>
</footer>
</section>
<h1>Progress Bar</h1>
<div class="progress-wrap progress is-progress">
<div class="progress-bar progress" style="left:50%"></div>
<div class="progress-text"> 20% </div>
</div>
</div>
<link href="https://fonts.googleapis.com/css?family=Lato|Source+Code+Pro" rel="stylesheet" lazyload>
</body>
</html>