awsm.css

It makes your HTML beautiful

Elements

There are demos of library capabilities. From skeleton to media.

If these're not enough take a look more at the end of the page.

Main

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.

What about others?

Kitty
figure with kitten for your pleasure

div isn't styled because it doesn't have semantic value (as well as span elements which aren't styled either)

But for example 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 almost have no custom styles :)

Lists

There's boring unordered list of jedi masters:

  • Obi-Wan Kenobi
  • Luke Skywalker
  • Yoda

Let's rank them!

  1. Luke Skywalker
  2. Yoda
  3. Obi-Wan Kenobi

And we also have description 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

Let's look at Apple, Microsoft & Google:

Title Revenue Number of employees CEO Founders
Apple US$ 215.639 billion 115,000 Tim Cook Steve Jobs, Steve Wozniak, Ronald Wayne
Microsoft US$ 85.32 billion 114,000 Satya Nadella Bill Gates, Paul Allen
Google US$ 74.54 billion 57,100 Sundar Pichai Larry Page, Sergey Brin
Total revenue: US$ 375.499 billion

This table looks fine on mobile. Resize browser window and check this out!

Inlines

Surprised catThe library has styles for strong, emphasized text and so on.

Please note if you insert image inside p it'll be aligned to the right side. But if you insert image outside p it'll be aligned to the center. See example below.


There are many others stylized inline tags in lib, but it would be boring to list them all.

Sleepy cat

Media

View of audio and video depends on your browser.

Code

<h2>Code formatting</h2>
<p>If you need a good syntax highlight for your code, check the <a title="Good plugins" href="plugins.html#highlightjs-prismjs">Plugins</a> section.</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 / Edge yet. Coming soon :)

But now you can star the repo, why not? ^_^

Star

MOAR!

Do you need more examples? Here they are:

  • Blog
  • Homepage
  • Project's page — just look at this site :)
  • How page looks without awsm.css? Check this out! For removing floating button just click on the link once again.
Disable CSS