https://github.com/tenoxui/tenoxui
A lightweight, small, and easy to configure CSS framework engine.
https://github.com/tenoxui/tenoxui
css css-frameworks css-library frontend typescript ui-components utility-first website
Last synced: about 1 year ago
JSON representation
A lightweight, small, and easy to configure CSS framework engine.
- Host: GitHub
- URL: https://github.com/tenoxui/tenoxui
- Owner: tenoxui
- License: mit
- Created: 2024-03-31T04:19:52.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-05-06T23:36:01.000Z (about 1 year ago)
- Last Synced: 2025-05-07T00:31:00.458Z (about 1 year ago)
- Topics: css, css-frameworks, css-library, frontend, typescript, ui-components, utility-first, website
- Language: TypeScript
- Homepage: https://tenoxui.web.app
- Size: 1.74 MB
- Stars: 28
- Watchers: 0
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TenoxUI
TenoxUI is JavaScript library for creating extensible, flexible, and highly customized, **utility-first CSS framework engine**.
## Overview
```javascript
import { TenoxUI } from '@tenoxui/moxie'
const ui = new TenoxUI({
property: {
bg: 'background',
m: 'margin'
}
})
// process class names
console.log(
ui.process(['bg-red', 'hover:bg-blue', 'focus:bg-[rgb(255_0_0)]', 'm-12px', '[padding]-1rem'])
)
```
Output :
```javascript
;[
{
className: 'bg-red',
cssRules: 'background',
value: 'red',
prefix: undefined,
raw: [undefined, 'bg', 'red', '', undefined, undefined, 'bg-red']
},
{
className: 'bg-blue',
cssRules: 'background',
value: 'blue',
prefix: 'hover',
raw: ['hover', 'bg', 'blue', '', undefined, undefined, 'hover:bg-blue']
},
{
className: 'bg-[rgb(255_0_0)]',
cssRules: 'background',
value: 'rgb(255 0 0)',
prefix: 'focus',
raw: ['focus', 'bg', '[rgb(255_0_0)]', '', undefined, undefined, 'focus:bg-[rgb(255_0_0)]']
},
{
className: 'm-12px',
cssRules: 'margin',
value: '12px',
prefix: undefined,
raw: [undefined, 'm', '12', 'px', undefined, undefined, 'm-12px']
},
{
className: '[padding]-1rem',
cssRules: 'padding',
value: '1rem',
prefix: undefined,
raw: [undefined, '[padding]', '1', 'rem', undefined, undefined, '[padding]-1rem']
}
]
```
## License
MIT © 2024-Present