-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
2fe9625
commit 5522c73
Showing
3 changed files
with
156 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| var docFiles = ["caveats.html","z-index.html"]; | ||
| var docFolders = []; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <!-- | ||
| EhUI | ||
| Copyright (c) Ehan Ahamed and contributors | ||
| Licensed under the UPL-1.0 License | ||
| https://ehui.ehan.dev/LICENSE.txt | ||
| --> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10, user-scalable=1" /> | ||
| <title>EhUI Docs</title> | ||
| <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> | ||
| <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> | ||
| <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> | ||
| <link rel="stylesheet" href="./css/ehui-auto.min.css"/> | ||
| <link rel="stylesheet" href="./fonts/fonts.css" /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://www.nerdfonts.com/assets/css/webfont.css" | ||
| /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <header> | ||
| <div class="menu nav"> | ||
| <div class="current"> | ||
| <a href="./index.html">Home</a> | ||
| </div> | ||
| <div> | ||
| <a href="./demo.html">Demo</a> | ||
| </div> | ||
| <div> | ||
| <a href="./docs.html">Docs</a> | ||
| </div> | ||
| </div> | ||
| </header> | ||
| <main> | ||
| <div class="grid page"> | ||
| <div class="content"> | ||
| <h1 id="caveatsannoyingstuff">Caveats/Annoying stuff</h1> | ||
| <h2 id="pseudoelementsbeforeandafter">Pseudo-elements (::before and ::after)</h2> | ||
| <p>Always make sure to add <code>content: ""</code> or else, they just wont exist.</p> | ||
| <pre><code class="css language-css">something::before { | ||
| content: ""; | ||
| /* ... */ | ||
| } | ||
| </code></pre> | ||
| <h2 id="fileinputs">File inputs</h2> | ||
| <p>Web browsers hate web developers, so they made it annoying to style the default <code><input type="file"...</code> element.</p> | ||
| <h3 id="currentsollution">Current "sollution"</h3> | ||
| <p>Regardless, the current solution isn't too "hacky". Simply hide the actual <code>input</code> element, and use the associated <code>label</code> element as a button.</p> | ||
| <p>However, hiding the <code>input</code> element is a bit more of a struggle, because simply using some css like <code>display: none;</code> will make the upload button useless to certain accisibility features.</p> | ||
| <p>Instead use a more "hacky" css approach:</p> | ||
| <pre><code class="css language-css">/* this is from src/scss/classes.scss */ | ||
| .invisible { | ||
| position: absolute; | ||
| width: 1px; | ||
| height: 1px; | ||
| margin: 0px; | ||
| opacity: 0; | ||
| overflow: hidden; | ||
| } | ||
| </code></pre> | ||
| <p>Now the <code>input</code> element is technically not hidden, the user can't see it, but the web browser thinks the user can.</p> | ||
| <p>Then the rest is simple, just make the label look like a button. You're html would look something like this:</p> | ||
| <pre><code class="html language-html"><div> | ||
| <!-- no extra css is needed, all these classes are already in EhUI --> | ||
| <label for="ID" ... class="button">Select File</label> | ||
| <input type="file" ... id="ID" class="invisible" /> | ||
| </div> | ||
| </code></pre> | ||
| <h2 id="positionsticky">Position sticky</h2> | ||
| <p><code>position: sticky</code> needs it's parent elements to have <code>height: auto</code>, or else it won't work properly</p> </div> | ||
| </div> | ||
| </main> | ||
| <footer> | ||
| <h2>EhUI</h2> | ||
| <p> | ||
| Copyright © Ehan Ahamed & contributors | ||
| </p> | ||
| <a href="./LICENSE.txt">See License</a> | ||
| <br> | ||
| </footer><!-- | ||
| <script src="https://ehui.ehan.dev/js/ehUi.js"></script> | ||
| <script src="https://ehui.ehan.dev/js/themes.js"></script> | ||
| <script src="https://ehui.ehan.dev/js/modals.js"></script>--> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <!-- | ||
| EhUI | ||
| Copyright (c) Ehan Ahamed and contributors | ||
| Licensed under the UPL-1.0 License | ||
| https://ehui.ehan.dev/LICENSE.txt | ||
| --> | ||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=10, user-scalable=1" /> | ||
| <title>EhUI Docs</title> | ||
| <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" /> | ||
| <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" /> | ||
| <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> | ||
| <link rel="stylesheet" href="./css/ehui-auto.min.css"/> | ||
| <link rel="stylesheet" href="./fonts/fonts.css" /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://www.nerdfonts.com/assets/css/webfont.css" | ||
| /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <header> | ||
| <div class="menu nav"> | ||
| <div class="current"> | ||
| <a href="./index.html">Home</a> | ||
| </div> | ||
| <div> | ||
| <a href="./demo.html">Demo</a> | ||
| </div> | ||
| <div> | ||
| <a href="./docs.html">Docs</a> | ||
| </div> | ||
| </div> | ||
| </header> | ||
| <main> | ||
| <div class="grid page"> | ||
| <div class="content"> | ||
| <h1 id="zindexinehui">Z-index in EhUI</h1> | ||
| <p>Unlike most other css libraries or ui kits, EhUI does NOT use absurdly high z-index values like <code>z-index: 9999</code>.</p> | ||
| <p>Instead we have an organized list of z-index ranges and their uses.</p> | ||
| <p>| Z-index(s) | Use | Examples | | ||
| |------------|---------------------------------------------------|-------------------------| | ||
| | 1-9 | Elements with 3D effects & stuff | Flashcards | | ||
| | 10-19 | Elements that go above most stuff but below menus | Searchbar suggestions | | ||
| | 20-29 | Menus/tooltips that go above must stuff | Tooltips/menus | | ||
| | 100 | Modal/alert box background | Overlay for alert/modal | | ||
| | 101 | Modal/alert box | Modal/alert box |</p> </div> | ||
| </div> | ||
| </main> | ||
| <footer> | ||
| <h2>EhUI</h2> | ||
| <p> | ||
| Copyright © Ehan Ahamed & contributors | ||
| </p> | ||
| <a href="./LICENSE.txt">See License</a> | ||
| <br> | ||
| </footer><!-- | ||
| <script src="https://ehui.ehan.dev/js/ehUi.js"></script> | ||
| <script src="https://ehui.ehan.dev/js/themes.js"></script> | ||
| <script src="https://ehui.ehan.dev/js/modals.js"></script>--> | ||
| </body> | ||
| </html> |