@graupl/graupl 1.0.0-beta.0 → 1.0.0-beta.2

package/docs/state.md

@@ -14,54 +14,54 @@ Variables
 The focus width property:
 
 ```scss
---#{root-defaults.$prefix}-focus-width
+--#{root-defaults.$prefix}focus-width
 
 ```
 
 The focus outline color property:
 
 ```scss
---#{root-defaults.$prefix}-focus-outline-color
+--#{root-defaults.$prefix}focus-outline-color
 
 ```
 
 The focus outline width property:
 
 ```scss
---#{root-defaults.$prefix}-focus-outline-width
+--#{root-defaults.$prefix}focus-outline-width
 
 ```
 
 The focus outline style property:
 
 ```scss
---#{root-defaults.$prefix}-focus-outline-style
+--#{root-defaults.$prefix}focus-outline-style
 
 ```
 
 The focus outline offset property:
 
 ```scss
---#{root-defaults.$prefix}-focus-outline-offset
+--#{root-defaults.$prefix}focus-outline-offset
 
 ```
 
 The focus box shadow color property:
 
 ```scss
---#{root-defaults.$prefix}-focus-box-shadow-color
+--#{root-defaults.$prefix}focus-box-shadow-color
 
 ```
 
 The focus box shadow style property:
 
 ```scss
---#{root-defaults.$prefix}-focus-box-shadow-style
+--#{root-defaults.$prefix}focus-box-shadow-style
 
 ```
 
 The focus box shadow property:
 
 ```scss
---#{root-defaults.$prefix}-focus-box-shadow
+--#{root-defaults.$prefix}focus-box-shadow
 ```

package/docs/theme.md

@@ -65,19 +65,19 @@ Variables
 
 ```sass
 // A custom variable is defined for each color and shade.
---#{root-defaults.$prefix}-#{$color}--#{$shade}
+--#{root-defaults.$prefix}#{$color}--#{$shade}
 
 // There are three modes for the theme.
 // Active is what is currently being used.
---#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade}
+--#{root-defaults.$prefix}theme-active--#{$color}--#{$shade}
 // Theme dark is the color used when dark mode is active.
---#{root-defaults.$prefix}-theme-dark--#{$color}--#{$shade}
+--#{root-defaults.$prefix}theme-dark--#{$color}--#{$shade}
 // Light theme is the color active whne light mode is active
---#{root-defaults.$prefix}-theme-light--#{$color}--#{$shade}
+--#{root-defaults.$prefix}theme-light--#{$color}--#{$shade}
 
 // Globaly defined root color and root background.
---#{root-defaults.$prefix}-root-color
---#{root-defaults.$prefix}-root-background
+--#{root-defaults.$prefix}root-color
+--#{root-defaults.$prefix}root-background
 ```
 
 ## Typography
