@natachah/vanilla-frontend 0.4.0 → 1.0.0

package/docs/start/mixin.md

@@ -0,0 +1,203 @@
+# SCSS Mixins
+
+The framework comes with some helpful SCSS mixins to re-use.
+
+To use them, import this file:
+```SCSS
+@use '@natachah/vanilla-frontend/scss/abstracts/mixins';
+```
+
+## Create an item
+
+This mixin creates an element as an item with some default style properties:
+
+- Color
+- Background
+- Border
+- Border radius
+- Padding
+- State :hover, :focus, :active and :disabled
+
+```SCSS
+
+/// Create a basic item that can be interactive or not
+///
+/// @param {string} $name - Name of the component
+/// @param {array} $states - List of interactions (can be: focus, hover, active, disabled)
+/// @param {array} $properties - List of default properties (check in /variables/_setting.scss)
+/// @access public
+///
+
+@include as-item($name, $states: (), $properties: default.$item-properties)
+```
+
+The default properties are set inside the `default.$item-properties` variable of the file `./scss/variables/_setting.scss`
+
+In case that you want to customize the default:
+
+```scss
+@use "sass:map";
+@use "@natachah/vanilla-frontend/scss/abstracts/default";
+@use '@natachah/vanilla-frontend/scss/abstracts/mixins' as *;
+
+// Change default properties
+$submenuProperties: map.merge(default.$item-properties, (background: var(--color-body)));
+
+#submenu {
+    @include as-list('submenu', ('focus', 'hover', 'active', 'disabled'), $submenuProperties);                  
+}
+
+```
+
+## Create a list
+
+This mixin transforms a `<ul/ol/div>` into a group list with all children as items.
+
+```SCSS
+/// Create a basic list group that can be interactive
+///
+/// @require {mixin} as-item
+/// @param {string} $name - Name of the component
+/// @param {array} $states - List of interactions (can be: focus, hover, active, disabled)
+/// @param {array} $properties - List of default properties (check in /variables/_setting.scss)
+/// @access public
+///
+
+@include as-list($name, $states: (), $properties: default.$item-properties)
+```
+
+::: info
+This mixin is used for the list and dropdown components.
+:::
+
+## Add header and footer to an item
+
+This mixin will create a `<header>` and a `<footer>` with negative margin, some padding, and a divider border.
+
+```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)
+```
+::: info
+This mixin is used in Dialog components.
+:::
+
+## Create a outline variation
+
+This mixin will create the `.outline` class to transform an item to the outline variation.
+
+```SCSS
+
+/// Create a outline variation
+///
+/// @param {string} $name - Name of the component
+/// @param {array} $states - List of interactions
+/// @param {string} $color - The color of the item
+/// @param {string} $contrast - The color contrast of the item
+/// @access public
+///
+
+@include with-outline-variation($name, $states: (), $color: var(--color-font), $contrast: var(--color-body))
+```
+
+## Create some color variations
+
+This mixin will create the .COLOR classes to transform an item into multiple color variations.
+
+```SCSS
+
+/// Create some color variations
+///
+/// @param {string} $name - Name of the component
+/// @param {array} $states - List of interactions
+/// @param {array} $colors - List of colors
+/// @param {boolean} $withOutline - Thit outline colored version
+/// @access public
+///
+
+@include with-color-variations($name, $states: (), $colors: (), $withOutline: false)
+```
+
+## Transform table to be responsive
+
+This mixin will transform a `<table>` into a more responsive view. You must use this mixin inside a `@media` or a `@container`.
+
+It also requires adding the attribute `data-label="Name of the column"` on each `<td>`.
+
+By default the grid is set on 2 columns (15 characters and auto).
+
+::: code-group
+
+```html
+<table>
+    <thead>
+        <tr>
+            <th>Header A</th>
+            <th>Header B</th>
+            <th>Header C</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td data-label="Header A">Cell</td>
+            <td data-label="Header B">Cell</td>
+            <td data-label="Header C">Cell</td>
+        </tr>
+    </tbody>
+</table>
+```
+
+```scss
+@container (max-width:800px) {
+    table {
+        @include as-responsive-table()
+    }
+}
+```
+
+```css
+--table-grid-template: 15ch 1fr;
+```
+
+:::
+
+## Flex grid utilities
+
+There two mixins to make it easier to change the offset and the width of a specific column when used with the **grid** component.
+
+By default the `flex-grid-wider-column` parameter is **2**, to have the width equal of two columns width.
+
+By default the `flex-grid-offset-column` parameter is **1** to take the place of one column width.
+
+::: code-group
+
+```html
+<div class="flex-grid">
+    <div>Flex 1</div>
+    <div>Flex 2</div>
+    <div>Flex 3</div>
+    <div id="wider">Wider of 3</div>
+    <div id="offset">Offset of 2</div>
+</div>
+```
+
+```scss
+#wider {
+    @include flex-grid-wider-column(3)
+}
+
+#offset {
+    @include flex-grid-offset-column(2)
+}
+```
+
+:::
+
+::: warning
+This mixins only work with `.flex-grid`
+:::

