tenoxui
v0.12.6
Published
A CSS Framework without CSS file :D
Downloads
873
Maintainers
Readme
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.