docs

dxxxxy · Dec 11, 2021 · dd0a771 · dd0a771
1 parent c15a8b9
commit dd0a771
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 0 deletions.
diff --git a/docs/.nojekyll b/docs/.nojekyll
diff --git a/docs/README.md b/docs/README.md
@@ -0,0 +1,49 @@
+# Zephyr
+A totally different CSS framework striving to achieve elegance and efficiency by using custom HTML tags with predefined CSS and JS instead of classes. It is highly customizable, allowing for CSS properties to be used as HTML attributes. Has dark-mode built in. Heavily in development.
+
+https://dxxxxy.github.io/Zephyr/
+
+## Usage
+Use HTML as you normally would. To use the custom tags, prefix your tags by `z`.
+<hr>
+
+Here's an example of a custom `<a>` tag:
+
+```html
+<za href="https://somewhere.com">Example</za>
+```
+
+You can also use `CSS` rules in `HTML` attributes:
+
+```html
+<zbody font-family="Euclid Circular B Bold"></zbody>
+```
+
+You can customize the preset colors by using the <zconfig> tag:
+
+```html
+<!-- if information is omitted, it will be set to default -->
+<zconfig $darkColor="#4a94fa"></zconfig>
+
+<!-- these are the variable names and their defaults -->
+$darkcolor = "#4a94fa"
+$lightcolor = "#990099"
+$darkbgcolor = "#000000"
+$lightbgcolor = "#ffffff"
+```
+
+Lastly, there are many built-in tags ready to be used at any time:
+
+```html
+<!-- this will generate a loader that will wait until the whole window loads and 
+will wait 2000ms after doing so before disapearing and letting everything appear -->
+<zloader waitFor="windowLoad" delay="2000"></zloader> 
+
+<!-- this will create a dark mode button with a pointer cursor. clicking on it
+will switch between the theme colors previously defined in <zconfig> --> 
+<zdark cursor="pointer"></zdark>
+```
+
+There is currently a limited number of tags and the design itself has not reached its prime.
+
+You can check out https://dxxxxy.github.io/Zephyr/ or the `index.html` file included in the project as a reference.
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="description" content="Description">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
+</head>
+<body>
+  <div id="app"></div>
+  <script>
+    window.$docsify = {
+      name: '',
+      repo: ''
+    }
+  </script>
+  <!-- Docsify v4 -->
+  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
+</body>
+</html>