A small (Less than 2kb) CSS framework
Switch branches/tags
Nothing to show
Clone or download
andhart Merge pull request #10 from bryant1410/master
Fix broken headings in Markdown files
Latest commit 6550341 Jun 19, 2017
Permalink
Failed to load latest commit information.
css 12 column fix Jun 27, 2014
scss 12 column fix Jun 27, 2014
LICENSE Create LICENSE Dec 26, 2013
Readme.md Fix broken Markdown headings Apr 17, 2017
index.html 12 column fix Jun 27, 2014

Readme.md

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>