asmcss / assembler

A modern UI framework

---

Assembler CSS

Docs — Twitter — Installation

Just-in-time CSS, unlimited possibilities

---

Assembler CSS is a highly performant utility-first framework that allows you to quickly prototype and build modern websites and UI components without the need to install and maintain complex software.

Usage

Incorporating Assembler CSS within your project is a trivial task. Just add a script tag before the head closing tag, and you are good to go!

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

Now you are ready to try out Assembler CSS and write your first UI component.

<div x-style="max-w:80; mx:auto; radius:md; e:2; e.hover:4; transition:all 0.25s; cursor:pointer">
    <img x-style="block; max-w:100%; w:100%; h:auto; radius-top:md" src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=80">
    <div x-style="p:4">
        <div x-style="text:lg; color:black; font-weight:700">Fresh veggies</div>
        <div x-style="text:sm; color:silver; font-weight:400">600g</div>
        <p x-style="pt:4">
            Any veggie can belong on your menu, so choose what you love and use the rest
            for future meals and snacks you can enjoy in flavorful ways.
        </p>
    </div>
</div>

Documentation

The full documentation for Assembler CSS can be found here.

Installation

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

npm install @asmcss/assembler

Or, if you are a Yarn user

yarn add @asmcss/assembler

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 releases

assembler's Issues

Assembler CSS Play?

It would be really cool to have a live play, much like TailwindCSS's play, this would greatly speed up a lot of the development process for us devs!

Explain the way of working

Good day, please do not answer the question, on the official git I was not answered by closing the branch.
I have read the documentation many times, and I do not understand how to do it
How in asmcss to do this -

there is a structure
<div class="class1"><div class="class2"><div class="class3">hello world</div></div></div>

how do i make it change color of text in class3 when hovering over class1

I can do it via normal css like this

.class1:hover .class3 {
color:tomato
}

Thanks in advance for your feedback

[bug] Render bug

Good day, I noticed an unpleasant thing (bug). If you translate the site through a translator (which is in the browser), all the styles fly off immediately...

Turn on discussions

It would be really nice to be able to use GitHub Discussions, to turn them on go into the repository settings and find the discussions section:

x-style is not a valid HTML5 attribute

Using an x-style (and x-apply) attribute fails HTML5 validators.

Custom attributes needs to start with data-, which is what is used for the configuration on the script tag.

Suggestion: add support for data-x-* attributes (and support both kinds of attributes).

Ideas

Hi! I really love this project and I had a few ideas for it:

