@natachah/vanilla-frontend 0.0.5 → 0.1.1

package/docs/pages/quick-start/customization.html

@@ -23,17 +23,17 @@
         <p>In the <code>:root</code> set the default CSS properties that are global to all your website.</p>
         <p>You also can split in multiple files, e.g.: <code>root.scss</code> and <code>color.scss</code></p>
 
-        <p>You can use the default file <code>@natachah/vanilla-frontend/scss/variables/_root.scss</code>, or copy this code in your own file:</p>
+        <p>You can use the default file <code>@natachah/vanilla-frontend/scss/themes/_root.scss</code>, or copy this code in your own file:</p>
 
         <doc-code data-type="scss">
             :root {
-            
+
                 // Typography
                 --font-size: 16px;
                 --line-height: 1.5;
                 --font-family: Arial;
                 --font-weight: normal;
-                
+
                 --font-size-h1: 2.25em; // 36px
                 --font-size-h2: 2.00em; // 32px
                 --font-size-h3: 1.75em; // 28px
@@ -42,36 +42,36 @@
                 --font-size-h6: 1.125em; // 18px
                 --font-size-large: 1.125em; // 18px
                 --font-size-small: .875em; // 14px
-                
+
                 // Anchor
                 --decoration: none;
 
                 // Layouts
                 --padding-inline: .75em;
                 --padding-block: .5em;
-                
+
                 // Border
                 --border-size: 1px;
                 --border-style: solid;
                 --border-radius: .25rem;
-                
+
                 // Focus (outline)
                 --focus-size: 3px;
                 --focus-style: solid;
                 --focus-offset: 0;
                 --focus-opacity: 50%;
-                
+
                 // Hover (color-mix)
                 --hover-color: black;
                 --hover-percent: 5%;
-                
+
                 // Active (color-mix)
                 --active-color: black;
                 --active-percent: 10%;
-                
+
                 // Disabled
                 --disabled-opacity: 50%;
-            
+
                 // Colors
                 --color-body: white;
                 --color-font: black;
@@ -79,7 +79,7 @@
                 --color-error: #DC3030;
                 --color-success: #008A00;
                 --color-warning: #FFA500;
-                
+
                 // Contrasts
                 --color-warning-contrast: black;
 
@@ -114,7 +114,7 @@
             <p>In best practive it will be better to have a file per theme.</p>
         </blockquote>
 
-        <h2>SCSS setting</h2>
+        <h2>SCSS options</h2>
 
         <p>A few settings are set via the SCSS, they are for variations and for default style as:</p>
 
@@ -124,59 +124,56 @@
             <li><code>$default-item-properties</code>> define the default properties to use for items <em>(see mixins)</em></li>
         </ul>
 
-        <p>You can use the default file <code>@natachah/vanilla-frontend/scss/variables/_setting.scss</code>, or copy this code in your own file:</p>
+        <p>You can use the default file <code>@natachah/vanilla-frontend/scss/abstracts/_options.scss</code>, or copy this code in your own file:</p>
 
         <doc-code data-type="scss">
-            /// Define the default list of colors available
-            ///
-            /// @access public
-            ///
-            $colors: (
-                primary,
-                success,
-                error,
-                warning
+            @forward '@natachah/vanilla-frontend/scss/abstracts/_options.scss' with (
+
+                $colors: (
+                    primary,
+                    success,
+                    error,
+                    warning
+                );
+
+                $color-variations: (
+                    badge: $colors,
+                    button: $colors,
+                    card: $colors,
+                    disclosure: $colors,
+                    list: $colors
+                );
+
+                $outline-variations: (
+                    badge,
+                    button,
+                    card,
+                    disclosure,
+                    list
+                );
             );
-            
-            /// Define the components that have some color variations
-            ///
-            /// @example button: (error) // <button class="error"></button>
-            /// @access public
-            ///
-            $color-variations: (
-                badge: $colors,
-                button: $colors,
-                card: $colors,
-                disclosure: $colors,
-                list: $colors
-            );
-            
-            /// Define the components that have an outline variation
-            ///
-            /// @example button // <button class="outline"></button>
-            /// @access public
-            ///
-            $outline-variations: (
-                badge,
-                button,
-                card,
-                disclosure,
-                list
-            );
-            
-            /// Define the default properties for item
-            ///
-            /// @access public
-            ///
-            $default-item-properties: (
-                color: var(--color-font),
-                background: transparent,
-                border-size: var(--border-size),
-                border-style: var(--border-style),
-                border-color: transparent,
-                border-radius: var(--border-radius),
-                padding-inline: var(--padding-inline),
-                padding-block: var(--padding-block)
+        </doc-code>
+
+        <p>And use is in your main scss as:</p>
+
+        <doc-code data-type="scss">
+            @use 'path/to/custom-options' as options;
+        </doc-code>
+
+        <p>You can use the default file <code>@natachah/vanilla-frontend/scss/abstracts/_default.scss</code>, or copy this code in your own file:</p>
+
+        <doc-code data-type="scss">
+            @use '@natachah/vanilla-frontend/scss/abstracts/_default.scss' with (
+                $item-properties: (
+                    color: var(--color-font),
+                    background: transparent,
+                    border-size: var(--border-size),
+                    border-style: var(--border-style),
+                    border-color: transparent,
+                    border-radius: var(--border-radius),
+                    padding-inline: var(--padding-inline),
+                    padding-block: var(--padding-block)
+                );
             );
         </doc-code>
 

package/docs/pages/quick-start/installation.html

@@ -21,42 +21,45 @@
         <p>Then you can import the <b>SCSS</b> files:</p>
 
         <doc-code data-type="scss">
-            @import '@natachah/vanilla-frontend/scss/vanilla-frontend.scss';
+            @use '@natachah/vanilla-frontend/scss/vanilla-frontend.scss';
         </doc-code>
 
         <p>Or better, include only the files that you need, here the template with all files:</p>
 
         <doc-code data-type="scss">
-            // Can be overide by your own variables files
-            @import '@natachah/vanilla-frontend/scss/variables/_root';
-            @import '@natachah/vanilla-frontend/scss/variables/_setting';
-
-            // Utilities
-            @import '@natachah/vanilla-frontend/scss/utilities/_mixin';
-            @import '@natachah/vanilla-frontend/scss/utilities/_reset';
-            @import '@natachah/vanilla-frontend/scss/utilities/_typography';
-
-            // Components
-            @import '@natachah/vanilla-frontend/scss/_badge';
-            @import '@natachah/vanilla-frontend/scss/_breadcrumb';
-            @import '@natachah/vanilla-frontend/scss/_button';
-            @import '@natachah/vanilla-frontend/scss/_card';
-            @import '@natachah/vanilla-frontend/scss/_dialog';
-            @import '@natachah/vanilla-frontend/scss/_disclosure';
-            @import '@natachah/vanilla-frontend/scss/_dropdown';
-            @import '@natachah/vanilla-frontend/scss/_form';
-            @import '@natachah/vanilla-frontend/scss/_grid';
-            @import '@natachah/vanilla-frontend/scss/_group';
-            @import '@natachah/vanilla-frontend/scss/_list';
-            @import '@natachah/vanilla-frontend/scss/_loading';
-            @import '@natachah/vanilla-frontend/scss/_media';
-            @import '@natachah/vanilla-frontend/scss/_progress';
-            @import '@natachah/vanilla-frontend/scss/_slider';
-            @import '@natachah/vanilla-frontend/scss/_table';
+            // Should be overide by your own files
+            @use '@natachah/vanilla-frontend/scss/themes/_root';
+
+            // If you need to use the mixin
+            @use '@natachah/vanilla-frontend/scss/abstracts/_mixin';
+
+            // Base files (reset, typography and media)
+            @use "@natachah/vanilla-frontend/scss/base";
+
+            // Layouts
+            @use "@natachah/vanilla-frontend/scss/layouts/grid";
+
+            // Components files (or: @use "@natachah/vanilla-frontend/scss/components";)
+            @use '@natachah/vanilla-frontend/scss/components/_badge';
+            @use '@natachah/vanilla-frontend/scss/components/_breadcrumb';
+            @use '@natachah/vanilla-frontend/scss/components/_button';
+            @use '@natachah/vanilla-frontend/scss/components/_card';
+            @use '@natachah/vanilla-frontend/scss/components/_dialog';
+            @use '@natachah/vanilla-frontend/scss/components/_disclosure';
+            @use '@natachah/vanilla-frontend/scss/components/_dropdown';
+            @use '@natachah/vanilla-frontend/scss/components/_form';
+            @use '@natachah/vanilla-frontend/scss/components/_grid';
+            @use '@natachah/vanilla-frontend/scss/components/_group';
+            @use '@natachah/vanilla-frontend/scss/components/_list';
+            @use '@natachah/vanilla-frontend/scss/components/_loading';
+            @use '@natachah/vanilla-frontend/scss/components/_progress';
+            @use '@natachah/vanilla-frontend/scss/components/_slider';
+            @use '@natachah/vanilla-frontend/scss/components/_table';
+
         </doc-code>
 
         <blockquote>
-            <p>There is no required files, but it's recommanded to have at least the reset and typography...</p>
+            <p>There is no required files, but it's recommanded to have at least the <b>base/*</b> and the <b>themes/root</b></p>
         </blockquote>
 
         <p>Import the <b>Javascript</b> files that you need, here the template:</p>

package/docs/pages/quick-start/mixins.html

@@ -17,7 +17,7 @@
         <p>To use them, import this file:</p>
 
         <doc-code data-type="scss">
-            @import '@natachah/vanilla-frontend/scss/utilities/_mixin';
+            @use '@natachah/vanilla-frontend/scss/abstracts/mixins';
         </doc-code>
 
         <h2>Create an item</h2>
@@ -42,13 +42,13 @@
             /// @access public
             ///
 
-            @include as-item($name, $states: (), $properties: $default-item-properties)
+            @include as-item($name, $states: (), $properties: default.$item-properties)
         </doc-code>
 
         <p>This mixin also include the <b>outline</b> and <b>color</b> variations. It also create some CSS custom properties with the <code>$name</code> value as <code>--{$name}-color</code> with fallback values from the <code>$properties</code>.</p>
 
         <blockquote class="warning">
-            <p>The default properties are set inside the <code>$default-item-properties</code> variable of the file <code>./scss/variables/_setting.scss</code></p>
+            <p>The default properties are set inside the <code>default.$item-properties</code> variable of the file <code>./scss/variables/_setting.scss</code></p>
         </blockquote>
 
         <h2>Create a list</h2>
@@ -64,13 +64,31 @@
             /// @access public
             ///
 
-            @include as-list($name, $states: (), $properties: $default-item-properties)
+            @include as-list($name, $states: (), $properties: default.$item-properties)
         </doc-code>
 
         <blockquote>
             <p>This mixin is used for the <b>list</b> and <b>dropdown</b> components</p>
         </blockquote>
 
+        <h2>Add header and footer to an item</h2>
+
+        <p>This mixin will create a header and a footer with negativ margin, some padding and a divider border.</p>
+
+        <doc-code data-type="scss">
+            /// Create a basic item with an header and a footer style
+            ///
+            /// @param {string} $name - Name of the component
+            /// @param {array} $properties - List of default properties (check in /variables/_setting.scss)
+            /// @access public
+            ///
+            @mixin with-header-and-footer($name, $properties: default.$item-properties)
+        </doc-code>
+
+        <blockquote>
+            <p>This mixin is used in <b>Dialog</b> components</p>
+        </blockquote>
+
         <h2>Set outline variation</h2>
 
         <p>This mixin will create the <code>.outline</code> class to transform an item to the outline varation.</p>
@@ -95,7 +113,7 @@
             </doc-code>
             <doc-code id="setting" data-type="scss" role="tabpanel">
                 $outline-variations: (
-                    my-component-name
+                my-component-name
                 );
             </doc-code>
         </div>
@@ -126,7 +144,7 @@
             </doc-code>
             <doc-code id="setting" data-type="scss" role="tabpanel">
                 $color-variations: (
-                    my-component-name: (primary, other-color)
+                my-component-name: (primary, other-color)
                 );
             </doc-code>
         </div>
@@ -167,9 +185,9 @@
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
                 @container (max-width:800px) {
-                    table {
-                        @include as-responsive-table()
-                    }
+                table {
+                @include as-responsive-table()
+                }
                 }
             </doc-code>
             <doc-code id="css" data-type="css" role="tabpanel">
@@ -201,11 +219,11 @@
             </doc-code>
             <doc-code id="scss" data-type="scss" role="tabpanel">
                 #wider {
-                    @include flex-grid-wider-column(3)
+                @include flex-grid-wider-column(3)
                 }
 
                 #offset {
-                    @include flex-grid-offset-column(2)
+                @include flex-grid-offset-column(2)
                 }
             </doc-code>
         </div>

package/docs/src/js/demo.js

@@ -5,7 +5,7 @@
  * This is the code for the demonstration code
  * 
  * @author Natacha Herth
- * @version 0.0.1
+
  * @copyright Natacha Herth, design & web development
  * 
  */

package/docs/src/js/doc-layout.js

@@ -18,7 +18,7 @@ class DocLayout extends HTMLElement {
                                 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pin-angle" viewBox="0 0 16 16">
                                 <path d="M9.828.722a.5.5 0 0 1 .354.146l4.95 4.95a.5.5 0 0 1 0 .707c-.48.48-1.072.588-1.503.588-.177 0-.335-.018-.46-.039l-3.134 3.134a6 6 0 0 1 .16 1.013c.046.702-.032 1.687-.72 2.375a.5.5 0 0 1-.707 0l-2.829-2.828-3.182 3.182c-.195.195-1.219.902-1.414.707s.512-1.22.707-1.414l3.182-3.182-2.828-2.829a.5.5 0 0 1 0-.707c.688-.688 1.673-.767 2.375-.72a6 6 0 0 1 1.013.16l3.134-3.133a3 3 0 0 1-.04-.461c0-.43.108-1.022.589-1.503a.5.5 0 0 1 .353-.146m.122 2.112v-.002zm0-.002v.002a.5.5 0 0 1-.122.51L6.293 6.878a.5.5 0 0 1-.511.12H5.78l-.014-.004a5 5 0 0 0-.288-.076 5 5 0 0 0-.765-.116c-.422-.028-.836.008-1.175.15l5.51 5.509c.141-.34.177-.753.149-1.175a5 5 0 0 0-.192-1.054l-.004-.013v-.001a.5.5 0 0 1 .12-.512l3.536-3.535a.5.5 0 0 1 .532-.115l.096.022c.087.017.208.034.344.034q.172.002.343-.04L9.927 2.028q-.042.172-.04.343a1.8 1.8 0 0 0 .062.46z"/>
                                 </svg>
-                                0.0.1
+                                0.1.1
                             </span>
                         </li>
                         <li>
@@ -55,11 +55,15 @@ class DocLayout extends HTMLElement {
                         <li><a href="/pages/quick-start/mixins.html">SCSS Mixins</a></li>
                         <li><a href="/pages/quick-start/conventions.html">Conventions</a></li>
                     </ul>
-                    <h2>Layout</h2>
+                    <h2>Base</h2>
                     <ul>
-                        <li><a href="/pages/layout/reset.html">Reset</a></li>
-                        <li><a href="/pages/layout/typography.html">Typography</a></li>
-                        <li><a href="/pages/layout/grid.html">Grid</a></li>
+                        <li><a href="/pages/base/reset.html">Reset</a></li>
+                        <li><a href="/pages/base/typography.html">Typography</a></li>
+                        <li><a href="/pages/base/media.html">Media</a></li>
+                    </ul>
+                    <h2>Layouts</h2>
+                    <ul>
+                        <li><a href="/pages/layouts/grid.html">Grid</a></li>
                     </ul>
                     <h2>Components</h2>
                     <ul>
@@ -73,7 +77,6 @@ class DocLayout extends HTMLElement {
                         <li><a href="/pages/components/form.html">Form</a></li>
                         <li><a href="/pages/components/list.html">List</a></li>
                         <li><a href="/pages/components/loading.html">Loading</a></li>
-                        <li><a href="/pages/components/media.html">Media</a></li>
                         <li><a href="/pages/components/progress.html">Progress</a></li>
                         <li><a href="/pages/components/slider.html">Slider</a></li>
                         <li><a href="/pages/components/table.html">Table</a></li>

package/docs/src/scss/demo.scss

@@ -5,11 +5,11 @@
 /// This is the style for demonstration bloc
 ///
 /// @author Natacha Herth
-/// @since 1.0.0
+
 ///
 ////
 
-@import './../../../scss/utilities/_mixin.scss';
+@use './../../../scss/abstracts/mixins' as *;
 
 // Demo for grid offset
 #flexGridDemoOffset {

package/docs/src/scss/layout.scss

@@ -5,7 +5,7 @@
 /// This is the style for the basic layout with a sidebar
 ///
 /// @author Natacha Herth
-/// @since 1.0.0
+
 ///
 ////
 

package/docs/src/scss/style.scss

@@ -5,11 +5,11 @@
 /// This is the style for the website
 ///
 /// @author Natacha Herth
-/// @since 1.0.0
+
 ///
 ////
 
-@import './../../../scss/utilities/_mixin.scss';
+@use './../../../scss/abstracts/mixins' as *;
 
 :root {
 

package/esbuild.mjs

@@ -5,7 +5,7 @@ import autoprefixer from 'autoprefixer'
 
 esbuild
     .build({
-        entryPoints: ["scss/vanilla-frontend.scss", "js/vanilla-frontend.js"],
+        entryPoints: ["scss/vanilla-frontend.scss"],
         entryNames: '[name]',
         outbase: "./",
         outdir: './bundles',

package/js/_autofill.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to automatic filling some fields from another
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/_check-all.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to un/check a list of checkboxes
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/_comfort.js

@@ -5,7 +5,6 @@
  * This class create and manage the cookies for saving theme and style changes for visual comfort
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/_consent.js

@@ -5,7 +5,6 @@
  * This class create and manage the cookies for saving the consent to comply the GDPR
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/_dialog.js

@@ -5,7 +5,6 @@
  * This class enable the functionalities for open/close/submit an HTML dialog
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/_dropdown.js

@@ -6,7 +6,6 @@
  * This component is a simpler version of the Toggle
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  * 
  */

package/js/_scroll.js

@@ -5,7 +5,6 @@
  * This script enable an HTML element to scroll to a position and to spy some buttons
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/_sidebar.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to toggles multiple tabpanel
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  * 
  */

package/js/_slider.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to make an element slider
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  * 
  * * keep check on the scrollend event: https://caniuse.com/?search=scrollend

package/js/_sortable.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to sort a list or a table
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/_tabpanel.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to toggles multiple tabpanel
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  * 
  */

package/js/_toggle.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to un/collapse some element by another
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  * 
  * * NOTE: Check availability of the ariaControlsElements to select the #ids

package/js/_tree.js

@@ -5,7 +5,6 @@
  * This class enable the functionality to expand/contract element as a tree
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/utilities/_base-component.js

@@ -5,7 +5,6 @@
  * This class regroup common functionalities for other classes
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/utilities/_cookie.js

@@ -5,7 +5,6 @@
  * This class create and manage the cookies
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/utilities/_error.js

@@ -5,7 +5,6 @@
  * This make global error message
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/js/utilities/_form-helper.js

@@ -5,7 +5,6 @@
  * This class regroup some helper function for forms
  * 
  * @author Natacha Herth
- * @version 0.0.1
  * @copyright Natacha Herth, design & web development
  */
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@natachah/vanilla-frontend",
-    "version": "0.0.5",
+    "version": "0.1.1",
     "description": "A vanilla frontend framework",
     "keywords": [
         "html5",
@@ -14,6 +14,7 @@
         "email": "info@natachaherth.ch"
     },
     "license": "MIT",
+    "readme": "README.md",
     "scripts": {
         "test": "vitest --coverage",
         "code:build": "node esbuild.mjs",