Basesign.css activated

Basesign.css

Setting better default CSS to make web more elegant.

Optimal size, handle spacing, readable website, normalizing site.

# 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

Download v1.0
OR

# Install

Put this in your head :
<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.

DEFAULT SIZE PREVIEW CODE

h1

h2

h3

h4

h5

The quick brown fox jumps over the lazy dog.

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

BIGGER PREVIEW CODE

h1

h2

h3

h4

h5

The quick brown fox jumps over the lazy dog.

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

LITTLE PREVIEW CODE

h1

h2

h3

h4

h5

The quick brown fox jumps over the lazy dog.

# Inputs

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

Example #1 PREVIEW CODE
Example #2 PREVIEW CODE
Example #3 PREVIEW CODE

If agree, check it : or

# 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

  • Newsletters with columns will look better if you use the Justified Alignment.
  • Make sure you don’t create rivers of white space though.
  • Use Italics and Bold to point out areas of interest or draw quick reference to information.
  • Use color for emphasis. Remember, reds draw the most attention if used correctly. It is amazing what one spot of red can do for an ordinary ad.
  • A website with bad font will be ugly website. But it’s about words too.
  • Treat text as content.
  • Use good typography.
  • Believe “less” is more.
  • Decorate, but not in abusive way.
  • Treat text as UI.
  • Go for simplicity and usability.
  • For a good readibility, measure amount of characters on a line, 50-80 characters is the best for readibility.
  • “God is in the detail.” - Ludwig Mies van der Rohe
  • “Make things as simple as possible but no simpler.” - Albert Einstein