package/docs/vuejs/ComponentPreview.vue

@@ -0,0 +1,99 @@
+<template>
+    
+    <iframe
+    ref="iframeRef"
+    :srcdoc="generateHTML"
+    @load="onIframeLoad"
+    class="iframe-content"
+    :style="dynamicStyle"
+    ></iframe>
+
+    <div ref="slotSource" hidden>
+      <slot></slot>
+    </div>
+
+</template>
+
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+
+// 1. Définition de la prop 'height'
+const props = defineProps({
+  height: {
+    type: String,
+    default: null 
+  }
+})
+
+console.log(props)
+
+const slotSource = ref(null)
+const rawHtml = ref('')
+const iframeRef = ref(null)
+
+// 2. Création d'un style dynamique
+const dynamicStyle = computed(() => {
+  return props.height ? { height: props.height } : {}
+})
+
+// // On récupère le HTML brut à l'intérieur du slot
+onMounted(() => {
+  if (slotSource.value) {
+    rawHtml.value = slotSource.value.innerHTML.trim()
+  }
+})
+
+const generateHTML = computed(() => {
+    return `
+        <!DOCTYPE html>
+        <html>
+            <head>
+                <meta charset="utf-8">
+                <link rel="stylesheet" href="/bundles/vanilla-frontend-doc.css">
+                <style>
+                    html[data-theme=light] .demo-theme {
+                        color: black;
+                        background: white
+                    }
+                    html[data-theme=dark] .demo-theme {
+                        color: white;
+                        background: black
+                    }
+                    body {
+                        padding:1rem;
+                    }
+
+                </style>
+            </head>
+            <body>
+                ${rawHtml.value}
+                <script src="/bundles/vanilla-frontend-doc.js"><\/script>
+            </body>
+        </html>
+    `
+})
+
+// On n'ajuste automatiquement la hauteur QUE si aucune prop height n'est fournie
+const onIframeLoad = () => {
+  const iframe = iframeRef.value
+  if (!props.height && iframe && iframe.contentWindow) {
+    setTimeout(() => {
+      const height = iframe.contentWindow.document.documentElement.offsetHeight // scrollHeight
+      iframe.style.height = height + 5 + 'px'
+    }, 50)
+  }
+}
+</script>
+
+<style scoped>
+
+.iframe-content {
+    width: 100%;
+    border: 1px solid var(--vp-c-divider);
+    border-radius: var(--docsearch-border-radius);
+    display: block;
+    transition: height 0.2s ease;
+    background: var(--vp-c-bg);
+}
+
+</style>

package/js/_slider.js

