Merge pull request #5 from Mirai-LabX/kawai-10

Start kawabu + docs ~v10.0.1 ~alpha

README.md

@@ -3,17 +3,27 @@ Kawai is a light-weight and native JavaScript framework and CSS library. It has
 With Kawai, you can build your dream projects faster or adapt your cross-platform web applications with ease. It automatically adapts to your screen size, and it is also easy to customize it with the settings of other developers.
 
 ## Features
-- Light-weight and native
+- Light-weight, simple and native speedful UI
 - No dependencies
 - Written from scratch
 - Open source
+- Adapts to different screen sizes and applications
+- Customizable with the settings of other developers
+- Easily extendable
+- Powerful developer tool
 
 ## Getting Started
 To get started with Kawai, you need to include the following files in your HTML:
 
 ### Installation
 To use Kawai in your project, simply include the CSS and JavaScript files in your HTML file:
 
+Fast connect:
+```
+<script src="https:cdn.com/assets/js/kawai.js" defer></script>
+```
+
+Local connect:
 ```
 <link href="fonts/kawai-font.otf" rel="stylesheet">
 <link rel="stylesheet" href="assets/css/kawai.css">
@@ -54,8 +64,15 @@ You can customize the look and feel of your application by modifying the CSS fil
 Kawai is an open-source project and you can contribute to it on GitHub.
 Official site link: [Tap Here for official site](https://example.com)
 
-### Support
+Contributions can be made via GitHub, using the following format:
+
+```sh
+git commit -m "My First Contribution"
+pull request
+git push main
+```
+
 If you need help with anything related to Kawai, please reach out to the author at https://www.yukiarimo.tk.
 
-## Licensing
+### Licensing
 Kawai is open-source software and is licensed under the MIT License. This means that you are free to use, modify, and distribute it.

assets/css/kawai.css

@@ -6,39 +6,49 @@
 /* CONFIGURATION */
 /*  NAVIGATION  */
 .topbar-o {
-    background: teal;
-    width: 100vw;
+    width: 100%;
     display: flex;
     justify-content: space-between;
+    align-items: center;
     margin-bottom: 2%;
     border-bottom: 1px solid rgb(229, 229, 229);
 }
 
 .bottombar-o {
     display: flex;
     position: fixed;
-    height: auto;
     text-decoration: none;
-    padding: 2%;
-    flex-direction: row;
-    width: 96%;
-    background: gray;
     justify-content: space-between;
     bottom: 0;
+    width: 100%;
+    height: fit-content;
+    margin-bottom: 0;
+    padding: 0%;
+    flex-direction: column;
 }
 
 .block-bottom-tabs {
-    width: fit-content;
-    justify-content: center;
+    width: 100%;
+    justify-content: space-around;
     display: flex;
     background: #212529;
-    padding: 2%;
+    padding: 1%;
     text-align: center;
     color: white;
 }
 
+.block-bottom-tabs-e {
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    padding: 1%;
+    border-radius: 6px;
+    justify-content: space-around;
+}
+
 .sidebar-o {
-    width: 20%;
+    width: 15%;
     float: left;
     background: rgb(231, 233, 233);
     height: 100%;
@@ -59,7 +69,7 @@
 }
 
 /*  BLOCKS  */
-.collector-lo {
+.coll-lo {
     display: flex;
     justify-content: space-around;
     margin-bottom: 2%;
@@ -134,10 +144,10 @@
 
 .block-list>.block-list-e {
     display: flex;
-    width: 40%;
+    width: 90%;
     color: black;
     border: 1px solid #DDE1E5;
-    padding: 2%;
+    padding: 1%;
     align-items: center;
 }
 
@@ -242,17 +252,18 @@
     line-height: normal;
 }
 
-.top-tab-block-e {
+.top-tab-block {
     display: flex;
-    margin-right: 5%;
+    flex-direction: row;
+    align-items: center;
     padding: 1%;
+    width: fit-content;
 }
 
-.top-tab-block {
+.top-tab-block-e {
     display: flex;
-    align-items: center;
+    margin-right: 5%;
     padding: 1%;
-    width: fit-content;
 }
 
 /*  OTHER   */
@@ -284,7 +295,7 @@
 }
 
 .side-tab-block {
-    width: 60%;
+    width: 80%;
 }
 
 .side-tab-block-e {
@@ -299,7 +310,7 @@
 }
 
 .uside {
-    width: 80%;
+    width: 85%;
     float: right;
 }
 
@@ -360,15 +371,6 @@
     width: fit-content;
 }
 
-.block-list>.block-list-e {
-    display: flex;
-    width: 40%;
-    color: black;
-    border: 1px solid #DDE1E5;
-    padding: 2%;
-    align-items: center;
-}
-
 .block-list>.block-list-e:first-child {
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
@@ -435,8 +437,20 @@
 }
 
 .uside {
-    width: 80%;
-    float: right;
+    width: 85%;
+}
+
+.double-uside {
+    width: 70%;
+    margin-left: 15%;
+}
+
+.side-left {
+    left: 0;
+}
+
+.side-right {
+    right: 0;
 }
 
 .tab-o-default {
@@ -553,6 +567,14 @@
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
+.v-coll {
+    flex-direction: column;
+}
+
+.h-coll {
+    flex-direction: row;
+}
+
 /* MOBILE CSS */
 @media (max-width : 428px) {
     .sidebar-o {
@@ -694,7 +716,6 @@ html {
 
 body {
     margin: 0;
-    background-color: rgb(234, 238, 246);
 }
 
 main {

assets/js/kawai.js

@@ -5,6 +5,19 @@
     KAWAI FRAMEWORK
 */
 
+var cssId = 'myCss';  // you could encode the css path itself to generate id..
+if (!document.getElementById(cssId))
+{
+    var head  = document.getElementsByTagName('head')[0];
+    var link  = document.createElement('link');
+    link.id   = cssId;
+    link.rel  = 'stylesheet';
+    link.type = 'text/css';
+    link.href = 'assets/css/kawai.css';
+    link.media = 'all';
+    head.appendChild(link);
+}
+
 // Variables and sub-processes
 let getsideid = 'sidebar'
 let checkSide = localStorage.getItem('side');
@@ -75,7 +88,7 @@ function OpenTablo(tablo) {
     for (let step = 0; step < tablos.length; step++) {
         let element = tablos[step];
         if (element.get)
-        element.style = "display: none";
+            element.style = "display: none";
     }
 
     if (getComputedStyle(document.getElementById(tablo)).display == 'flex') {
@@ -182,6 +195,24 @@ if (addclosers.length) {
     }
 }
 
+let sideBar = document.getElementsByClassName('sidebar-o')[0]
+
+sideBar.style.display = "flex";
+sideBar.classList.add('side-on');
+
+var SideSwitcher = document.createElement('div');
+SideSwitcher.classList.add('side-switch');
+SideSwitcher.nodeValue = '='
+SideSwitcher.appendChild(sideBar);
+
+sideBar.addEventListener('click', () => {
+    if (sideBar.classList.contains('side-on')) {
+        sideBar.style.display = "none";
+    } else {
+        sideBar.style.display = "flex";
+    }
+})
+
 /*
     COPYRIGHT BY YUKI ARIMO
     KAWAI FRAMEWORK