@@ -136,123 +136,123 @@ Variables
 The font properties:
 
 ```scss
---#{root-defaults.$prefix}-font-size-base
---#{root-defaults.$prefix}-line-height
+--#{root-defaults.$prefix}font-size-base
+--#{root-defaults.$prefix}line-height
 
 ```
 
 The font size properties:
 
 ```scss
---#{root-defaults.$prefix}-font-#{$key}
+--#{root-defaults.$prefix}font-#{$key}
 
 ```
 
 The font weight properties:
 
 ```scss
---#{root-defaults.$prefix}-font-weight-#{$key}
---#{root-defaults.$prefix}-font-weight-bold
+--#{root-defaults.$prefix}font-weight-#{$key}
+--#{root-defaults.$prefix}font-weight-bold
 
 ```
 
 The root properties:
 
 ```scss
---#{root-defaults.$prefix}-root-font-family
---#{root-defaults.$prefix}-root-font-size
+--#{root-defaults.$prefix}root-font-family
+--#{root-defaults.$prefix}root-font-size
 
 ```
 
 The typography properties:
 
 ```scss
---#{root-defaults.$prefix}-body-font-size
---#{root-defaults.$prefix}-body-line-height
---#{root-defaults.$prefix}-body-font-weight
---#{root-defaults.$prefix}-paragraph-font-size
---#{root-defaults.$prefix}-paragraph-line-height
---#{root-defaults.$prefix}-paragraph-margin
---#{root-defaults.$prefix}-paragraph-font-weight
---#{root-defaults.$prefix}-small-font-size
---#{root-defaults.$prefix}-small-line-height
---#{root-defaults.$prefix}-small-margin
---#{root-defaults.$prefix}-small-font-weight
+--#{root-defaults.$prefix}body-font-size
+--#{root-defaults.$prefix}body-line-height
+--#{root-defaults.$prefix}body-font-weight
+--#{root-defaults.$prefix}paragraph-font-size
+--#{root-defaults.$prefix}paragraph-line-height
+--#{root-defaults.$prefix}paragraph-margin
+--#{root-defaults.$prefix}paragraph-font-weight
+--#{root-defaults.$prefix}small-font-size
+--#{root-defaults.$prefix}small-line-height
+--#{root-defaults.$prefix}small-margin
+--#{root-defaults.$prefix}small-font-weight
 
 ```
 
 The heading properties:
 
 ```scss
---#{root-defaults.$prefix}-heading-font-family
---#{root-defaults.$prefix}-heading-line-height
---#{root-defaults.$prefix}-heading-margin
---#{root-defaults.$prefix}-heading-font-weight
+--#{root-defaults.$prefix}heading-font-family
+--#{root-defaults.$prefix}heading-line-height
+--#{root-defaults.$prefix}heading-margin
+--#{root-defaults.$prefix}heading-font-weight
 
 ```
 
 The H1 properties:
 
 ```scss
---#{root-defaults.$prefix}-h1-font-size
---#{root-defaults.$prefix}-h1-line-height
---#{root-defaults.$prefix}-h1-margin
---#{root-defaults.$prefix}-h1-font-family
---#{root-defaults.$prefix}-h1-font-weight
+--#{root-defaults.$prefix}h1-font-size
+--#{root-defaults.$prefix}h1-line-height
+--#{root-defaults.$prefix}h1-margin
+--#{root-defaults.$prefix}h1-font-family
+--#{root-defaults.$prefix}h1-font-weight
 
 ```
 
 The H2 properties:
 
 ```scss
---#{root-defaults.$prefix}-h2-font-size
---#{root-defaults.$prefix}-h2-line-height
---#{root-defaults.$prefix}-h2-margin
---#{root-defaults.$prefix}-h2-font-family
---#{root-defaults.$prefix}-h2-font-weight
+--#{root-defaults.$prefix}h2-font-size
+--#{root-defaults.$prefix}h2-line-height
+--#{root-defaults.$prefix}h2-margin
+--#{root-defaults.$prefix}h2-font-family
+--#{root-defaults.$prefix}h2-font-weight
 
 ```
 
 The H3 properties:
 
 ```scss
---#{root-defaults.$prefix}-h3-font-size
---#{root-defaults.$prefix}-h3-line-height
---#{root-defaults.$prefix}-h3-margin
---#{root-defaults.$prefix}-h3-font-family
---#{root-defaults.$prefix}-h3-font-weight
+--#{root-defaults.$prefix}h3-font-size
+--#{root-defaults.$prefix}h3-line-height
+--#{root-defaults.$prefix}h3-margin
+--#{root-defaults.$prefix}h3-font-family
+--#{root-defaults.$prefix}h3-font-weight
 
 ```
 
 The H4 properties:
 
 ```scss
---#{root-defaults.$prefix}-h4-font-size
---#{root-defaults.$prefix}-h4-line-height
---#{root-defaults.$prefix}-h4-margin
---#{root-defaults.$prefix}-h4-font-family
---#{root-defaults.$prefix}-h4-font-weight
+--#{root-defaults.$prefix}h4-font-size
+--#{root-defaults.$prefix}h4-line-height
+--#{root-defaults.$prefix}h4-margin
+--#{root-defaults.$prefix}h4-font-family
+--#{root-defaults.$prefix}h4-font-weight
 
 ```
 
 The H5 properties:
 
 ```scss
---#{root-defaults.$prefix}-h5-font-size
---#{root-defaults.$prefix}-h5-line-height
---#{root-defaults.$prefix}-h5-margin
---#{root-defaults.$prefix}-h5-font-family
---#{root-defaults.$prefix}-h5-font-weight
+--#{root-defaults.$prefix}h5-font-size
+--#{root-defaults.$prefix}h5-line-height
+--#{root-defaults.$prefix}h5-margin
+--#{root-defaults.$prefix}h5-font-family
+--#{root-defaults.$prefix}h5-font-weight
 
 ```
 
 The H6 properties:
 
 ```scss
---#{root-defaults.$prefix}-h6-font-size
---#{root-defaults.$prefix}-h6-line-height
---#{root-defaults.$prefix}-h6-margin
---#{root-defaults.$prefix}-h6-font-family
---#{root-defaults.$prefix}-h6-font-weight
+--#{root-defaults.$prefix}h6-font-size
+--#{root-defaults.$prefix}h6-line-height
+--#{root-defaults.$prefix}h6-margin
+--#{root-defaults.$prefix}h6-font-family
+--#{root-defaults.$prefix}h6-font-weight
 
 ```