@@ -54,7 +54,9 @@ export default class Slider extends BaseComponent {
         this._buttons = {
             prev: document.querySelector(`[aria-controls=${this._element.id}][data-slider-prev]`),
             next: document.querySelector(`[aria-controls=${this._element.id}][data-slider-next]`),
-            tabs: document.querySelectorAll(`[aria-controls=${this._element.id}][role=tablist] [role=tab]`)
+            tabs: document.querySelectorAll(`[aria-controls=${this._element.id}][role=tablist] [role=tab]`),
+            play: document.querySelector(`[aria-controls=${this._element.id}][data-slider-play]`),
+            pause: document.querySelector(`[aria-controls=${this._element.id}][data-slider-pause]`),
         }
 
         this._current = 0
@@ -109,6 +111,20 @@ export default class Slider extends BaseComponent {
                 clearInterval(this._interval)
                 this._interval = setInterval(() => this.next(), this._options.autoplay)
             })
+
+            // Add event listeners for pause
+            if (this._buttons.pause) {
+                this._buttons.pause.addEventListener('click', () => {
+                    clearInterval(this._interval)
+                })
+            }
+
+            // Add event listeners for play
+            if (this._buttons.play) {
+                this._buttons.play.addEventListener('click', () => {
+                    this._interval = setInterval(() => this.next(), this._options.autoplay)
+                })
+            }
         }
 
         // Enable swipe functionality on touch devices.

package/js/vanilla-frontend-doc.js

