This is a react + vite starter template but uses tenoxui css framework for styling.
This is how the new style looks like :
import tenoxui, { use, makeStyles } from "tenoxui";
import property from "@tenoxui/property";
const styles = () => {
use(property);
makeStyles({
body: "m-0 d-flex place-items-center w-mn-320px h-mn-100vh",
"#root": "w-mx-1280px mh-auto"
// more styles
});
tenoxui();
};
Here's the breakdown :
- Import all necessary module
import tenoxui, { use, makeStyles } from "tenoxui";
import property from "@tenoxui/property";
- What is
property
?
import property from "@tenoxui/property";
const styles = () => {
use(property);
// other code
};
property
can optionally imported if you don't wanna re-define your types and properties manually. The property
is basically bunch of types and properties that already defined before and you can just include it to your project.
use
function
use
is a function can store your types and properties. It will make sure the functions like makeStyles()
and tenoxui()
knows which class names they need to process or can processed.
use({ c: "color", fs: "fontSize" });
After added some types and properties inside of it, you can immediately use the types as prefix class to your element :
<h1 class="c-#ccf654 fs-3rem">Hello World!</h1>
makeStyles
function
makeStyles({
body: "bg-red",
"p.text": "fs-0.8rem"
// more
});
This function allows you to give styles using specific selectors.
- Applying the styles
import { useLayoutEffect } from "react";
function App() {
useLayoutEffect(() => {
tenoxui({ c: "color", fs: "fontSize" });
}, []);
return <h1 className="c-#ccf654 fs-3rem">Hello World!</h1>
}
Not sure about this method, but it fast for developing your apps, styles will be applied to your element after a change to the className. The useLayoutEffect
very rarely used rather than useEffect
. But, since tenoxui is using DOM to handle the styling, useLayoutEffect
make sure the style applied at the right time. Thanks :D
Install tenoxui using npm or whatever you have :
npm i tenoxui --save-dev
Here's a simple configuration on your App.jsx
file :
import { useLayoutEffect } from "react";
import tenoxui from "tenoxui";
const App = () => {
useLayoutEffect(() => {
tenoxui({ c: "color" });
}, []);
return <h1 className="c-#ccf654">Hello World!</h1>;
};
export default App;
- React : https://react.dev
- Vite : https://vitejs.dev
- Typescript : https://www.typescriptlang.org
- TenoxUI : https://tenoxui.web.app