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!
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.
Download compiled CSS to use in your self-hosted project. This includes the following files:
ash.css-> compiled and unminifiedash.css.map-> compiled CSS mapash.min.css-> compiled and minified
These files do not include documentation or source files. Releases
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">ASH can be installed in a NodeJS project using NPM or Yarn.
npm install ash-css --saveyarn add ash-cssimport 'ash-css/dist/ash/ash.min.css';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 installAfter 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 docsAfter 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-ashAfter 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.
<html class="dark">
...
</html>Support this project and possibly other open-source projects by becoming a sponsor. Higher tier sponsor will appear here with a logo and link to your website. Become a sponsor
Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.
Code and documentation copyright 2021 the ASH CSS Authors. Code and documentation released under the MIT License.