@@ -0,0 +1,105 @@
+// If you need to create some component, you can use this
+import BaseComponent from "./utilities/_base-component"
+import ErrorMessage from "./utilities/_error"
+import Cookie from "./utilities/_cookie"
+
+// Here the helpers
+import FormHelper from "./utilities/_form-helper"
+
+// Here the components
+import Autofill from "./_autofill"
+import CheckAll from "./_check-all"
+import Comfort from "./_comfort"
+import Consent from "./_consent"
+import Dialog from "./_dialog"
+import Dropdown from "./_dropdown"
+import Drawer from "./_drawer"
+import Scroll from "./_scroll"
+import Slider from "./_slider"
+import Sortable from "./_sortable"
+import Tabpanel from "./_tabpanel"
+import Toggle from "./_toggle"
+import Tree from "./_tree"
+
+// * Dialog
+
+const myDialog = document.getElementById('myDialog')
+if (myDialog) new Dialog(myDialog)
+
+const layoutDialog = document.getElementById('layoutDialog')
+if (layoutDialog) new Dialog(layoutDialog)
+
+const formDialog = document.getElementById('formDialog')
+if (formDialog) new Dialog(formDialog)
+
+const jsDialog = document.getElementById('jsDialog')
+if (jsDialog) {
+    new Dialog(jsDialog)
+    jsDialog.addEventListener('dialog:submited', (e) => {
+        const value = e.detail.form.querySelector('input').value
+        document.getElementById('favorite').innerText = value
+    })
+}
+
+const drawer = document.getElementById('drawer')
+if (drawer) new Drawer(drawer)
+
+const dropdowns = document.querySelectorAll('.dropdown-js')
+if (dropdowns) dropdowns.forEach(dropdown => new Dropdown(dropdown))
+
+const slider = document.getElementById('slider')
+if (slider) new Slider(slider, {
+    //behavior: 'instant',
+    loop: true,
+    //autoplay: 1500
+})
+
+const autofills = document.querySelectorAll('.autofill-demo')
+if (autofills) autofills.forEach(autofill => new Autofill(autofill))
+
+const checkboxAll = document.getElementById('checkboxAll')
+if (checkboxAll) new CheckAll(checkboxAll)
+
+new Comfort('demo-confort')
+
+if (document.getElementById('demoCookies')) {
+    new Consent('demo-consent', 'demoCookies', 'demoCookiesPreferences')
+}
+
+const passwordButton = document.getElementById('demoPassword')
+if (passwordButton) passwordButton.addEventListener('click', () => FormHelper.togglePassword(passwordButton))
+
+const demoToggleFormButton = document.getElementById('toggleFormButton')
+const demoToggleFormContent = document.getElementById('toggleFormContent')
+
+if (demoToggleFormButton && demoToggleFormContent) {
+    const fields = demoToggleFormContent.querySelectorAll('input,select,textarea')
+    new Toggle(demoToggleFormButton)
+    demoToggleFormButton.addEventListener('toggle:changed', (e) => {
+        FormHelper.toggleAttributes(fields, !demoToggleFormContent.hidden, {
+            reset: true,
+            disabled: true,
+            required: ['test'],
+            unchanged: ['test']
+        })
+    })
+}
+
+const scrollSpy = document.getElementById('demoScrollSpy')
+if (scrollSpy) {
+    new Scroll(scrollSpy, {
+        navigation: 'demoScrollNav'
+    })
+}
+
+const sortables = document.querySelectorAll('.demo-sortable')
+if (sortables) sortables.forEach(sortable => new Sortable(sortable))
+
+const tabpanel = document.getElementById('myPanel')
+if (tabpanel) new Tabpanel(tabpanel)
+
+const toggles = document.querySelectorAll('.demo-toggle')
+if (toggles) toggles.forEach(toggle => new Toggle(toggle))
+
+const trees = document.querySelectorAll('.demo-tree')
+if (trees) trees.forEach(tree => new Tree(tree))

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@natachah/vanilla-frontend",
-    "version": "0.4.0",
+    "version": "1.0.0",
     "type": "module",
     "description": "A vanilla frontend framework",
     "keywords": [
@@ -17,10 +17,11 @@
     "license": "MIT",
     "scripts": {
         "test": "vitest --coverage",
-        "code:build": "node esbuild.mjs",
-        "docs:dev": "cd docs && vite",
-        "docs:build": "cd docs && vite build",
-        "docs:preview": "cd docs && vite preview"
+        "sandbox": "cd sandbox && vite",
+        "assets:build": "vite build",
+        "docs:dev": "vitepress dev docs",
+        "docs:build": "vitepress build docs",
+        "docs:preview": "vitepress preview docs"
     },
     "repository": {
         "type": "git",
@@ -29,15 +30,11 @@
     "devDependencies": {
         "@testing-library/dom": "^9.3.4",
         "@vitest/coverage-v8": "^4.0.17",
-        "autoprefixer": "^10.4.19",
-        "esbuild": "^0.27.2",
-        "esbuild-sass-plugin": "^3.3.1",
-        "fast-glob": "^3.3.2",
-        "happy-dom": "^20.3.3",
-        "postcss": "^8.4.38",
-        "sass": "^1.77.5",
-        "shiki": "^1.7.0",
-        "vite": "^7.3.1",
+        "autoprefixer": "^10.4.23",
+        "happy-dom": "^20.3.4",
+        "postcss": "^8.5.6",
+        "sass": "^1.97.3",
+        "vitepress": "^2.0.0-alpha.15",
         "vitest": "^4.0.17"
     }
 }

package/public/404.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>404 | Vanilla Frontend</title>
+    <meta name="description" content="Not Found">
+    <meta name="generator" content="VitePress v2.0.0-alpha.16">
+    <link rel="preload stylesheet" href="/assets/style.zIeGMibA.css" as="style">
+    <link rel="preload stylesheet" href="/vp-icons.css" as="style">
+    
+    <script type="module" src="/assets/app.DsgDPRSA.js"></script>
+    <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"base_layout.md\":\"CTGv6rTn\",\"base_media.md\":\"CcuDUcF-\",\"base_reset.md\":\"DqIdqFRJ\",\"base_typography.md\":\"DV-ikqGZ\",\"classes_badge.md\":\"BCGzPr6f\",\"classes_breadcrumb.md\":\"vU6jlo36\",\"classes_card.md\":\"BZEh2l_B\",\"classes_dropdown.md\":\"BLVw_xQY\",\"classes_grid.md\":\"47v-Ybqe\",\"classes_list.md\":\"BW9PWZV1\",\"components_button.md\":\"vx3HzdpN\",\"components_dialog.md\":\"C-0gJGus\",\"components_disclosure.md\":\"DeSRu9_P\",\"components_form.md\":\"Be8d5WFv\",\"components_loading.md\":\"CKDG7z5x\",\"components_popover.md\":\"CwgNttNc\",\"components_progress.md\":\"CNC7rJiC\",\"components_table.md\":\"LyBkIDkF\",\"index.md\":\"CJiHmjB7\",\"javascript_autofill.md\":\"BewVUo4H\",\"javascript_check.md\":\"B6ajE66i\",\"javascript_comfort.md\":\"BRci3j7V\",\"javascript_consent.md\":\"Bjv8ZDS6\",\"javascript_cookie.md\":\"Dlhyk4Ha\",\"javascript_drawer.md\":\"BCJX3fL-\",\"javascript_form.md\":\"Cwf_gxLI\",\"javascript_scroll.md\":\"BrJijWbF\",\"javascript_slider.md\":\"DDO8wC4u\",\"javascript_sortable.md\":\"BKyem7yw\",\"javascript_tabpanel.md\":\"D9M-_xE0\",\"javascript_toggle.md\":\"C8582WNC\",\"javascript_trap.md\":\"Bc59YUng\",\"javascript_tree.md\":\"uc1UUsFV\",\"prologue_conventions.md\":\"D8nVwlRS\",\"prologue_release.md\":\"CG6nuFnt\",\"prologue_upgrade.md\":\"CFxokaBG\",\"start_customization.md\":\"t-ze_NoQ\",\"start_install.md\":\"OluH7l11\",\"start_mixin.md\":\"D76cLRSX\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Vanilla Frontend\",\"description\":\"Documentation of my package\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"Home\",\"link\":\"/\"}],\"sidebar\":[{\"text\":\"Prologue\",\"items\":[{\"text\":\"Release Notes\",\"link\":\"/prologue/release\"},{\"text\":\"Upgrade guide\",\"link\":\"/prologue/upgrade\"},{\"text\":\"Conventions\",\"link\":\"/prologue/conventions\"}]},{\"text\":\"Quick start\",\"items\":[{\"text\":\"Install\",\"link\":\"/start/install\"},{\"text\":\"Customization\",\"link\":\"/start/customization\"},{\"text\":\"SCSS mixin\",\"link\":\"/start/mixin\"}]},{\"text\":\"Base\",\"items\":[{\"text\":\"Reset\",\"link\":\"/base/reset\"},{\"text\":\"Layout\",\"link\":\"/base/layout\"},{\"text\":\"Typography\",\"link\":\"/base/typography\"},{\"text\":\"Media\",\"link\":\"/base/media\"}]},{\"text\":\"Components\",\"items\":[{\"text\":\"Button\",\"link\":\"/components/button\"},{\"text\":\"Dialog\",\"link\":\"/components/dialog\"},{\"text\":\"Disclosure\",\"link\":\"/components/disclosure\"},{\"text\":\"Form\",\"link\":\"/components/form\"},{\"text\":\"Loading\",\"link\":\"/components/loading\"},{\"text\":\"Popover\",\"link\":\"/components/popover\"},{\"text\":\"Progress\",\"link\":\"/components/progress\"},{\"text\":\"Table\",\"link\":\"/components/table\"}]},{\"text\":\"Class components\",\"items\":[{\"text\":\"Badge\",\"link\":\"/classes/badge\"},{\"text\":\"Breadcrumb\",\"link\":\"/classes/breadcrumb\"},{\"text\":\"Card\",\"link\":\"/classes/card\"},{\"text\":\"Dropdown\",\"link\":\"/classes/dropdown\"},{\"text\":\"Grid\",\"link\":\"/classes/grid\"},{\"text\":\"List\",\"link\":\"/classes/list\"}]},{\"text\":\"Javascript\",\"items\":[{\"text\":\"Autofill\",\"link\":\"/javascript/autofill\"},{\"text\":\"Check all\",\"link\":\"/javascript/check\"},{\"text\":\"Comfort\",\"link\":\"/javascript/comfort\"},{\"text\":\"Consent\",\"link\":\"/javascript/consent\"},{\"text\":\"Cookie\",\"link\":\"/javascript/cookie\"},{\"text\":\"Drawer\",\"link\":\"/javascript/drawer\"},{\"text\":\"Form helper\",\"link\":\"/javascript/form\"},{\"text\":\"Scroll\",\"link\":\"/javascript/scroll\"},{\"text\":\"Slider\",\"link\":\"/javascript/slider\"},{\"text\":\"Sortable\",\"link\":\"/javascript/sortable\"},{\"text\":\"Tabpanel\",\"link\":\"/javascript/tabpanel\"},{\"text\":\"Toggle\",\"link\":\"/javascript/toggle\"},{\"text\":\"Trap\",\"link\":\"/javascript/trap\"},{\"text\":\"Tree\",\"link\":\"/javascript/tree\"}]}],\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2024-present <a href=\\\"https://natachaherth.ch\\\">Natacha Herth</a>\"},\"socialLinks\":[{\"icon\":{\"svg\":\"<svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"16\\\" height=\\\"16\\\" fill=\\\"currentColor\\\" class=\\\"bi bi-gitlab\\\" viewBox=\\\"0 0 16 16\\\"><path d=\\\"m15.734 6.1-.022-.058L13.534.358a.57.57 0 0 0-.563-.356.6.6 0 0 0-.328.122.6.6 0 0 0-.193.294l-1.47 4.499H5.025l-1.47-4.5A.572.572 0 0 0 2.47.358L.289 6.04l-.022.057A4.044 4.044 0 0 0 1.61 10.77l.007.006.02.014 3.318 2.485 1.64 1.242 1 .755a.67.67 0 0 0 .814 0l1-.755 1.64-1.242 3.338-2.5.009-.007a4.05 4.05 0 0 0 1.34-4.668Z\\\" /></svg>\"},\"link\":\"https://gitlab.com/packages4913705/vanilla-frontend\",\"ariaLabel\":\"Gitlab\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false,\"additionalConfig\":{}}");</script>
+    
+  </body>
+</html>

