H1 - Simple css framework

Buttons

Types

Link without class <a href="#">Link without class</a>

Link without underline <a href="#" class="without-underline">Link without class</a>

Button link <a href="#" class="btn">Link with class</a>

Button tag <button>Button tag</button>

Group

Need research

Size

They adjust their sizes accord the parent, like:

Button tag <small><button>Button tag</button><small>

Button tag <h6><button>Button tag</button><h6>

Styles

Classes like btn-primary affect all type of buttons.

btn-primary <a href="#" class="btn btn-primary">btn-primary</a>

btn-success btn-info btn-warning btn-danger

The class btn-outline change the style of the button.

btn-outline <a href="#" class="btn btn-outline">btn-outline</a>

The class btn-rounded change the border-style of the button.

btn-rounded <a href="#" class="btn btn-rounded">btn-rounded</a>

Mix to have different buttons

Hello! <a href="#" class="btn btn-outline btn-rounded btn-warning">Hello!</a>

Form

Text inputs

Input text <input type="text">

Textarea <textarea><textarea>

Select Choose one Hello World

<select>
	<option disabled="" selected="">Choose one</option>
	<option>Hello</option>
	<option>World</option>
</select>

Option Inputs

Tip: Use the checkbox/radio and the label inside a label tag.

Checkbox Checkbox <input type="checkbox">

Radio Radio <input type="radio">

Ordered list

1. First item
2. Second item
3. Third item

Unordered list

• First item
• Second item
• Third item

Unstyled list

• First item
• Second item
• Third item

<ul class="unstyled">
	…
</ul>

Tooltips (from PrimerCSS)

class="tooltipped tooltipped-n" aria-label="This is the tooltip."

class="tooltipped tooltipped-ne" aria-label="This is the tooltip."

class="tooltipped tooltipped-e" aria-label="This is the tooltip."

class="tooltipped tooltipped-se" aria-label="This is the tooltip."

class="tooltipped tooltipped-s" aria-label="This is the tooltip."

class="tooltipped tooltipped-sw" aria-label="This is the tooltip."

class="tooltipped tooltipped-w" aria-label="This is the tooltip."

class="tooltipped tooltipped-nw" aria-label="This is the tooltip."

Utilities

Right & Left

Float to the element. .left & .right

Clearfix

Adjust de container size with elements with floats inside.

Use the class .clearfix if you have this little issue.

No wrap

Don't let the line break, useful using in links with icon, when the icon gets in first line or the opposite

.no-wrap get the text in line.

Text align

.text-left, .text-center and .text-right will align the text.

Margin & Padding

.margin & .padding add margin or padding to all sides.

.margin-top, .margin-right, .margin-bottom, .margin-left
&
.padding-top, .padding-right, .padding-bottom, .padding-left

add margin or padding to selected side.

.margin-h, .margin-v & .padding-h, .padding-v add margin vertically or horizontally.