https://github.com/stagfoo/joro

🕷️🕸️ Load dom nodes and strings like dependencies with no duplicates
https://github.com/stagfoo/joro

css css-framework frontend functional-programming javascript jss template-literals

Last synced: 18 days ago
JSON representation

🕷️🕸️ Load dom nodes and strings like dependencies with no duplicates

• Host: GitHub
• URL: https://github.com/stagfoo/joro
• Owner: stagfoo
• Created: 2020-07-07T04:39:55.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-07-19T10:13:38.000Z (over 1 year ago)
• Last Synced: 2024-12-15T04:38:10.670Z (about 2 months ago)
• Topics: css, css-framework, frontend, functional-programming, javascript, jss, template-literals
• Language: TypeScript
• Homepage:
• Size: 746 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        




Load dom nodes and strings like dependencies with no duplicates







  





---

# Installation

```

npm install joro --save

```

# Why make this?

- JSS is over complicated for small projects

- Its easy to add styles for functional components

- its tiny, simple functional and i love using it.

## Examples

```js

var html = require('nanohtml')

var joro = require('joro');

var styles = new joro();

function HeaderComponent(){

    styles.add("HeaderComponent", `

        h1 { color: hotpink }

    `)

    var el = html`

        
Hello planet

    `

    document.body.appendChild(el)

}

```

congratulation its a functional component 🎉


You can add HTML nodes on route change of styles, mount points or anything! 🌈

 ```js

var page = require('pagejs')

var styles = new joro();

page('/user', () => {

    styles.add("HeaderComponent", `

        .user-profile { color: hotpink }

    `)

    loadTheUI();

})

 ```

 

 #Support

 

 [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/H2H616GHW)