Skip to content

keizie/CJSS

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

CJSS

A CSS based web framework. The name means JS in CSS ;)

To install CJSS, add the JavaScript to your website.

Using CJSS

First off, everything happens in your CSS file. You can layer this into your websites as you see fit. You can use this to layer on just a little bit more functionality in your CSS here and there or construct an entire page. It’s up to you!

HTML

To add markup to an element, select it in your CSS file, then using --html:(your markup here); add your HTML. This markup will appear everywhere that matches your CSS selector and overwrite whatever was there before.

h1 {
  --html:(
    This is a headline
  );
}

JavaScript

You can use JavaScript to define the behavior of things right from your HTML. You want somthing to happen on a thing when you click it and don’t want to go into your JS file? Do it right from your CSS file. If you are selecting the script element it will assume you are writing a global script, but everywhere else, the keyword this will map to the selector you are in.

.item {
  cursor: pointer;
  --js:(
    function toggle() {
      this.classList.toggle('active');
    }
    this.addEventListener('click', toggle );
  );
}

Data

You can add data to your project. Probably useful for somthing. Do it using the --data attrubute. It should be formatted as JSON.

nav {
  --data:(
    name: ['one', 'two', 'three'],
    link: ['#one', '#two', '#three'],
  );
  --html:(
    <a class="item" href="${data.link[0]}">${data.name[0]}</a>
    <a class="item" href="${data.link[1]}">${data.name[1]}</a>
    <a class="item" href="${data.link[2]}">${data.name[2]}</a>
  );
  --js:(console.log(data));
}

Should I use CJSS in my project?

No. This is a joke I took way too far.

About

A CSS based web framework

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 50.7%
  • CSS 35.6%
  • HTML 13.7%