Getting started

Usage, installation, licensing and browser support

Assembler CSS is a modern UI framework designed to be highly performant on both desktop and mobile devices while providing a full range of features that could hardly be matched by a static CSS framework. We provide out-of-the-box support for media queries, element states, custom selectors, pseudo-elements, and a powerful composition mechanism.

We provide support for custom elements and have special considerations regarding devices with limited connectivity. You don’t have to worry anymore about the size of your CSS files since the framework is only ~ 8kB in size (gzip), and everything else is generated just-in-time.

Playing nice with others is one of our core guiding principles. Assembler CSS can be easily integrated with any design system or used to augment your favorite CSS framework.

Installation

Incorporating Assembler CSS within your project is a trivial task. Just add the below script tag inside the head section of your webpage, and you are good to go!

<script src="https://unpkg.com/@asmcss/assembler/dist/assembler.min.js"></script>

You could also install Assembler CSS as a npm package by issuing the following command:

npm install @asmcss/assembler

Or, if you are a Yarn user

yarn add @asmcss/assembler

Usage

The first thing you should do before creating a UI component is to choose a color palette. For example, the color palette from Material Design is always a great choice.

Now you can define reusable mixins and create your first UI components with the help of Assembler CSS.

:root {
    --reset--mixin: "appearance:none; outline:none; decoration:none";
    --button-color--mixin: "bg-color:@${0}-500; bg-color.hover:@${0}-600;\
                            bg-color.active:@${0}-700; bg-color.disabled:@${0}-500; \
                            ring.focus:4px @${0}-300";
    --button--mixin: "inline-flex; ^reset; ^button-color:${0=grey}; \
                      justify-content:center; align-items:center; \
                      cursor:pointer; cursor.disabled:not-allowed; py:4; px:6; \
                      opacity.disabled:50%; transition:all 0.25s; \
                      border; color:white; uppercase; radius";
}

The newly created mixin can be applied to as many elements as you want.

<div x-style="grid; gap:1rem; grid-rows:1; grid-cols:1; sm|grid-cols:3">
    <button x-style="^button">Submit</button>
    <button x-style="^button:red">Submit</button>
    <button x-style="^button:blue">Submit</button>
    <button x-style="^button:indigo; radius:pill">Submit</button>
    <button x-style="^button:amber; color:black">Submit</button>
    <button x-style="^button:indigo" disabled>Submit</button>
</div>

License

Assembler CSS is licensed under the permissive Apache License, Version 2.0.

Browser support

Assembler CSS is designed to run on the latest stable versions of all the major browsers: Chrome, Edge, Firefox, and Safari. We do not support any version of IE.

We have conducted intensive manual testing on the following operating systems and browsers:

  • Ubuntu Linux 20.04: Chrome and Firefox
  • Windows 10: Edge, Chrome, and Firefox
  • MacOS Big Sur: Safari, Chrome, Edge, and Firefox
  • Android (tablet and mobile): Chrome
  • iOS 14 (tablet and mobile): Safari and Chrome

Road to v1.0.0

  • Basic functionalities
  • Add support for states
  • Add support for scopes
  • Add support for mixins
  • Add support for custom selector attribute
  • Add support for custom elements
  • Add automated tests, so we can make sure we don’t mess up things in future releases
  • Cleanup & prepare stable release