package/docs/utilities.md

@@ -240,7 +240,7 @@ List style position properties
 
 Variables
 
-`$ratio: var(*--#{root-defaults.$prefix}-ratio*);`
+`$ratio: var(*--#{root-defaults.$prefix}ratio*);`
 
 Contains element add this class to
 

package/index.html

@@ -15,7 +15,7 @@
     <p>This source code can be found in <a href="https://github.com/Graupl/graupl">GitHub</a>.</p>
     <p>Graupl supports light and dark modes out-of-the-box.</p>
     <button id="dark-mode-toggle" class="button mt-5 w-half">Toggle dark mode</button>
-    <div class="full-width container min-h-full-screen align-content-center">
+    <div class="full-width container py-10 my-10 align-content-center">
       <h2>Buttons</h2>
       <p>There are 4 colours of buttons supported by default, with plans to have a "graupl-theme" plugin that adds more.
       </p>
@@ -34,7 +34,7 @@
         <a class="button" href="#" disabled>Anchor Button</a>
       </div>
     </div>
-    <div class="full-width container min-h-full-screen align-content-center">
+    <div class="full-width container py-10 my-10 align-content-center">
       <h2>Form elements</h2>
       <p>Graupl provides default styling for all form elements.</p>
       <form class="full-width rg-4">
@@ -83,7 +83,7 @@
             </optgroup>
           </select>
         </div>
-        <div class="input-group"><label for"multi-select">Multi-select</label>
+        <div class="input-group"><label for="multi-select">Multi-select</label>
           <select id="multi-select" multiple>
             <option value="1">Option 1</option>
             <option value="2">Option 2</option>
@@ -131,7 +131,7 @@
         </div>
       </form>
     </div>
-    <div class="full-width container min-h-full-screen align-content-center">
+    <div class="full-width container py-10 my-10 align-content-center">
       <h2>Navigation</h2>
       <div class="py-7">
         <nav class="navigation" data-graupl-menu-type="DisclosureMenu"
@@ -155,7 +155,7 @@
         </nav>
       </div>
     </div>
-    <div class="full-width container min-h-full-screen align-content-center">
+    <div class="full-width container py-10 my-10 align-content-center">
       <h2>Tables</h2>
       <p>Graupl provides some default styling for tables as well as some other useful features to customize them.</p>
       <table class="bordered striped-rows hoverable">
@@ -386,7 +386,7 @@
         </table>
       </div>
     </div>
-    <div class="full-width container min-h-full-screen align-content-center">
+    <div class="full-width container py-10 my-10 align-content-center">
       <h2>Columns</h2>
       <div class="columns count-6 py-5">
         <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
@@ -403,7 +403,7 @@
         <div class="bg-primary-700 text-primary-100 py-7 px-5"></div>
       </div>
     </div>
-    <div class="full-width container min-h-full-screen align-content-center">
+    <div class="full-width container py-10 my-10 align-content-center">
       <h2>Flex columns</h2>
       <div class="flex-columns py-5">
         <div class="col-6 col-md-8 col-xl-9 py-7 bg-primary-700 text-primary-100 px-5">
