Ash-css NPM | npm.io

Accessible CSS-only semantic framework with a built-in dark mode. No JavaScript required!

ASH is a responsive flex-based framework using only CSS. ASH combines classless semantic elements with classed components to build awesome front-ends. ASH requires no JavaScript and weighs in at ~20kb compressed with Brotli!

This project can be used in production, as it is currently being used is several projects, but please be aware that it is currently in "beta". Once version 1.0.0 is released this message will be removed. Help us find bugs or other issues!

Get ASH CSS

There are a few ways to get ASH CSS. You can download a compiled version, use our CDN, with NPM, or clone and build from the source.

Compiled CSS

Download compiled CSS to use in your self-hosted project. This includes the following files:

ash.css -> compiled and unminified
ash.css.map -> compiled CSS map
ash.min.css -> compiled and minified

These files do not include documentation or source files. Releases

CDN via jsDelivr

Use the code below to drop-in ASH CSS to your project from our CDN. The CDN will be cached, minified, and gzipped.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ash-rocks/ash-css@0.4.0/dist/ash/ash.min.css">

NPM/Yarn

ASH can be installed in a NodeJS project using NPM or Yarn.

npm install ash-css --save

yarn add ash-css

import 'ash-css/dist/ash/ash.min.css';

Source

Clone ASH CSS from source for when you want to contribute or customize to fit your needs. The source includes the docs you see here and can be used as a playground for customization.

git clone https://github.com/ash-rocks/ash-css.git
cd ash-css
npm install

Docs

After you clone ASH CSS from source code you can run the docs locally. Local docs are totally offline and will be available at http://localhost:8080/

npm run docs

Building

After you clone ASH CSS from source code you can build your own customized version. All built files will be available in dist/ash

npm run build-ash

Using ASH CSS

After building from source, downloading the compiled release, or using the CDN just include the minified version in the head of your HTML. Use the below starting template:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>YOUR APP</title>
    <link rel="stylesheet" href="/path/to/ash/css/or/cdn">
  </head>
  <body>
    ...
  </body>
</html>

You can use the included dark mode my adding the dark class to the html tag. This can be toggled by using JavaScript to add or remove the class from the html tag or by watching the prefers-color-scheme media query.