diff --git a/site/docs-output-list.js b/site/docs-output-list.js new file mode 100644 index 0000000..e404b85 --- /dev/null +++ b/site/docs-output-list.js @@ -0,0 +1,2 @@ +var docFiles = ["caveats.html","z-index.html"]; +var docFolders = []; \ No newline at end of file diff --git a/site/docs/caveats.html b/site/docs/caveats.html new file mode 100644 index 0000000..75df739 --- /dev/null +++ b/site/docs/caveats.html @@ -0,0 +1,89 @@ + + + + + + + EhUI Docs + + + + + + + + + +
+
+
+ Home +
+
+ Demo +
+
+ Docs +
+
+
+
+
+
+

Caveats/Annoying stuff

+

Pseudo-elements (::before and ::after)

+

Always make sure to add content: "" or else, they just wont exist.

+
something::before {
+  content: "";
+  /* ... */
+}
+
+

File inputs

+

Web browsers hate web developers, so they made it annoying to style the default <input type="file"... element.

+

Current "sollution"

+

Regardless, the current solution isn't too "hacky". Simply hide the actual input element, and use the associated label element as a button.

+

However, hiding the input element is a bit more of a struggle, because simply using some css like display: none; will make the upload button useless to certain accisibility features.

+

Instead use a more "hacky" css approach:

+
/* this is from src/scss/classes.scss */
+.invisible {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0px;
+  opacity: 0;
+  overflow: hidden;
+}
+
+

Now the input element is technically not hidden, the user can't see it, but the web browser thinks the user can.

+

Then the rest is simple, just make the label look like a button. You're html would look something like this:

+
<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>
+
+

Position sticky

+

position: sticky needs it's parent elements to have height: auto, or else it won't work properly

+
+
+ + + diff --git a/site/docs/z-index.html b/site/docs/z-index.html new file mode 100644 index 0000000..7456a07 --- /dev/null +++ b/site/docs/z-index.html @@ -0,0 +1,65 @@ + + + + + + + EhUI Docs + + + + + + + + + +
+
+
+ Home +
+
+ Demo +
+
+ Docs +
+
+
+
+
+
+

Z-index in EhUI

+

Unlike most other css libraries or ui kits, EhUI does NOT use absurdly high z-index values like z-index: 9999.

+

Instead we have an organized list of z-index ranges and their uses.

+

| 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 |

+
+
+ + +