• Lighten and darken colors? E.g. lighten(@${0}, 20) (out of 100)
• Built in color palette (It's sort of annoying to import the material design one every time
• <x-style> tag supporting css-like syntax something like this:

/* It'd  be cool to support multiple properties on one line */
mixin:button {
	inline-flex; 
	^reset; 
	^button-color:${0=grey};
	justify-content:center; align-items:center;
	cursor:pointer;
	cursor.disabled:not-allowed;
	py:4; px:6;
	/* Multiple on one line */
	opacity.disabled:50%; transition:all 0.25s;
	border; 
	/* Mostly formatted like CSS */
	color:white; 
	uppercase; 
	radius
}
/* Also supporting normal syntax CSS */
button {
	^button:yellow;
    color: black;
}

• A JavaScript API

Assembler.compile(css_code);//Would return the actual CSS generated, not the classes and variables but the actual CSS that would do the identical thing.

Assembler.addMixin("mixin name", "Props and stuff here");

Assembler.addShorthand("bgc", "background-color"); /* Now bgc maps to background-color */

Included plugins?

Wouldn't it be cool to have included plugins, these could be in a new plugins folder and would be in JS format. There could also be a plugins.json somewhere with plugin descriptions, names and filenames. This would allow the community to create plugins easily, and possibly have them incorporated into the main project! It would also keep plugins organized as the community continues to grow, and more plugins are developed

Question

Good day, I have read the documentation several times. But I can not understand this

We have a structure
<div class="class1"><div class="class2"><div class="class3">hello world</div></div></div>

how can I use your framework to change class2 on hovering over class1 e.g. the same "color"

Plugins development

Hello!

I can't find any examples of Plugins Development for ASMCSS as it is for Tailwind CSS.
For e.g. how should I develop and include such kind of plugin https://github.com/tailwindlabs/tailwindcss-line-clamp for ASMCSS? via separated js file ? js bundle ? css with mixin?

How to do this in the right way?

SM breakpoint applied for all breakpoints

I can't understand why sm|mb:2; applied for all breakpoints?
I should set mb:0 for all other breakpoints to fix this behaviour?

This is not working

<a x-style="sm|mb:2;" href="#">Link</a>

This is works

<a x-style="sm|mb:2; md|mb:0; lg|mb:0;" href="#">Link</a>

but it is overcomplicated to create responsive elements.

Idea: Assembler Functions

Okok, here's the idea: Functions, these would work similarly to built in CSS functions, like calc(), var() and more. So here's how this work work:

:root {
	--dark--function: "@${0}-{1=700}";
}

Now it would be used like this:

<!-- New keyword, just like we use "@" for variables and "^" for mixins, we can use "$" for functions -->
<div x-style="color: $dark(blue, 800);"></div>

Sound cool yet? (not really)

So here's how it gets super cool:

AssemblerCSS.registerFunction("darken", (settings, ...args) => {
  //Same callback format as registerMixin
  var color = args[0];
  var amount = args[1];
  if (!(color && amount)) return args.join(",");//Return the original args and stuff
  if (!+amount) return color;//Return the color if amount isn't a number
  if (!/^#[0-9A-F]{6}$/i.test(color)) {
    //Since this is just a code sample for an idea I'm not gonna add color conversion and stuff.
    return color;
  }
  return `#${darkenHex(color.replace(/^#/, "").toUpperCase(), amount)}`;
  function darkenHex(col, amt) {
    amt = 0 - amt;//We're darkening, not lightning
    var num = parseInt(col, 16);
    var r = (num >> 16) + amt;
    var b = ((num >> 8) & 0x00ff) + amt;
    var g = (num & 0x0000ff) + amt;
    var newColor = g | (b << 8) | (r << 16);
    return newColor.toString(16);
  }
});

Nowwww, look what we could do (!!!)

<div x-style="color: darken(#345beb, 20)"></div>

which turns into...

<div x-style="color: #2047d7"></div>

There are endless possibilities with this! Please consider adding it! 😃

Add Pseudo-elements support

Please add Pseudo-elements support.

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph.

For more detailed information about which CSS properties can be used with each of these, please refer to the MDN documentation.

Prerendering support

Hi,

Going back to HTML tags for styling seems promising, but since I have to use basic text templates for this to work on production, it could be possible to also prerender the CSS at the same time, so that JavaScript is optional for first rendering.

My macro suggestion is to provide a way to prerender the CSS before serving the HTML.

The needed CSS can be represented in multiple ways:

• Add class names on tags (BEM or atomic), then create a CSS file along
• Use inline style attributes on every tag (close to how asmcss works)

Prerendering can be done in multiple ways:

• Make a Node.js library that can prerender HTML templates, so that it can be included in a pipeline (basic support)
• Add support for prerendering on frameworks such as Next.js, Nuxt.js, Gatsby... (JavaScript frameworks support)

Issues:

• asmcss still needs to be able to change the CSS on-the-fly in JS for dynamic rendering

Extra: how asmcss website looks without JavaScript

Can't register property?

I'm trying to use asmcss to register an option, my code looks like:

:root {
  --aspect-ratio--register: true;
}

however, it seems like it's not working when I use it later in a div

<div xs="w:100%; aspect-ratio:4/3">
	...
</div>

when I look at the browser dev panel there is no aspect-ratio property used on that element at all.