awsm.css

It makes your HTML beautiful

Main blocks

awsm.css contains styles for all really useful HTML5 skeleton tags. If you open the source code of this page you'll see all of them (except article but there are styles for it too).

What about others?

Kitty
figure with kitten for your pleasure

div blocks are not styled because they don't have semantic value (as well as span elements which aren't styled either)

But quotes are really nice:

See, you not only have to be a good coder to create a system like Linux, you have to be a sneaky bastard too.

— Linus Torvalds

Yeah! They have absolutelly no custom styles :)

Lists

There's boring unordered list of jedi masters:

Let's rank them on impact on the saga and personal accomplishments!

  1. Luke Skywalker
  2. Yoda
  3. Obi-Wan Kenobi
  4. Anakin Skywalker
  5. Qui-Gon Jinn
  6. Mace Windu
  7. Ahsoka Tano
  8. Plo Koon
  9. Kit Fisto
  10. Aalya Secura

You may see list wrapped by nav in the header of this page. And we also have definition lists:

Blizzard
A howling blizzard is summoned to strike the opposing team. It may also freeze them solid.
Hidden Power
A unique attack that varies in type depending on the Pokémon using it.
Waterfall
The user charges at the target and may make it flinch. It can also be used to climb a waterfall.

Tables

For instance let's look at Apple, Microsoft & Google:

Comparison of IT giants
TitleRevenueCEOFounders
AppleUS$ 182.795 billionTim CookSteve Jobs, Steve Wozniak, Ronald Wayne
MicrosoftUS$ 93.58 billionSatya NadellaBill Gates, Paul Allen
GoogleUS$ 66.001 billionLarry PageLarry Page, Sergey Brin
Total revenue: US$ 342.376 billion

Inlines

awsm.css contains many styles for inline elements. For example omfg is abbreviation which means “Oh my fucking God!”. It's one of the most popular WWW abbreviation.

Of course the library has styles for strong and emphasized text. It doesn't have something special for b and i because in HTML5 they are only semantical elements. So they are same as strong and em.

If some part of the text is outdated you can delete this and insert actual version. You also can mark important thought.

Surprised catPlease note if you insert image inside p it'll be aligned to the right. And all paragraphs after it will flow around the picture on the left. But if you insert image outside p it'll be aligned to the center. You may see example below.


Above you've seen examples of using tags for quoting (blockquote & cite). There is another one tag. It's q. Imagine that we hear the song: Soft Kitty, Warm Kitty, little ball of fur.. Happy Kitty, Sleepy Kitty, purr, purr, purr.

And don't forget about attribute lang of this tag. Quotes depend on it. For instance in Russian quotes are different: Теплый пушистый котенок спит, свернулся в клубочек и мурчит.

Sleepy cat

Media

View of audio and video depends on your browser. You can see examples below.

Other elements are coming soon

Forms

Mars vacation program

Be first

Code formatting

sub and sup are supported too: tn = n3.

Also it has support of kbd: Ctrl+F; samp:

[22:13:57] Starting 'scss'...
[22:13:57] Finished 'scss' after 2.16 ms
[22:13:57] Starting 'css'...
[22:13:57] Finished 'css' after 1.99 ms
[BS] 1 file changed (awsm.min.css)

..and the block of code:

<h2>Code formatting</h2>
<p><code>sub</code> and <code>sup</code> are supported too: <var>t<sub>n</sub> = n<sup>3</sup></var>.</p>

If you need a good syntax highlight for your code, check the Plugins section.

Misc.

Show me the magic

This simple spoiler does not work in Internet Explorer and Firefox yet. Coming soon :)