# About

Setting things that we all usually set. box-sizing: border-border is our friend. html and body have to be fusioned. Click to the button at right top to see the difference between no Basesign.css used and when it's used.

We're human and we want to make things as elegant as is it possible.

# Download

• Install with Bower, it's quick and works perfectly:bower install basesign
• Clone the repo to get the file you need :git clone https://github.com/stabla/Basesign.git

# Install

<link rel="stylesheet" href="basesign.css">

<meta name="viewport" content="width=device-width, initial-scale=1">

# Size

We use h1or class="h1" to define heading 1. You have 5 level of heading : h1, h2, h3, h4, h5. You can use it as tags, or with class, as writted precedently.

For normal size, you have the choice to not writting nothing, but you can also write class="normal-h" to set to default size headings tags. You have also class="normal-s" to set normal text size.

<div class="normal-h normal-s">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3> 
<h4>h4</h4>
<h5>h5</h5>
<p>The quick brown fox jumps over the lazy dog.</p>
</div>

Same logic as default size, you have class="bigger-h" to set bigger heading. Or class="bigger-s" to set bigger size to text.

<div class="bigger-h bigger-s">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3> 
<h4>h4</h4>
<h5>h5</h5>
<p>The quick brown fox jumps over the lazy dog.</p>
</div>

Finally, you have class="little-h" and class="little-s".

<div class="little-h little-s">
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3> 
<h4>h4</h4>
<h5>h5</h5>
<p>The quick brown fox jumps over the lazy dog.</p>
</div>

# Inputs

Because default input's appearance are still ugly, there's something :

<input type="text" placeholder="Username">
 <input type="submit" value="Next" disabled="disabled">

<input type="date">
 <button disabled="disabled"> Button </button>

<textarea  rows="3" placeholder="Write something interesting" style="margin-bottom: 8px"></textarea><br>
If agree, check it : <input type="checkbox"> or <input type="radio"><br>
<input type="button" value="Next" disabled="disabled" style="float: right">
                

# Frequently used classes

I like to use class="hidden" to make an element display: none, so there's it, you have class="hidden" to make an element hidden.

At the same way, there's .ilb as display: inline-block.

For better readibility, you have class="paragraph" to make a paragraph better, with a line-height of 155%.

# Push more if you want

If you have something to add, to delete, or any tips to give, you can push a request on GitHub.

# Design tips