package/public/assets/app.DsgDPRSA.js

@@ -0,0 +1 @@
+import{t as p}from"./chunks/theme.DL_11MHV.js";import{B as o,a4 as i,a5 as u,a6 as c,a7 as l,a8 as f,a9 as d,aa as m,ab as h,ac as g,ad as A,d as v,u as y,p as C,x as P,ae as b,af as w,ag as E,ah as R}from"./chunks/framework.CaiDwmc7.js";function r(e){if(e.extends){const a=r(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const n=r(p),S=v({name:"VitePressApp",setup(){const{site:e,lang:a,dir:t}=y();return C(()=>{P(()=>{document.documentElement.lang=a.value,document.documentElement.dir=t.value})}),e.value.router.prefetchLinks&&b(),w(),E(),n.setup&&n.setup(),()=>R(n.Layout)}});async function T(){globalThis.__VITEPRESS__=!0;const e=D(),a=x();a.provide(u,e);const t=c(e.route);return a.provide(l,t),a.component("Content",f),a.component("ClientOnly",d),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),n.enhanceApp&&await n.enhanceApp({app:a,router:e,siteData:m}),{app:a,router:e,data:t}}function x(){return A(S)}function D(){let e=o;return h(a=>{let t=g(a),s=null;return t&&(e&&(t=t.replace(/\.js$/,".lean.js")),s=import(t)),o&&(e=!1),s},n.NotFound)}o&&T().then(({app:e,router:a,data:t})=>{a.go(location.href,{initialLoad:!0}).then(()=>{i(a.route,t.site),e.mount("#app")})});export{T as createApp};

package/public/assets/base_layout.md.CTGv6rTn.js

@@ -0,0 +1,13 @@
+import{_ as i,o as a,c as t,ai as e}from"./chunks/framework.CaiDwmc7.js";const c=JSON.parse('{"title":"Layout","description":"","frontmatter":{},"headers":[],"relativePath":"base/layout.md","filePath":"base/layout.md"}'),l={name:"base/layout.md"};function n(h,s,p,d,k,r){return a(),t("div",null,[...s[0]||(s[0]=[e(`<h1 id="layout" tabindex="-1">Layout <a class="header-anchor" href="#layout" aria-label="Permalink to “Layout”">​</a></h1><p>The framework uses a CSS grid to create the default page layout on the body. It features default CSS variables that you can customize, such as the maximum content width, which is set at <strong>1280px</strong>. Since it uses a grid, it includes gaps and columns.</p><p>Also, the grid template as two content zone available as <strong>full</strong> and <strong>content</strong> that you can use as you wish.</p><p>But as every website can be different, these value can be changed !</p><div class="language-scss"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/base/layout&#39;</span></span></code></pre></div><h2 id="device-breakpoint-viewport" tabindex="-1">Device Breakpoint Viewport <a class="header-anchor" href="#device-breakpoint-viewport" aria-label="Permalink to “Device Breakpoint Viewport”">​</a></h2><table tabindex="0"><thead><tr><th>Device</th><th>Breakpoint</th><th>Columns</th><th>Max-width</th></tr></thead><tbody><tr><td>Mobile</td><td>&lt; 720px</td><td>1</td><td>100%</td></tr><tr><td>Tablet</td><td>&lt; 1024px</td><td>6</td><td>100%</td></tr><tr><td>Laptop</td><td>&lt; 1440px</td><td>12</td><td>1280px</td></tr><tr><td>Desktop</td><td>&gt; 1440px</td><td>12</td><td>1280px</td></tr></tbody></table><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-92" id="tab-93" checked><label data-title="html" for="tab-93">html</label><input type="radio" name="group-92" id="tab-94"><label data-title="scss" for="tab-94">scss</label><input type="radio" name="group-92" id="tab-95"><label data-title="css properties" for="tab-95">css properties</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> data-preload</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">header</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">header</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">main</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">footer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">footer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">body</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-scss"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">@use</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@natachah/vanilla-frontend/scss/base/layout&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--layout-width</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--layout-gap-block</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--layout-gap-inline</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--layout-columns</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--subgrid-gap-block</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--subgrid-gap-inline</span></span></code></pre></div></div></div><div class="tip custom-block"><p class="custom-block-title custom-block-title-default">TIP</p><p>The <code>--subgrid-gap-*</code> are used for the direct child as <code>&lt;header&gt;</code>, <code>&lt;main&gt;</code> and <code>&lt;footer&gt;</code>. It set by default the gap block at <strong>0</strong> and take the layout inline gap.</p></div><h2 id="container" tabindex="-1">Container <a class="header-anchor" href="#container" aria-label="Permalink to “Container”">​</a></h2><p>The default layout include a <code>.container</code> and a <code>.container-full</code>.</p><p>The classic container is centered into the page layout and the full container take the full length of the page. It&#39;s perfect if you need to set a background color to a section.</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">section</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;container&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">section</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">section</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;container-full&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">section</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="subgrid" tabindex="-1">Subgrid <a class="header-anchor" href="#subgrid" aria-label="Permalink to “Subgrid”">​</a></h2><p>You can re-use the layout grid into a container with the class <code>.subgrid</code>. Then you can use the grid-column CSS property to manage the space.</p><div class="vp-code-group"><div class="tabs"><input type="radio" name="group-118" id="tab-119" checked><label data-title="html" for="tab-119">html</label><input type="radio" name="group-118" id="tab-120"><label data-title="css properties" for="tab-120">css properties</label></div><div class="blocks"><div class="language-html active"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">section</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;container subgrid&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">section</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">section</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;container-full subgrid&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">section</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--subgrid-gap-block</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">--subgrid-gap-inline</span></span></code></pre></div></div></div>`,16)])])}const g=i(l,[["render",n]]);export{c as __pageData,g as default};

package/public/assets/base_layout.md.CTGv6rTn.lean.js

@@ -0,0 +1 @@
+import{_ as i,o as a,c as t,ai as e}from"./chunks/framework.CaiDwmc7.js";const c=JSON.parse('{"title":"Layout","description":"","frontmatter":{},"headers":[],"relativePath":"base/layout.md","filePath":"base/layout.md"}'),l={name:"base/layout.md"};function n(h,s,p,d,k,r){return a(),t("div",null,[...s[0]||(s[0]=[e("",16)])])}const g=i(l,[["render",n]]);export{c as __pageData,g as default};