tenoxui
TypeScript icon, indicating that this package has built-in type declarations

0.12.6 • Public • Published

TenoxUI Logo

TenoxUI v0.12.0

Very lightweight and easy to configure, utility-first CSS framework.
Documentation

Installation

Using npm:

npm i tenoxui --save-dev

Using CDN :

<script src="https://cdn.jsdelivr.net/npm/tenoxui@latest/dist/js/tenoxui.min.js"></script>

Start a Project

HTML :

<!doctype html>
<html>
  <head>
    <title>TenoxUI</title>
    <script src="https://cdn.jsdelivr.net/npm/tenoxui"></script>
  </head>
  <body>
    <h1 class="text-#ccf654 fs-4rem">Hello World!</h1>
    <script>
      tenoxui({ text: "color", fs: "fontSize" });
    </script>
  </body>
</html>

React :

import { useLayoutEffect } from "react";
import tenoxui from "tenoxui";

const App = () => {
  useLayoutEffect(() => {
    // add tenoxui
    tenoxui({ text: "color", fs: "fontSize" });
  }, []);

  return <h1 className="text-#ccf654 fs-4rem">Hello World!</h1>;
};

export default App;

Types and Properties

TenoxUI also provide a library of defined types and properties that you can use without defining it one by one. You can add the property to your project using CDN or install it using npm :

<script src="https://cdn.jsdelivr.net/npm/@tenoxui/property"></script>

Or :

npm i tenoxui @tenoxui/property
import tenoxui from "tenoxui";
import property from "@tenoxui/property";

Usage example

<script>
  tenoxui(property);
</script>

Or ReactJS :

import { useLayoutEffect } from "react";
import tenoxui from "tenoxui";
import property from "@tenoxui/property";

const App = () => {
  useLayoutEffect(() => {
    // add tenoxui
    tenoxui(property); // use tenoxui property
  }, []);

  return <h1 className="tc-red">Hello World!</h1>;
};

export default App;

You can see all types and properties on GitHub Repository or Here.

Other Packages

Package Sidebar

Install

npm i tenoxui

Weekly Downloads

73

Version

0.12.6

License

MIT

Unpacked Size

191 kB

Total Files

12

Last publish

Collaborators

  • nousantx