@@ -428,7 +428,7 @@
         <div class="col-4 py-7 bg-primary-700 text-primary-100 px-5"></div>
       </div>
     </div>
-    <div class="full-width container min-h-full-screen align-content-center">
+    <div class="full-width container py-10 my-10 align-content-center">
       <h2>Cards</h2>
       <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.top</span> class
         will have the image placed on the top while cards using the <span
@@ -533,7 +533,7 @@
         </div>
       </div>
     </div>
-    <div class="full-width container min-h-full-screen align-content-center">
+    <div class="full-width container py-10 my-10 align-content-center">
       <h2>Horizontal Cards</h2>
       <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.right</span> class
         will have the image placed on the right while cards using the <span
@@ -638,7 +638,7 @@
         </div>
       </div>
     </div>
-    <div class="full-width container min-h-full-screen align-content-center">
+    <div class="full-width container py-10 my-10 align-content-center">
       <h2>Inverse Cards</h2>
       <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.inverse</span>
         class will have the image placed on the right if it is a horizontal card and on the bottom if it is a vertical
@@ -681,7 +681,7 @@
         </div>
       </div>
     </div>
-    <div class="full-width container min-h-full-screen align-content-center">
+    <div class="full-width container py-10 my-10 align-content-center">
       <h2>Alerts</h2>
       <div class="display-grid g-5">
         <div class="alert">
@@ -788,7 +788,7 @@
           </div>
         </div>
       </div>
-    <div class="full-width container min-h-full-screen align-content-center">
+    <div class="full-width container py-10 my-10 align-content-center">
       <h2>Carousels</h2>
       <section class="carousel">
         <div class="carousel-control-container">
@@ -822,6 +822,78 @@
         </div>
       </section>
     </div>
