Think of this like Bootstrap, but way simpler and way smaller. You use some basic HTML formatting and class names to style everything from form inputs to buttons to headers and more.
Clone the birhtree.css file into your project and load it from your header.
<link rel="stylesheet" src="birchtree.css">
<div class="container">
{ page content }
</div>
<div class="input input-text">
<span class="input-label">Email Address</span>
<input class="input-field" type="text" placeholder="hey@yo.co" name="email">
</div>
You can also create large text fields.
<div class="input input-text input-mega">
<span class="input-label">Email Address</span>
<input class="input-field" type="text" placeholder="hey@yo.co" name="email">
</div>
<div class="input input-chckbox">
<input type="checkbox"> <span class="input-label">Checkbox Stuff</span>
</div>
<div class="input input-select">
<select class="input-dropdown">
<option value="">-- Select An Option --</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="input input-upload">
<label class="input-label" for="file-upload">Upload a file</label>
<input type="file" class="file-upload" id="file-upload">
</div>
<button class="btn">Default</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-light">Light</button>
You can also make smaller or larger buttons.
<button class="btn btn-sm">Small Button</button>
<button class="btn btn-mega">Large Button</button>
Nothing special to do here, just use headings like normal.
<div class="well">
Paragraph of text goes here.
</div>
<div class="alert">
Hey, this is an alert that I think you should really care about!
</div>
Item 99+
<p>Item <span class="label">Badge</span></p>
<p>Item <span class="label label-success">Badge</span></p>
<p>Item <span class="label label-warning">Badge</span></p>
<p>Item <span class="label label-danger">Badge</span></p>
If you want to link to a few other pages, use the navigation bar element to make nicer links to your other pages.
<div class="nav">
<div class="nav-item active" aria-current="page">Home</div>
<div class="nav-item"><a href="https://google.com" target="_blank">Google</a></div>
<div class="nav-item"><a href="https://github.com" target="_blank">GitHub</a></div>
</div>
The default behavior is to center the items, but you can also left or right align the menu items.
<div class="nav nav-left">
<div class="nav-item active" aria-current="page">Home</div>
<div class="nav-item"><a href="https://google.com" target="_blank">Google</a></div>
<div class="nav-item"><a href="https://github.com" target="_blank">GitHub</a></div>
</div>
<div class="nav nav-right">
<div class="nav-item active" aria-current="page">Home</div>
<div class="nav-item"><a href="https://google.com" target="_blank">Google</a></div>
<div class="nav-item"><a href="https://github.com" target="_blank">GitHub</a></div>
</div>