tenoxui / css Goto Github PK

View Code? Open in Web Editor NEW

10.0 0.0 2.0 573 KB

A CSS Framework without any CSS file :D

Home Page: https://tenoxui.web.app

License: MIT License

HTML 17.50% CSS 1.10% TypeScript 47.59% JavaScript 33.81%

css css-framework javascript css-in-js css3 frontend-tools html js lightweight-framework react

css's Introduction

TenoxUI v0.11

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;

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

css's People

Stargazers

Forkers

nousantx hikarinai

css's Issues

CSS Variable prefix/type not handled properly

note: Indonesian language alert!

Isu pada fitur CSS Variable Class Name

Tentang Isu

Isu terjadi apabila kita menambahkan CSS variable atau Custom Value kedalam value.

Konfigurasi

Seluruh prefix kelas yang digunakan dan propeti css nya :

use({
  property: [
    {
      c: "--my-color",
      bg: "background",
      text: "color"
    }
  ]
});

CSS

Mendifinisikan variable --blue yang akan dipakai di dalam nama kelas di html :

:root {
  --blue: red; /* warna merah */
}

HTML

Kode Yang Berkerja

<h1 class="text-$blue">Ini Bekerja</h1>
<h1 class="[--blue]-cyan text-$blue">Ini Bekerja</h1>
<h1 class="c-blue text-$blue">Ini Bekerja</h1>

Kode yang Tidak Bekerja

<h1 class="c-[--blue] text-$my-color">Ini Tidak Bekerja</h1>
<h1 class="[--blue]-orange c-$blue text-$blue">Ini Tidak Bekerja</h1>
<h1 class="[--color]-$blue text-$color">Ini Tidak Bekerja</h1>

Penjelasan

Semua kode yang tidak bekerja adalah dari fitur css variable yang mengambil value dari `css variable yang lain.

Kode yang bekerja

<h1 class="text-$blue">Ini Bekerja</h1>

Kode tersebut bekerja karena value diambil langsung dari variable --blue dari css.

Kode yang tidak bekerja

<h1 class="[--color]-$blue text-$color">Ini Tidak Bekerja</h1>

Walaupun variable --color mengambil value dari --blue, ini tidak bekerja.

Kesimpulan

Mungkin handler untuk css variable tidak bekerja dengan baik? Dan ini menyebabkan seluruh types yang berkaitan dengan css variable tidak ditangani dengan baik, dan ini menyebabkan value dengan $value atau [value] tidak bekerja.

by Nia ❤️