+    <div class="full-width container py-10 my-10 align-content-center">
+      <h2>Lists</h2>
+      <p>Lists are inspired by Bootstrap's list groups.</p>
+      <h3>Unordered list</h3>
+      <ul class="list">
+        <li class="list-item">
+          <a href="#">List item 1</a>
+        </li>
+        <li class="list-item">
+          List item 2
+        </li>
+        <li class="list-item">
+          <a href="#" class="stretched">List item 3</a>
+        </li>
+      </ul>
+      <h3>Ordered list</h3>
+      <p>You can add the list markers back in using utility classes (in this case <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.list-style-decimal</span> and <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.list-style-inside</span>).</p>
+      <ol class="list list-style-decimal list-style-inside">
+        <li class="list-item">
+          <a href="#">List item 1</a>
+        </li>
+        <li class="list-item">
+          List item 2
+        </li>
+        <li class="list-item">
+          <a href="#" class="stretched">List item 3</a>
+        </li>
+      </ol>
+      <h3>Inline lists</h3>
+      <p>We can achieve an inline list by utilizing the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.columns</span> class.</p>
+      <ul class="list columns">
+        <li class="list-item">
+          <a href="#">List item 1</a>
+        </li>
+        <li class="list-item">
+          List item 2
+        </li>
+        <li class="list-item">
+          <a href="#" class="stretched">List item 3</a>
+        </li>
+        <li class="list-item">
+          <a href="#">List item 4</a>
+        </li>
+        <li class="list-item">
+          List item 5
+        </li>
+        <li class="list-item">
+          <a href="#" class="stretched">List item 6</a>
+        </li>
+      </ul>
+      <p class="pt-5">We can also use the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.display-flex</span> utility class.</p>
+      <ul class="list display-flex">
+        <li class="list-item">
+          <a href="#">List item 1</a>
+        </li>
+        <li class="list-item">
+          List item 2
+        </li>
+        <li class="list-item">
+          <a href="#" class="stretched">List item 3</a>
+        </li>
+        <li class="list-item">
+          <a href="#">List item 4</a>
+        </li>
+        <li class="list-item">
+          List item 5
+        </li>
+        <li class="list-item">
+          <a href="#" class="stretched">List item 6</a>
+        </li>
+      </ul>
+    </div>
   </main>
   <script src="https://cdn.jsdelivr.net/npm/accessible-menu/dist/disclosure-menu.iife.js"></script>
   <script type="module" src="src/js/alert/index.js"></script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graupl/graupl",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.2",
   "description": "A modular and modern CSS framework.",
   "type": "module",
   "exports": {

package/scss/component/list.scss

@@ -0,0 +1,3 @@
+// @graupl/graupl list component.
+
+@forward "../../src/scss/component/list";

package/scss/utilities/border.scss

@@ -0,0 +1,3 @@
+// @graupl/graupl border utilities.
+
+@forward "../../src/scss/utilities/border";

package/src/scss/_defaults.scss

@@ -9,11 +9,15 @@
 @use "sass:map";
 
 // Prefix for custom properties and other naming conventions.
-$prefix: "graupl" !default;
+$id: "graupl" !default;
+$prefix: "#{$id}-" !default;
 
 // Settings.
 $use-important: true !default;
-$responsive-utilities: true !default;
+$screen-aware-utilities: true !default;
+$theme-aware-utilities: true !default;
+$state-aware-utilities: true !default;
+$use-layers: true !default;
 
 // Layout properties.
 $content-max-width: 96ch !default;
@@ -87,7 +91,7 @@ $interactive-min-height: 44px !default;
 
 // Border properties.
 $border-radius: 0.125rem !default;
-$border-width: 2px !default;
+$border-width: 0.125rem !default;
 $border-style: solid !default;
 
 // Transition properties.
@@ -132,5 +136,10 @@ $base-state-selectors: (
 $custom-state-selectors: () !default;
 $state-selectors: map.merge($base-state-selectors, $custom-state-selectors);
 
-// Responsive utility separator.
-$responsive-separator: "\\:" !default;
+// Utility properties.
+$utility-selector-prefix: "." !default;
+
+// Utility modifier separators.
+$utility-screen-aware-separator: "\\:" !default;
+$utility-theme-aware-separator: "\\:" !default;
+$utility-state-aware-separator: "\\:" !default;

package/src/scss/_variables.scss

@@ -8,17 +8,17 @@
 
 // Layout properties.
 $content-max-width: var(
-  --#{defaults.$prefix}-content-max-width,
+  --#{defaults.$prefix}content-max-width,
   defaults.$content-max-width
 );
 
 // Spacing properties.
-$spacer: var(--#{defaults.$prefix}-spacer, defaults.$spacer);
+$spacer: var(--#{defaults.$prefix}spacer, defaults.$spacer);
 $spacers: ();
 
 @each $key, $value in defaults.$spacer-multipliers {
   $space: var(
-    --#{defaults.$prefix}-spacer-#{$key},
+    --#{defaults.$prefix}spacer-#{$key},
     calc(#{$value} * #{$spacer})
   );
   $spacers: map.set($spacers, $key, $space);
@@ -26,28 +26,28 @@ $spacers: ();
 
 // Border properties.
 $border-radius: var(
-  --#{defaults.$prefix}-border-radius,
+  --#{defaults.$prefix}border-radius,
   defaults.$border-radius
 );
-$border-width: var(--#{defaults.$prefix}-border-width, defaults.$border-width);
-$border-style: var(--#{defaults.$prefix}-border-style, defaults.$border-style);
+$border-width: var(--#{defaults.$prefix}border-width, defaults.$border-width);
+$border-style: var(--#{defaults.$prefix}border-style, defaults.$border-style);
 
 // Transition properties.
 $transition-durations: (
   fast: var(
-      --#{defaults.$prefix}-transition-duration-fast,
+      --#{defaults.$prefix}transition-duration-fast,
       map.get(defaults.$transition-durations, fast)
     ),
   default: var(
-      --#{defaults.$prefix}-transition-duration-default,
+      --#{defaults.$prefix}transition-duration-default,
       map.get(defaults.$transition-durations, default)
     ),
   slow: var(
-      --#{defaults.$prefix}-transition-duration-slow,
+      --#{defaults.$prefix}transition-duration-slow,
       map.get(defaults.$transition-durations, slow)
     ),
 );
 $transition-timing-function: var(
-  --#{defaults.$prefix}-transition-timing-function,
+  --#{defaults.$prefix}transition-timing-function,
   defaults.$transition-timing-function
 );