asmcss / assembler Goto Github PK
View Code? Open in Web Editor NEWA modern UI framework
Home Page: https://asmcss.com
License: Apache License 2.0
A modern UI framework
Home Page: https://asmcss.com
License: Apache License 2.0
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:
style
attributes on every tag (close to how asmcss works)Prerendering can be done in multiple ways:
Issues:
Hi! I really love this project and I had a few ideas for it:
lighten(@${0}, 20)
(out of 100)<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;
}
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.