Awesome
Bijou
A beautiful CSS framework under 2kb (minified and gzip)
Example: http://andhart.github.io/bijou/
If you want to contribute ideas or see the roadplan, there's a Trello: https://trello.com/b/2Gklk2lG
Browser Support: Checked and tested in the latest Firefox, Safari, Chrome, and IE9+.
Navbar:
<div class='navbar fixed'>
<div class='container'>
<h4 class='pull-left'>Bijou</h4>
</div>
</div>
or a navbar with navigation:
<div class='navbar fixed'>
<div class='container'>
<h4 class='pull-left'>Bijou</h4>
<ul class='pull-right'>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
</ul>
</div>
</div>
Add a fixed
class to the navbar to make it fixed to the top of the screen (Make sure you also add margin-top:50px
to the body if you make it fixed).
Table:
<table class='table'>
<thead>
<tr>
<th>Test</th>
<th>Test</th>
<th>Test</th>
<th>Test</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>
This will style just a plain table. If you want it striped, add the table-striped
class, or if you want it bordered, the table-bordered
class.
Buttons
<button class='button danger large'>Test</button>
<button class='button primary large'>Test</button>
<button class='button success large'>Test</button>
<button class='button danger small'>Test</button>
<button class='button primary small'>Test</button>
<button class='button success small'>Test</button>
Large buttons have the large
class, while small have the small
class. Easy, isn't it?
Alerts
<div class='alert primary'><p>Test</p></div>
<div class='alert success'><p>Test</p></div>
<div class='alert danger'><p>Test</p></div>
Grid
Bijou has a responsive 12 column grid.
For an example, the following will create a one column span and and a nine-column span:
<div class='row'>
<div class='span one'>ONE</div><div class='span nine'>NINE</div>
</div>