Simple CSS library for semantic HTML markup

Igor Adamenko

Last update: Dec 30, 2022

Overview

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.

Demo

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:

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.

Comments

Работа стилей относительно родителя
Игорь, привет!

Отличная библиотека, после использования которой очень быстро просыпается аппетит.

В текущей реализации стили начинаются от корня документа. Хотелось бы иметь возможность использовать ее для указанного контейнера.

Какие могут быть варианты реализации такой задачи?

Руками убрать ссылки

Использовать ПостЦСС для автоматической замены, при получении обновлений

Сделать альтернативную версию библиотеки, чтобы не было привязки к корню документа

Руками быстро, но необходимо делать при каждому обновлении.

ПостЦСС правильно, но усложняет комбайн.

Альтернативная версия выглядит самым клевым решением.

Надеюсь, когда-нибудь звезды сойдутся и она появится.
enhancement
opened by avlysenko 7
Support for Dark Mode

I'd like to use pearl-lusta theme by default, but if the device has dark mode enabled, I'd like to use big-stone theme. Do you know how I can easily configure that?

opened by alexspark 5
Font styling and some elements
Также я брал за основу твой шаблон для своего фреймворка для сборки email рассылок https://github.com/dudeonthehorse/kilogram

Главная проблема PT sans - он прекрасен для текстовых и табличных данных, но вот кнопки с ним получаются достаточно унылыми

В итоге я остановился на более хитром семействе стоковых шрифтов: font-family: '-apple-system', helvetica, arial, sans serif Что дает условную нативность на каждой из возможных платформ при использовании беззасечковых шрифтов.

Получился вот такой вариант:

https://yadi.sk/d/CbQwoMgW3DDcmG

https://yadi.sk/d/r61RlO9n3DDccd

Что также хотелось бы видеть в твоей реализации:

CSS Grid (25%, 33%, 50%, 66%, 75%). Хотя грид можно подглядеть и здесь https://github.com/dudeonthehorse/milligram

Для грида можно использовать полифилы из https://github.com/zurb/inky

Кнопки: полноцветная, прозрачная с рамкой, прозрачная без рамки

