Simple CSS library for semantic HTML markup

  • By Igor Adamenko
  • Last update: Dec 30, 2022
  • Comments: 11

awsm.css

npm version

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

Demo picture

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:

Got questions? Any troubles?

If you have questions or general suggestions, don't hesitate to submit a new GitHub issue.

Github

https://github.com/igoradamenko/awsm.css

Comments(11)

  • 1

    Работа стилей относительно родителя

    Игорь, привет!

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

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

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

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

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

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

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

    Надеюсь, когда-нибудь звезды сойдутся и она появится.

  • 2

    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?

  • 3

    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 для примера)
  • 4

    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.

  • 5

    Idea: Visualize description of repo purpose

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

    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 👍

  • 6

    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

  • 7

    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!

  • 8

    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.

  • 9

    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

  • 10

    Add max-width to figure element

    This prevent that figure element with width bigger than main element break the layout.

    To see this issue:

    1. Go to cat.jpg in Elements page
    2. 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>

    issue

  • 11

    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 !

Popular Tag

Related