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.
Contents
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?
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.
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!
- Luke Skywalker
- Yoda
- 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 |
| 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
The 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.
Media
View of audio and video depends on your browser.
Forms
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 doesn't work in Internet Explorer / Edge yet. Coming soon :)
But now you can star the repo, why not? ^_^
MOAR!
Do you need more examples? Here they are:
- Blog
- Simple homepage
- My own 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.
- Find more examples on GitHub