Более богатый инструментарий таблиц для составления инвойсов (взять хотя бы https://www.getharvest.com/resources/invoice-template-pdf для примера)
opened by dudeonthehorse 5
Add Styling for Disabled Buttons

hi @igoradamenko

first of all: thank you for awsm.css! it is the perfect solution for simple, nice looking html rendering without the need of any fancy, huge css library. ❤️

this pull request contains a proposal for rendering disabled button elements so that the user can distinguish them from enabled ones.

i added a demo to the "Misc." section of the documentation. feel free to integrate the change if you like.

cheers, @swissmanu

ps. i was not sure if you want contributions to contain builded versions of the change... let me know if you would prefer this.

opened by swissmanu 4
Idea: Visualize description of repo purpose

It'll be easier to understand what your code do with "Before & After" image like this:

Also you could highlight that both images use same html code but second one (which is "After") have awsm.css stylesheet

Nice repo and idea though 👍

opened by eko24 4
Fluid typography with attention to vertical rhythm

Igor,

I've incorporated your feedback and added more refinements, as well as fixed a few more bug. I've added a whole new [hidden] page at http://localhost:3000/typography.html, which showcases the implementation details and discusses some design ideas. Let me know what you think.

Voon

opened by vwong 4
Enable/disable toggle on Elements page does not work on Firefox

In Firefox 82.0 (64-bit) on Linux, viewing demo site which is running v3.0.7 as of this writing, the toggleToggler function does not work as intended.

The button shows up, but styles remain in effect.

No errors in JS console.

Feature works in current Chrome/Chromium on the same machine.

p.s. Very cool project!

opened by pbx 3
Support prefers-color-scheme out of box

Mozilla Docs

Web.dev docs

CSS has special feature to set css properties of website automatically detecting OS/Browser's color-scheme.

I have noted that you have 8 color themes. It would be greatful if you create new automatic theme with white theme for light mode and black theme for dark mode which uses prefers color scheme . Those themes should make website white if browser is in light mode and black if browser is in dark mode.

opened by ghost 3
WordPress theme: anatta

Hi!

This is a suggestion to add the WordPress theme "anatta" that uses awsm.css to the list of examples: https://github.com/Rahmon/anatta

Thanks

opened by strauhmanis 3
Add max-width to figure element
This prevent that figure element with width bigger than main element break the layout.

To see this issue:

Go to cat.jpg in Elements page

Set figure element width to 1200px.

<figure style="width: 1200px;"><img src="images/cat.jpg" alt="Kitty"><figcaption><code>figure</code> with kitten for your pleasure</figcaption></figure>
opened by Rahmon 3
provision for 1 class name, hear me out ! [enhancement]

An excellent use case for this library is for markdown-rendered pages, which is something you use if for too, however, I only want to style a certain section of my site styled with awsm.css (the markdown rendered section), everything else, I wanna style without awsm.css, using some custom css

I've tried the alternative of loading markdown-only content in iframes and then loading it on my site, and iframes have alot of styling related issues, and its really not good tbh.

moreover, I wasn't able to find a suitable library that actually does the work of styling everything underneath a div element with something like a "markdown-rendered-content" class, so that would actually be pretty neat.

Thanks in advance for considering this !

opened by therealadityashankar 2

Releases(v3.0.0)

v3.0.0(Jan 24, 2019)
Added

Themes support, and 7 themes out of the box!

Sealed styles support. Now you can use awsm.css without affecting global namespace.

Styles for form, fieldset, input, textarea, select, button`, etc. Forms support is here!

Changed

Maximum font size (20px → 18px).

Anchor sign (• → §).

Removed

Serif fonts.

Retina borders.

abbr underlining.

All transitions.

Dev changes

Moved to Dart Sass instead of Node Sass.

All deps were updated.

Added 'start' npm script.

Removed useless gulp plugins.

Add precommit linting & fixing issues in SCSS.

Theme changing on demo page.

Node 6 support was removed.

Read more about this release
Source code(tar.gz)
Source code(zip)
v2.1.0(Jan 14, 2017)
Added:

Rems for font size & page width (#76).

Margins for aside.

Styles for h4, h5, h6 (#81).

Support for header anchor links.

More demos (#80).

“How to contribute” guide.

Fixed:

Code block right border size.

Source code(tar.gz)
Source code(zip)
v2.0.0(Jan 7, 2017)
Added: - Fluid typography (#12). - Scroll indicator for code blocks (there is dark border on a side if code overflows block). - Support of `picture` tag. - Background color for selection. - Styles for spoiler (`details`, `summary`). - More demos: blog, homepage (#14). - PostCSS support. - Stylelint (#10). - Travis CI integration (#20). - Separated task in Gulp for linter. - Pug instead of HTML for development (#70). - Editorconfig. - Changelog (#16).
Changed:

All library is refactored.

More clearly styles for tables and code / code-blocks.

Header styles.

All headers (h1..h6) are bold now.

Variables notation.

Replaced gulp-minify-css with gulp-csso.

Removed:

Forms support.

Useless examples.

Source code(tar.gz)
Source code(zip)
v1.2.0(Apr 3, 2016)
Added: - #9 Adaptive fonts & forms.
Fixed:

#7 Non-input element in a form does not have a margin-bottom.

#8 Checkbox element inside of label are blocks.

Source code(tar.gz)
Source code(zip)
v1.1.0(Mar 24, 2016)
Added: - Responsive tables and forms.
Fixed:

iOS buttons/inputs appearance.

Source code(tar.gz)
Source code(zip)
v1.0.0(Mar 20, 2016)

It works. Source code(tar.gz)
Source code(zip)