Home
GitHub
About Me

Birchtree.css

Mocking up simple personal pages or test sites for your business typically mean using zero, to close to zero styling, and moving on because "it's just a test site, who cares?" Oh, and these pages usually look like trash on mobile. This is all reasonable, it doesn't need to be this way!

Birchtree.css is a small CSS package you can use to make those sites look good with very little effort. You could use this for a full, public website, but it's lacking a ton of features, so you'd have to build all that out yourself.

Yes, something like Bootstrap does this, but (a) I don't love how Bootstrap looks out of the box, and (b) our aim is to have as little code as possible. Just because I don't see the extent of Bootstrap, doesn't mean it's not overkill for some things.

Usage

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.

Step 1: Import birchtree.css

Clone the birhtree.css file into your project and load it from your header.

<link rel="stylesheet" src="birchtree.css">

Step 2: Use the below formatting to get the styles

Contents

Layout

This ain't Bootstrap, so don't look to this to do advanced styling for you, but you can use the container class to hold all parts of your page. This simply constrains the width and centers everything on the page. 
<div class="container">
    { page content }
</div>

Form Inputs

Text

Email Address 
<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.

Large Text Field 
<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>

Checkbox

Check this for fun 
<div class="input input-chckbox">
    <input type="checkbox"> <span class="input-label">Checkbox Stuff</span>
</div>

Select

<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>

File Upload

<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>

Buttons

<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>

Headings

Nothing special to do here, just use headings like normal.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Wells

Lorem ipsum dolor sit amet, consectetur adipiscing 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, sunt in culpa qui officia deserunt mollit anim id est laborum. 
<div class="well">
    Paragraph of text goes here.
</div>

Alerts

Hey, this is an alert that I think you should really care about!
Hey, this is an alert that I think you should really care about!
Hey, this is an alert that I think you should really care about!
Hey, this is an alert that I think you should really care about! 
<div class="alert">
    Hey, this is an alert that I think you should really care about!
</div>

Labels

Item Badge

Item Badge 2
Item Another longer badge

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>

Navigation

If you want to link to a few other pages, use the navigation bar element to make nicer links to your other pages.

Home
Google
GitHub
<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.

Home
Google
GitHub
<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>
Home
Google
GitHub
<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>