css's Introduction

TenoxUI v0.11.0

A CSS Framework without css file :D
Full 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>

Setup Project

Here is simple usage of tenoxui on your project.

HTML :

<!doctype html>
<html>
  <head>
    <title>Tester</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 :

First, you need to add tenoxui to your project :

npm i tenoxui --save-dev

Then, on your app.jsx file :

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";

To use the property you can simply attach it inside tenoxui function as its parameter. Like this :

<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;