Awsm.css Save Abandoned
Simple CSS library for semantic HTML markup
awsm.css
awsm.css is a simple CSS library for semantic HTML, which doesn't require classes, ids, attributes, etc.
Just start to create page with HTML5 tags, link awsm.css and get simple, clean and beautiful markup.
Check out examples or sample markup here.
Previous versions
Current master points to v3 of the library.
If you want to see or download previous versions, here they are:
Usage
<link rel="stylesheet" href="awsm.min.css">
Also don't forget to add viewport info to the <head> for adaptation to mobile. Like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It's also available as the npm package, which supports PostCSS API.
Download
Download the latest version here — awsm.css.
Minified — awsm.min.css (≈3 Kb after gzip).
unpkg
Also you can use unpkg for link latest or exact version of library:
<link rel="stylesheet" href="https://unpkg.com/awsm.css/dist/awsm.min.css">
Get more information about the unpkg CDN on unpkg.com.
PostCSS API
If you install npm package, you can use library as PostCSS plugin:
const postcss = require('postcss');
const awsm = require('awsm.css');
postcss([awsm({ theme: 'tasman', sealed: true })]).process('a {color: red}').then(result => {
console.log(result.css); // awsm.css prepends your CSS
});
For more information about options check out docs.
Themes
Current version contains some themes that you can use.
Check them on the demo page.
Dark Mode Support
If you need a “Dark Mode” support, just inject two CSS files and use media queries:
<!-- CSS for users with dark mode -->
<link rel="stylesheet" href="awsm_theme_big-stone.min.css" media="(prefers-color-scheme: dark)">
<!-- CSS for users without dark mode -->
<link rel="stylesheet" href="awsm_theme_pearl-lusta.min.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)">
(See #103 for other solutions.)
Why?
I have to create simple pages in my daily work. Sometimes it's compiled Markdown and sometimes it's pure HTML. I'd like to make them more beautiful without additional classes, ids, etc. So I did it.
License
awsm.css licensed under the MIT.
The MIT License places almost no restrictions on what you can do with this lib. You are free to use it in commercial projects as long as the copyright is left intact.
Examples
Website for this repo uses awsm.css. Check this out. Also there are examples of blog and homepage built with awsm.css.
And I use the lib for my own website.
If you use the library in your project, feel free to open issue and we will add your url in this list :)
v3
Short list of projects that use v3 of the library:
- React Coroutine. Documentation.
- Anatoly Gulyaev. Blog.
- Minicurso PWA. Course page.
- Alexander Pushkov. CV.
- Markus Ritzmann. Homepage.
- Image Search Abstraction Layer. Demo.
- File Metadata Microservice. Demo.
- Timestamp Microservice. Demo.
- Isomorpic Rendering. Demo.
- and so on..
v2
List of projects that use v2 of the library:
- addmeto. Telegram feed.
- Yandex. Telegram feed.
- toberta. Telegram feed.
- tele.ga. Service for exporting Telegram feed to blog.
- botan. Documentation.
- A.Ulizko. Blog.
- anatta. WordPress theme.
- Kostantin. Blog.
- Masashi Yoshikawa. CV.
- MONETOCHKA SIGNS. Fun.
- illustrarium.github.io. Vacancy.
Got questions? Any troubles?
If you have questions or general suggestions, don't hesitate to submit a new GitHub issue.
Open Source Agenda Badge
