cssx-framework

Overview

CSSX is a web UI framework with file-path routing. You've heard of CSS-in-JS, and CSS pre/post-processors like SASS, LESS, and Tailwind - but now get ready for a whole new world of CSS driven development, with CSSX!

Why?

I built CSS because I thought it was an entertaining idea and would parallel the million JS frameworks that exist. It doesn't really have a purpose except to entertain and see if it was possible.

Structure

.cssx files have roughly the same format as a standard .css file, but with some additional functions like mixins in order to provide functionality for shared component styling.

To render elements on the page, simply write the CSS you require, but include the element tag in the specificity of the class (ie. div.root would render a div element with the class root). Any element attributes you wish to include can be added in the same format as CSS variables nested within the class definition.

In order to define nested elements, just nest the CSS class definitions under the appropriate parent, like you would structure regular CSS.

eg.

div.root {
    color: red;
    --title: Div Title;
    --text: Some text;

    button {
        border-radius: 8px;
        color: blue;
        --onclick: alert('Button clicked!');
        --text: Click me;
        --type: button;
    }
}

would become =>

<div class="root" title="Div Title">
    Some text
    <button onclick="alert('Button clicked!')" type="button">
        Click me
    </button>
</div>

with the stylesheet

div.root {
    color: red;

    button {
        border-radius: 8px;
        color: blue;
    }
}