Introduction

On this page

# Meet ASH

ASH (Accessibly Styled HTML) is an accessible CSS-only semantic framework with a built-in dark mode and a plethora of utilities. No JavaScript required! ASH makes it easy and quick to build elegant front ends.

ASH will always be modern and will evolve with the web. ASH works in all of the following modern browsers on desktop and mobile:

  • Chrome
  • Firefox
  • Microsoft Edge
  • Opera
  • Safari
  • Browsers build on the WebKit, Blink, or Gecko engines

Internet Explorer does not meet modern standards and will not be supported. It's 2021, time to switch...

# Why ASH?

ASH was created to be a classless, semantic, and accessible framework with built-in dark mode and utilities. Other popular frameworks are not classless or accessible and require you to add classes to a good part of your markup. You needn't worry using classless markup since you shouldn't mix multiple frameworks and since ASH works with any JavaScript library.

Features

  • Accessible color pallete with 99 colors
  • Classless and symantic markup
  • Dark mode that's easy on the eyes
  • Mix of flat, fluent, and material design
  • Mobile-first responsive flexed based layout
  • Unique OMU (Object Modifier Utility) class naming
  • Utilities with many responsive variants
  • No JavaScript and only 20-25kB when compressed

Object Modifier Utility

Other generic frameworks are a great starting point but lack utilities and usually requires creating additional custom styling on top of them. Utility frameworks are also great but are very large with many unnecessary utilities for every single breakpoint and have no built-in default styling. ASH is a blend of these types of frameworks and is easy to customize and optimize.

ASH uses unique object class naming and overrides with modifiers and utilities. Objects, modifiers, and utilities are easily distinguishable in your markup and are easy to understand what they do. This OMU structure work in the following way:

Specificity: object -> -{modifier} -> --{utility}

Object
Either a classless element or classed component. Objects will have default styling and will be symantic where possible.
Modifier
Class that can override the default styling or layout of an object, but is also unique to that object.
Utility
Class that can override any part of your markup, are global, and are not unique to any object.
<button class="-primary -large --uppercase">ASH CSS</button>
<button class="btn btn-primary btn-lg text-uppercase">Bootstrap</button>
<button class="button is-primary is-large is-uppercase">Bulma</button>
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded uppercase">Tailwind</button>