https://github.com/tenoxui/tenoxui

A CSS Framework without any CSS file :D
https://github.com/tenoxui/tenoxui

css css-framework css-in-js css-tools css3 framework framework-css frontend-tools html javascipt javascript js lightweight-framework react ts typescript utility-classes utility-first web-development website

Last synced: 4 days ago
JSON representation

A CSS Framework without any CSS file :D

• Host: GitHub
• URL: https://github.com/tenoxui/tenoxui
• Owner: tenoxui
• License: mit
• Created: 2024-03-31T04:19:52.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-12-11T15:20:42.000Z (about 1 month ago)
• Last Synced: 2024-12-24T09:10:47.259Z (28 days ago)
• Topics: css, css-framework, css-in-js, css-tools, css3, framework, framework-css, frontend-tools, html, javascipt, javascript, js, lightweight-framework, react, ts, typescript, utility-classes, utility-first, web-development, website
• Language: TypeScript
• Homepage: https://tenoxui.web.app
• Size: 1.22 MB
• Stars: 27
• Watchers: 0
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# TenoxUI Framework

It's a CSS framework, trust me. 😉

## Overview

TenoxUI makes styling as easy as pie; and who doesn't like pie? It's super easy to add styles with very minimal configuration. Let's dive in!

### ReactJS

Here’s how you can use TenoxUI in React in just a few lines of code:

```jsx

import { useLayoutEffect } from 'react'

import tenoxui from 'tenoxui'

const App = () => {

  useLayoutEffect(() => {

    tenoxui({

      // shorthand: cssProperty

      bg: 'background',

      text: 'text'

    })

  }, [])

  return 
Hello World!

}


export default App

```

That’s all it takes to use TenoxUI in your ReactJS app.

### HTML

Plain HTML? No problem! 🤨🙌

```html

  

    TenoxUI

    

  

  

    
Hello World!

    

      tenoxui({

        // shorthand: cssProperty

        bg: 'background',

        text: 'color'

      })

    

  


```

Just a few classes and you’re set to go!

## Installation

### Using NPM

```bash

npm i tenoxui

```

Or, use its core instead:

```bash

npm i @tenoxui/core

```

Done! ✨

### CDN

Prefer a CDN for quick setup? Easy peasy:

```html

```

Or, if you just want the core:

```html

```

Boom! You’re ready to build your awesome apps! 💥

## Explore Further

### `@tenoxui/core` Overview

Want to explore the core features? Here’s how to use the `@tenoxui/core` package in React:

```jsx

import { useLayoutEffect } from 'react'

import { makeTenoxUI } from '@tenoxui/core'

const App = () => {

  useLayoutEffect(() => {

    document.querySelectorAll('*[class]').forEach((element) => {

      new makeTenoxUI({

        element,

        property: {

          bg: 'background',

          text: 'color'

        }

      }).useDOM()

    })

  }, [])

  return 
Hello World!

}


export default App

```

A bit _uhh_ but it works!

### `@tenoxui/property` Overview

Don’t have time to create your own properties library? Try `@tenoxui/property`; Our `pre-built` properties library.

#### Installation

Install with NPM:

```bash

npm i @tenoxui/property

```

Or, grab it via CDN:

```html

```

#### Usage

There are two variants you can get, if you prefer smaller and on-demand/commonly used, use `default` variant. You want to use more rich properties, like `filter`, `transform`, and so on; try `full` variant instead.

`esmodule` usage:

```js

import { property } from '@tenoxui/property'

// full properties

import { property } from '@tenoxui/property/full'

```

For `commonjs`, try:

```js

const { property } = require('@tenoxui/property')

// full properties

const { property } = require('@tenoxui/property/full')

```

#### React Example

Still React? Here's a quick setup:

```jsx

import { useLayoutEffect } from 'react'

import { makeTenoxUI } from '@tenoxui/core'

import { property } from '@tenoxui/property'

const App = () => {

  useLayoutEffect(() => {

    document.querySelectorAll('*[class]').forEach((element) => {

      const tenoxui = new makeTenoxUI({ element, property })

      tenoxui.useDOM()

    })

  }, [])

  return 
Hello World!

}


export default App

```

#### Plain HTML

You can use the property library in plain HTML too:

```html

  

    TenoxUI

    

    

  

  

    
Hello World!

    

      use({ property })

      // or

      tenoxui(property)

    

  


```

That's it! With TenoxUI and its extended libraries, you're now equipped to build stylish and responsive UIs effortlessly. Ready to level up your web game? Let’s go! 🎉