asmcss / assembler Goto Github PK

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).

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?

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

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 */

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

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...

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! 😃

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"

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.

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.

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.

mixin properties don't seem to work as advertised in the documentation. I copy-pasted the code from this page in the documentation, and the mixin seems to do nothing. The below code is my html page I'm trying to render, and I've installed assembler using the CDN.

  <style>
    :root {
      --stripes--mixin: "bg-color: slateblue; \
        bg-image:repeating-linear-gradient(45deg, white 0 3px, #0003 3px 9px)";
    }
  </style>
  <div x-style="^stripes; w:150px; h:150px; mx:auto; radius"></div>

I know assembler is working because the css associated with all the other values in the x-style attribute are being applied (w:150px; h:150px; etx.).

I've used Assembler for 3 sites now and I've never gotten mixins to work as advertised (or at all). Would love to get this working as I really enjoy using Assembler, and mixins would be a nice cherry on top.

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:

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!

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