@toheeb/base 1.0.0 → 1.4.1

package/README.md

@@ -0,0 +1,4 @@
+
+A classless stylesheet for Personalizable Web Designs.
+
+Visit www.toheeb.com/en/base-css/ for demonstration, installation, idea, and code.

package/base-settings.js

@@ -127,7 +127,7 @@ class BaseSettings extends HTMLElement {
         ._bs form {
           display: grid;
           width: 100%;
-          gap: var(--bbg);
+          gap: calc(.5 * var(--bbg));
         }
     
         ._bs p {
@@ -135,7 +135,7 @@ class BaseSettings extends HTMLElement {
           display: flex;
           flex-flow: row wrap;
           justify-content: space-between;
-          gap: calc(.75 * var(--bbg));
+          gap: calc(.25 * var(--bbg)) calc(.75 * var(--bbg));
         }
     
         ._bs .fields label:not([hidden]) {
@@ -148,7 +148,9 @@ class BaseSettings extends HTMLElement {
           font-size: calc(var(--bfs-075) * 1rem);
         }
     
-        ._bs .fields input {
+        ._bs .fields input, 
+        ._bs .fields select 
+        {
           width: 100%;
         }
       </style>

package/base.css

@@ -16,6 +16,10 @@
   box-sizing: border-box;
 }
 
+::picker(select) {
+  /* 1 */
+  border-radius: var(--base-corner-radius);
+}
 
 
 
@@ -114,6 +118,14 @@ small, ::marker
   );
 }
 
+/* 4b */
+select::picker-icon {
+  --bfs: var(--bfs-075);
+  font-size: calc(var(--bfs) * 1rem);
+  line-height: 2.2em;
+  transform-origin: 50% 55%;
+}
+
 /* 5 */
 p {
   text-wrap: pretty;
@@ -193,7 +205,10 @@ dd {
 
 table,
 iframe, object, embed, video, audio, img,
-blockquote, fieldset, address, figure, del, ins, a
+blockquote, fieldset, address, figure, 
+del:has(p, pre, details, fieldset, table, dl),
+ins:has(p, pre, details, fieldset, table, dl),
+:where(a[href]:has(p, pre, details, fieldset, table, dl))
 {
   /* 
     * add .5 to 1 to compensate for 
@@ -203,12 +218,20 @@ blockquote, fieldset, address, figure, del, ins, a
   margin-block: calc(1.5 * var(--bbg));
 }
 
-:is(table,
-iframe, object, embed, video, audio, img,
-blockquote, fieldset, address, figure, del, ins, a) +
-:is(table,
-iframe, object, embed, video, audio, img,
-blockquote, fieldset, address, figure, del, ins, a) 
+:is(
+  table,
+  blockquote, fieldset, address, figure, 
+  del:has(p, pre, details, fieldset, table, dl),
+  ins:has(p, pre, details, fieldset, table, dl),
+  :where(a[href]:has(p, pre, details, fieldset, table, dl))
+) +
+:is(
+  table,
+  blockquote, fieldset, address, figure, 
+  del:has(p, pre, details, fieldset, table, dl),
+  ins:has(p, pre, details, fieldset, table, dl),
+  :where(a[href]:has(p, pre, details, fieldset, table, dl))
+) 
 {
   /* 
     * add .5 again to start to compensate for 
@@ -230,7 +253,7 @@ summary, legend, th
 header, 
 figcaption:first-child 
 {
-  padding: 0 0 var(--bbg-100);
+  padding: 0 0 var(--bbg);
 }
 
 header + *, 
@@ -242,7 +265,7 @@ figcaption:first-child + *
 footer,
 figcaption:last-child 
 {
-  padding: var(--bbg-100) 0 0;
+  padding: var(--bbg) 0 0;
   margin-block-start: var(--bbg-200);
 }
 
@@ -320,7 +343,10 @@ p + p {
 hgroup,
 summary, legend, th, dt,
 p, pre, 
-blockquote, fieldset, address, figure, del, ins, a,
+blockquote, fieldset, address, figure, 
+del:has(p, pre, details, fieldset, table, dl),
+ins:has(p, pre, details, fieldset, table, dl),
+:where(a[href]:has(p, pre, details, fieldset, table, dl)),
 ol, ul, dl
 {
   margin-inline: auto;
@@ -363,17 +389,32 @@ dialog {
 }
   
 main, td, caption {
-  padding-inline: 1rem;
+  padding: .5rem 1rem;
 }
 
+/* 13 */
+[hidden] {
+  display: none;
+}
 
 
+:where(a[href] + a[href]) {
+  margin-inline-start: 1em;
+}
 
 
 
 /* COLOR
 ========================================================= */
 
+* {
+  outline-color: inherit;
+}
+
+a {
+  color: inherit;
+}
+
 @supports 
 (color: oklch(0 0 0)) and 
 (color: light-dark(#000, #fff)) 
@@ -392,6 +433,24 @@ main, td, caption {
       oklch(0.20 .03 var(--base-color-hue))
     );
   }
+
+  ::picker(select) {
+    color: light-dark(
+      oklch(0.45 .02 var(--base-color-hue)),
+      oklch(.72 .01 var(--base-color-hue))
+    );
+    background-color: light-dark(
+      oklch(0.99 0.003 var(--base-color-hue)),
+      oklch(0.20 .03 var(--base-color-hue))
+    );
+  }
+
+  option:hover {
+    background-color: light-dark(
+      oklch(0.95 0.003 var(--base-color-hue)),
+      oklch(0.25 .03 var(--base-color-hue))
+    );
+  }
 }
 
 
@@ -561,7 +620,7 @@ ol ol ol {
 blockquote, fieldset, address, figure,  
 del:has(p, pre, details, fieldset, table, dl),
 ins:has(p, pre, details, fieldset, table, dl),
-a[href]:has(p, pre, details, fieldset, table, dl)
+:where(a[href]:has(p, pre, details, fieldset, table, dl))
 {
   border: 1px solid currentColor;
   padding: 0 calc(1.5 * var(--bbg)) calc(.5 * var(--bbg));
@@ -580,8 +639,8 @@ del:has(p, pre, details, fieldset, table, dl)::before,
 del:has(p, pre, details, fieldset, table, dl)::after,
 ins:has(p, pre, details, fieldset, table, dl)::before,
 ins:has(p, pre, details, fieldset, table, dl)::after,
-a[href]:has(p, pre, details, fieldset, table, dl)::before,
-a[href]:has(p, pre, details, fieldset, table, dl)::after
+:where(a[href]:has(p, pre, details, fieldset, table, dl))::before,
+:where(a[href]:has(p, pre, details, fieldset, table, dl))::after
 {
   content: "";
   position: absolute;
@@ -632,12 +691,12 @@ ins:has(p, pre, details, fieldset, table, dl)::after {
   clip-path: polygon(60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0% 60%, 0% 40%, 40% 40%, 40% 0%, 60% 0%, 60% 40%);
 }
 
-a[href]:has(p, pre, details, fieldset, table, dl)::before {
+:where(a[href]:has(p, pre, details, fieldset, table, dl))::before {
   top: .2em;
   clip-path: polygon(100% 0%, 100% 70%, 72% 42%, 22% 92%, 8% 78%, 58% 28%, 30% 0%, 100% 0%);
 }
 
-a[href]:has(p, pre, details, fieldset, table, dl)::after {
+:where(a[href]:has(p, pre, details, fieldset, table, dl))::after {
   bottom: .2em;
   clip-path: polygon(100% 0%, 100% 70%, 72% 42%, 22% 92%, 8% 78%, 58% 28%, 30% 0%, 100% 0%);
 }
@@ -656,36 +715,78 @@ pre {
 
 /* Trued Forms */
 
-select,
 button,
-input:not([type]),
-input[type=tel], 
-input[type=url], 
-input[type=text], 
-input[type=date], 
-input[type=week], 
-input[type=time], 
-input[type=file], 
-input[type=email], 
-input[type=month], 
-input[type=color], 
-input[type=reset], 
-input[type=submit], 
-input[type=button], 
-input[type=number], 
-input[type=search], 
-input[type=password], 
-input[type=datetime-local] {
+:where(
+  input:not([type]),
+  input[type=tel], 
+  input[type=url], 
+  input[type=text], 
+  input[type=date], 
+  input[type=week], 
+  input[type=time], 
+  input[type=file], 
+  input[type=email], 
+  input[type=month], 
+  input[type=color], 
+  input[type=reset], 
+  input[type=submit], 
+  input[type=button], 
+  input[type=number], 
+  input[type=search], 
+  input[type=password], 
+  input[type=datetime-local]
+) {
   border: 1px solid;
   font: inherit;
   padding: 0 .5em .15em;
   height: 2em;
   vertical-align: middle;
   line-height: 1.2;
+  width: fit-content;
+}
+
+select,
+::picker(select) {
+  appearance: base-select;
 }
 
 select {
-  padding-inline: .15em 1.5em;
+  font: inherit;
+  height: 2em;
+  padding: 0 .5em .2em .3em;
+  width: fit-content;
+  gap: 2em;
+}
+
+select::picker-icon {
+  transition: .4s rotate;
+}
+
+select:open::picker-icon {
+  rotate: 180deg;
+}
+
+option {
+  height: 2.5em;
+  padding: .3em .75em .45em;
+  flex-flow: row-reverse;
+  justify-content: space-between;
+  gap: 3em;
+}
+
+::picker(select) {
+  opacity: 0;
+  transition: all .25s allow-discrete;
+}
+
+::picker(select):popover-open {
+  opacity: 1;
+}
+
+@starting-style {
+  ::picker(select):popover-open {
+    opacity: 0;
+  }
 }
 
 input[type=range] 
@@ -693,7 +794,10 @@ input[type=range]
   vertical-align: middle;
 }  
 
-input[type=radio], input[type=checkbox] {
+:where(
+  input[type=radio], 
+  input[type=checkbox] 
+) {
   width: 1em;
   height: 1em;
   font: inherit;
@@ -705,6 +809,7 @@ textarea {
   border: 1px solid currentColor;
   font: inherit;
   padding: 0 .5em .25em;
+  width: fit-content;
 }
 
 
@@ -715,23 +820,32 @@ a,
 label,
 button,
 select,
-input[type=date], 
-input[type=week], 
-input[type=time], 
-input[type=file], 
-input[type=month], 
-input[type=color], 
-input[type=reset], 
-input[type=range], 
-input[type=radio], 
-input[type=button], 
-input[type=submit], 
-input[type=checkbox], 
-input[type=datetime-local] {
+:where(
+  input[type=date], 
+  input[type=week], 
+  input[type=time], 
+  input[type=file], 
+  input[type=month], 
+  input[type=color], 
+  input[type=reset], 
+  input[type=range], 
+  input[type=radio], 
+  input[type=button], 
+  input[type=submit], 
+  input[type=checkbox], 
+  input[type=datetime-local]
+) {
   cursor: pointer;
 }
 
 
+:where(label:has(textarea, select, input:not([type=checkbox], [type=radio], [type=range]))) {
+  display: grid;
+  margin-block-start: calc(.5 * var(--bbg))
+}
 
-
+:where(label:has(textarea, select, input:not([type=checkbox], [type=radio], [type=range])) + button) {
+  display: block;
+  margin-block-start: calc(1.7 * var(--bbg))
+}
 

package/base.html

@@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <link rel="stylesheet" href="./base.css">
+  <meta name="color-scheme" content="darks light">
+  <script src="./base-settings.js"></script>
+</head>
+
+<body>
+  <main>
+    <header>
+      <p>Site Header, <button class="base-settings">Personalization Settings</button></p>
+    </header>
+    <section>
+      <header>
+        <p>Section Header</p>
+      </header>
+      <hgroup>
+        <p>kicker one</p>
+        <p>kicker two</p>
+        <h1>Heading Level One (H1)</h1>        
+        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </hgroup>
+      <div>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
+        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>
+          <label for="">
+            Select 
+            <select name="" id="">
+              <option value="">Onge</option>
+              <option value="">Two</option>
+              <option value="">Three</option>
+              <option value="">Four</option>
+            </select>
+          </label> 
+          <input type="number"> </p>
+        <p>
+          <input type="text" name="" id="" list="dd">
+          <datalist id="dd">
+            <option value="hh">Hello</option>
+          </datalist>
+
+          <input type="color" name="" id="">
+          <input type="checkbox" name="" id="">
+          <input type="radio" name="" id="">
+          Hello
+          <input type="range" name="" id="">
+          <textarea name="" id="" cols="30" rows="10"></textarea>
+        </p>
+
+<pre>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</pre>
+        <figure>
+          <figcaption>
+            <p>Some caption</p>
+          </figcaption>
+          <p>Figure: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </figure>
+        <figure>
+          <p>Figure: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+          <figcaption>
+            <p>Some caption</p>
+          </figcaption>
+        </figure>
+        <table>
+          <caption>
+            <p>Hello Caption</p>
+          </caption>
+          <thead>
+            <tr>
+              <th>One</th>
+              <th>Two</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <p>Text</p>
+              </td>
+              <td>
+                <p>Text</p>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <ol>
+          <li>
+            <p>Hello</p>
+          </li>
+          <li>
+            <p>Hello</p>
+            <ol>
+              <li>
+                <p>World</p>
+              </li>
+            </ol>
+          </li>
+          <li>
+            <p>Hello</p>
+          </li>
+        </ol>
+        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <dl>
+          <div>
+            <dt>Term one</dt>
+            <dt>Term two</dt>
+            <dd>
+              <p>Hello World</p>
+              <dl>
+                <div>
+                  <dt>Term one</dt>
+                  <dt>Term two</dt>
+                  <dd>
+                    <p>Hello World</p>
+                    
+                  </dd>
+                </div>
+                <div>
+                  <dt>Term one</dt>
+                  <dt>Term two</dt>
+                  <dd>
+                    <p>Hello World</p>
+                  </dd>
+                </div>
+              </dl>      
+            </dd>
+          </div>
+          <div>
+            <dt>Term one</dt>
+            <dt>Term two</dt>
+            <dd>
+              <p>Hello World</p>
+            </dd>
+          </div>
+        </dl>
+        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <details>
+          <summary>Hello World</summary>
+          <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </details>
+        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <!-- <fieldset>
+          <legend>Legend</legend>
+          <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </fieldset> -->
+        <address>
+          <p>Excepteur del occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </address>
+        <blockquote>
+          <p>Excepteur del occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </blockquote>
+        <ins>
+          <p>Excepteur <a href="">sint</a> occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </ins>
+        <a href="hg">
+          <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </a>
+        <del>
+          <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        </del>
+        <fieldset>
+          <legend>Hello</legend>
+
+          <p>Hello world</p>
+        </fieldset>
+        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <hr>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem <img src="./bd-1.png" alt=""> <img src="./bd-1.png" alt=""> ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        <p>Lorem <audio src="./dull.mp3" controls></audio> ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </div>
+      <footer>
+        <p>Section Footer</p>
+      </footer>
+    </section>
+    <footer>
+      <p>Footer Landmark</p>
+    </footer>
+
+    <section>
+      <hgroup>
+        <h1>H1</h1>
+      </hgroup>
+      <div>
+        <section>
+          <hgroup>
+            <h2>H2</h2>
+          </hgroup>
+          <div>
+            <section>
+              <hgroup>
+                <h3>H3</h3>
+              </hgroup>
+              <div>
+                <section>
+                  <hgroup>
+                    <h4>H4</h4>
+                  </hgroup>
+                  <div>
+                    <section>
+                      <hgroup>
+                        <h5>H5</h5>
+                      </hgroup>
+                      <div>
+                        <section>
+                          <hgroup>
+                            <h6>H6</h6>
+                            <p>SH</p>
+                          </hgroup>
+                          <div>
+                            <p>PP</p>
+                            <p><small>SM</small></p>
+                          </div>
+                        </section>
+                      </div>                    
+                    </section>
+                  </div>                
+                </section>
+              </div>            
+            </section>
+          </div>
+        </section>
+      </div>
+    </section>
+  </main>
+  <base-settings></base-settings>
+</body>
+
+</html>
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toheeb/base",
-  "version": "1.0.0",
+  "version": "1.4.1",
   "description": "A classless stylesheet for Personalizable Web Design",
   "main": "index.js",
   "scripts": {