Merge branch release/v1.0.0 into main

commit c76fc5f494d572b3e8198ad0d5ca23c3eb3f0c41
Author: Francesco Improta <francesco@designabile.com>
Date:   Wed Aug 24 15:04:58 2022 +0200

    Added missing links

commit 5b1a0cd
Author: Francesco Improta <francesco@designabile.com>
Date:   Wed Aug 24 15:03:14 2022 +0200

    New blog post about release 1.0.0

commit 0121e48
Author: Francesco Improta <francesco@designabile.com>
Date:   Wed Aug 24 14:48:55 2022 +0200

    Changed variables text

commit 2de4b0b
Author: Francesco Improta <francesco@designabile.com>
Date:   Mon Aug 22 18:17:26 2022 +0200

    Making the bundle file public

commit 038a6cc
Author: Francesco Improta <francesco@designabile.com>
Date:   Mon Aug 22 17:58:35 2022 +0200

    Added .zip file

commit 27c66eb
Author: Francesco Improta <francesco@designabile.com>
Date:   Mon Aug 22 17:58:27 2022 +0200

    Bumped version

commit 9494414
Author: Francesco Improta <francesco@designabile.com>
Date:   Mon Aug 22 17:57:33 2022 +0200

    Squashed commit of the following:

    commit 79c8360
    Author: Francesco Improta <francesco@designabile.com>
    Date:   Fri Aug 19 16:17:20 2022 +0200

        Added min css

    commit f65deaf
    Author: Francesco Improta <francesco@designabile.com>
    Date:   Fri Aug 19 16:17:15 2022 +0200

        Added doc page

    commit 574c818
    Author: Francesco Improta <francesco@designabile.com>
    Date:   Fri Aug 19 16:06:49 2022 +0200

        Changed input display

    commit c66259b
    Author: Francesco Improta <francesco@designabile.com>
    Date:   Fri Aug 19 16:04:20 2022 +0200

        Changed html

    commit 6742fc9
    Author: Francesco Improta <francesco@designabile.com>
    Date:   Thu Aug 18 16:44:27 2022 +0200

        Added toggle variables

    commit 480bddd
    Author: Francesco Improta <francesco@designabile.com>
    Date:   Wed Aug 17 17:39:36 2022 +0200

        Removed margin

    commit cadb106
    Author: Francesco Improta <francesco@designabile.com>
    Date:   Wed Aug 17 17:38:59 2022 +0200

        Added toggle

commit 49dfe82
Author: Francesco Improta <francesco@designabile.com>
Date:   Fri Jul 1 16:10:02 2022 +0200

    Merge branch 'feature/#36-range-slider' into dev

commit 6b075c8
Author: Francesco Improta <francesco@designabile.com>
Date:   Thu Jun 9 16:05:03 2022 +0200

    Squashed commit of the following:

    commit 2b3c62f
    Author: Francesco Improta <francesco@designabile.com>
    Date:   Thu Jun 9 16:03:11 2022 +0200

        Added fullpage doc #45

    commit 77c8b5d
    Author: Francesco Improta <francesco@designabile.com>
    Date:   Thu Jun 9 16:03:01 2022 +0200

        Compiled CSS

    commit 320244a
    Author: Francesco Improta <francesco@designabile.com>
    Date:   Thu Jun 9 16:02:50 2022 +0200

        Added slide background variable

    commit 71bfb85
    Author: Francesco Improta <francesco@designabile.com>
    Date:   Thu Jun 9 15:40:25 2022 +0200

        Built minified css

    commit 6cf6453
    Author: Francesco Improta <francesco@designabile.com>
    Date:   Thu Jun 9 15:40:04 2022 +0200

        Restored default settings

    commit a76d123
    Author: Francesco Improta <francesco@designabile.com>
    Date:   Tue Jun 7 11:41:11 2022 +0200

        Added fullpage draft

    commit b89ea49
    Author: Francesco Improta <francesco@designabile.com>
    Date:   Tue Jun 7 11:37:00 2022 +0200

        Added verticalScroll graphic changes #45

    commit 2b86461
    Author: Francesco Improta <francesco@designabile.com>
    Date:   Tue Jun 7 11:17:58 2022 +0200

        Added data-slide-content

    commit 8660734
    Author: Francesco Improta <francesco@designabile.com>
    Date:   Wed Jun 1 15:02:38 2022 +0200

        Fixed Sass variables

    commit 5cd201d
    Author: Francesco Improta <francesco@designabile.com>
    Date:   Wed Jun 1 15:02:18 2022 +0200

        Removed margin from body element

    commit aa93105
    Author: Francesco Improta <francesco@designabile.com>
    Date:   Mon May 16 14:26:27 2022 +0200

        Updated height with variable #45

    commit d5b8d3f
    Author: Francesco Improta <francesco@designabile.com>
    Date:   Thu May 12 18:06:29 2022 +0200

        Added options

    commit 4ce003a
    Author: Francesco Improta <francesco@designabile.com>
    Date:   Wed May 11 16:13:30 2022 +0200

        Renamed in fullpage

    commit a22a7b2
    Author: Francesco Improta <francesco@designabile.com>
    Date:   Wed May 11 14:52:30 2022 +0200

        Added fullpage template and styles #45

    commit c039f9b
    Author: Francesco Improta <francesco@designabile.com>
    Date:   Wed Apr 27 13:57:53 2022 +0200

        Added first template version #45

commit 91247f9
Merge: caa230a 026acfe
Author: Francesco Improta <francesco@designabile.com>
Date:   Sun Apr 24 09:09:54 2022 +0200

    Merge branch 'main' into dev

commit caa230a
Author: Omar Muscatello <7016897+omaxel@users.noreply.github.com>
Date:   Sun Apr 24 08:22:21 2022 +0200

    SCSS compilation and library building (#44)

    * Add SCSS compiler

    * Add documentation

    * Use compiled library in docs

commit d9814b1
Author: Francesco Improta <francesco@designabile.com>
Date:   Thu Mar 24 15:10:54 2022 +0100

    Added a draft for the next release

content/blog/release-1.0.0/index.md

@@ -0,0 +1,22 @@
+---
+title: "Release v1.0.0"
+description: "What new features are we working on this year"
+date: 2022-08-24T09:00:00+01:00
+draft: false
+weight: 90
+contributors: ["Francesco Improta"]
+---
+
+Today, we're finally releasing the **v1.0.0**. 🎉
+
+This release was focused on adding new components to the library, which counts **a total of 9 pure css UI components** 🚀.
+
+Here's the list of the new additions: 
+
+- [**Fullpage Slider**](/docs/components/fullpage/) component
+- [**Range Slider**](/docs/components/range/) component
+- [**Toggle**](/docs/components/toggle/) component
+
+At the start of 2022, [we planned to create some components](/blog/2022-product-roadmap/) which then were excluded. The reason for this was mainly for the lack of browser support.
+
+We hope you enjoy it! 🙌

content/docs/components/accordion.md

@@ -91,7 +91,7 @@ Each item is composed by a title and content part:
 
 ## Variables
 
-List of variables used. Customize the component's design by changing or overriding these values:
+This is the list of variables related to this component. You can customize the design by changing or overriding these values:
 
 ```css
 --accordion-border-color: var(--cssui-gray-lighter);

content/docs/components/dropdown.md

@@ -52,7 +52,7 @@ Dropdown is built using `<details>` HTML5 tag, which creates a disclosure widget
 
 ## Variables
 
-List of variables used. Customize the component's design by changing or overriding these values:
+This is the list of variables related to this component. You can customize the design by changing or overriding these values:
 
 ```css
   --dropdown-border-radius: var(--cssui-radius);

content/docs/components/fullpage.md

@@ -0,0 +1,110 @@
+---
+title: "Fullpage"
+description: "One page scroll sections"
+lead: "Create fullscreen scrolling websites, pages or components. Designed for touch. Totally responsive."
+date: 2022-06-06T11:40:00+01:00
+lastmod: 2022-06-06T11:40:00+01:00
+draft: false
+images: []
+menu:
+  docs:
+    parent: "components"
+weight: 610
+toc: true
+---
+
+Navigate fullpage slides by swiping horizzontalyy on touch devices or trackpad. In alternative, click on the left/right arrows to move forward or go back.
+
+<div class="preview">
+  <link rel="stylesheet" href="/cssui/cssui.min.css">
+  <link rel="stylesheet" href="/cssui/cssui.fullpage.min.css">
+
+  <div data-fullpage>
+    <div data-slides>
+      <section id="slide-1" data-slide="1">
+        <div data-slide-content>
+          Slide 1
+        </div>
+        <nav data-slide-nav="arrows">
+          <span data-slide-arrow="prev">Prev</span>
+          <a data-slide-arrow="next" href="#slide-2" title="Next">Next</a>
+        </nav>
+      </section>
+      <section id="slide-2" data-slide="2">
+        <div data-slide-content>
+          Slide 2
+        </div>
+        <nav data-slide-nav="arrows">
+          <a data-slide-arrow="prev" href="#slide-1" title="Prev">Prev</a>
+          <a data-slide-arrow="next" href="#slide-3" title="Next">Next</a>
+        </nav>
+      </section>
+      <section id="slide-3" data-slide="3">
+        <div data-slide-content>
+          Slide 3
+        </div>
+        <nav data-slide-nav="arrows">
+          <a data-slide-arrow="prev" href="#slide-2" title="Prev">Prev</a>
+          <a data-slide-arrow="next" href="#slide-4" title="Next">Next</a>
+        </nav>
+      </section>
+      <section id="slide-4" data-slide="4">
+        <div data-slide-content>
+          Slide 4
+        </div>
+        <nav data-slide-nav="arrows">
+          <a data-slide-arrow="prev" href="#slide-3" title="Prev">Prev</a>
+          <span data-slide-arrow="next">Next</span>
+        </nav>
+      </section>
+    </div>
+  </div>
+</div>
+
+## Usage
+The fullpage component consists in a list of slides which occupy the entire viewport. From a gallery sliders to editorial news, the range of usage is various. It's completely responsive and customizable.
+
+
+
+## Customization
+Customizing the fullpage slider is pretty simple and straightforward. You can do it with few changes to Sass variables (functionality) and CSS Custom Properties (layout).
+
+### Set direction
+You can set the slider direction by changing `$verticalScroll` Sass variable. Setting it to `true` changes the entire slider layout suiting it for vertical scrolling. 
+
+It's set `false` by default.
+
+### Enable navigation
+You can enable/disable the navigation arrows by changing the `$slideNavigation` Sass variable. 
+
+It's set `true` by default.
+
+### Change background
+Each slide has a default background color set by `--slide-background` variable.
+
+```css
+[data-fullpage] {
+  --slide-background: #cbd5e1;
+}
+```
+
+You can change the background color or switch to a background image simply overriding this variable for a selected slide as following:
+
+```css
+  [data-slide]:nth-child(1) {
+    --slide-background: #6ee7b7;
+  }
+```
+
+## Variables
+
+This is the list of variables related to this component. You can customize the design by changing or overriding these values:
+
+```css
+  --slide-background: #cbd5e1;
+  --slide-content-padding: calc(var(--slide-padding) * 2);
+  --slide-size: 100%;
+  --slide-padding: 2rem;
+  --slide-arrow-color: #000;
+  --slide-arrow-size: .675rem;
+```

content/docs/components/modal.md

@@ -88,7 +88,7 @@ As far CSSUI is a Pure CSS library, the modal component **doesn't provide any pa
 Try <a href="https://www.npmjs.com/package/body-scroll-lock" target="_blank">body-scroll-lock</a> to enable it.
 ## Variables
 
-List of variables used. Customize the component's design by changing or overriding these values:
+This is the list of variables related to this component. You can customize the design by changing or overriding these values:
 
 ```css
   --modal-background: rgb(255, 255, 255);

content/docs/components/range.md

@@ -0,0 +1,52 @@
+---
+title: "Range"
+description: "Drag a handle to select a numeric value."
+lead: "Drag a handle to select a numeric value"
+date: 2022-06-06T11:40:00+01:00
+lastmod: 2022-06-06T11:40:00+01:00
+draft: false
+images: []
+menu:
+  docs:
+    parent: "components"
+weight: 610
+toc: true
+---
+
+The **range slider** is horizontal and has a single handle that can be moved with the mouse, finger or by using the arrow keys once in focus.
+
+<div class="preview">
+  <link rel="stylesheet" href="/cssui/cssui.min.css">
+  <link rel="stylesheet" href="/cssui/cssui.range.min.css">
+
+  <input type="range" min="1" max="100" value="50" data-range="rounded" />
+  <input type="range" min="1" max="100" value="50" data-range />
+</div>
+
+## Usage
+The range slider uses the default HTML5 tag:
+
+```html
+<input type="range" min="1" max="100" value="50" data-range />
+```
+
+It comes with preset attributes `min`,`max` and `value` but you can customize them as you prefer.
+
+## Customization
+The range slider comes with two different layouts: default and rounded.
+
+You can switch to the secondo one by adding the `rounded` value to `data-range` attribute (see the example above).
+
+If you want to create your own style, use the variables.
+
+## Variables
+
+This is the list of variables related to this component. You can customize the design by changing or overriding these values:
+
+```css
+	--range-thumb-color: var(--cssui-primary);
+	--range-thumb-height: 25px;
+	--range-thumb-width: 25px; 
+	--range-track-height: auto;
+	--range-track-color: var(--cssui-gray-light);
+```

content/docs/components/slideout.md

@@ -55,7 +55,7 @@ The Slideout panel should have the `data-slideout-panel` attribute. Apart from `
 ```
 ## Variables
 
-List of variables used. Customize the component's design by changing or overriding these values:
+This is the list of variables related to this component. You can customize the design by changing or overriding these values:
 
 ```css
   --slideout-animation: left .2s ease-in-out;

content/docs/components/tabs.md

@@ -72,7 +72,7 @@ You can navigate tabs using keyboard by default. Press TAB it will move the focu
 
 ## Variables
 
-List of variables used. Customize the component's design by changing or overriding these values:
+This is the list of variables related to this component. You can customize the design by changing or overriding these values:
 
 ```css
   --tab-border-color: #f3f4f6;

content/docs/components/toggle.md

@@ -0,0 +1,57 @@
+---
+title: "Toggle"
+description: "A toggle button allows the user to change a setting between two states."
+lead: "A toggle button allows the user to change a setting between two states."
+date: 2022-08-18T13:26:54+01:00
+lastmod: 2022-08-18T13:26:54+01:00
+draft: false
+images: []
+menu:
+  docs:
+    parent: "components"
+weight: 610
+toc: true
+---
+
+Commonly used in websites, mobile apps, and other software, it provides the users a way to choose between two different states.
+
+<div class="preview">
+  <link rel="stylesheet" href="/cssui/cssui.min.css">
+  <link rel="stylesheet" href="/cssui/cssui.toggle.min.css">
+
+  <input type="checkbox" id="toggle" name="toggle" data-toggle-input checked/>
+  <label for="toggle" data-toggle></label>
+</div>
+
+## Usage
+
+Add the `data-toggle-input` and `data-toggle` attributes to a standard `<input type="checkbox">` and `<label>` HTML tags respectively.
+
+### Code example
+
+```html
+  <input type="checkbox" name="toggle" data-toggle-input checked/>
+  <label for="toggle" data-toggle></label>
+```
+
+## Customization
+The toggle comes with the following customization options:
+- background color
+- size
+- radius
+- animation
+
+## Variables
+
+This is the list of variables related to this component. You can customize the design by changing or overriding these values:
+
+```css
+   --toggle-width: 60px;
+   --toggle-height: calc(var(--toggle-width)/2);
+   --toggle-radius: 18px;
+   --toggle-background: var(--cssui-gray-light);
+   --toggle-padding: 10px;
+   --toggle-animation: ease-in-out;
+   --toggle-animation-time: .2s;
+   --toggle-switch-color: #fff;
+```

lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-ui-lib",
-  "version": "0.3.0",
+  "version": "1.0.0",
   "description": "Pure CSS interactive components",
   "scripts": {
     "start": "gulp start",

lib/src/cssui.scss

@@ -6,6 +6,7 @@
   --cssui-gray-light: #d1d5db;
   --cssui-gray-dark: #4b5563;
   --cssui-gray-darkest: #1f2937;
+  --cssui-primary: #14b8a6;
   --cssui-padding: 1rem;
   --cssui-radius: 4px;
 }
@@ -16,4 +17,5 @@
 
 body {
   font-family: var(--cssui-font-family);
+  margin: 0;
 }

lib/src/fullpage/fullpage.html

@@ -0,0 +1,43 @@
+<link rel="stylesheet" href="../cssui.css">
+<link rel="stylesheet" href="fullpage.css">
+
+<div data-fullpage>
+  <div data-slides>
+    <section id="slide-1" data-slide="1">
+      <div data-slide-content>
+        Slide 1
+      </div>
+      <nav data-slide-nav="arrows">
+        <a data-slide-arrow="prev" href="" title="Prev">Prev</a>
+        <a data-slide-arrow="next" href="#slide-2" title="Next">Next</a>
+      </nav>
+    </section>
+    <section id="slide-2" data-slide="2">
+      <div data-slide-content>
+        Slide 2
+      </div>
+      <nav data-slide-nav="arrows">
+        <a data-slide-arrow="prev" href="#slide-1" title="Prev">Prev</a>
+        <a data-slide-arrow="next" href="#slide-3" title="Next">Next</a>
+      </nav>
+    </section>
+    <section id="slide-3" data-slide="3">
+      <div data-slide-content>
+        Slide 3
+      </div>
+      <nav data-slide-nav="arrows">
+        <a data-slide-arrow="prev" href="#slide-2" title="Prev">Prev</a>
+        <a data-slide-arrow="next" href="#slide-4" title="Next">Next</a>
+      </nav>
+    </section>
+    <section id="slide-4" data-slide="4">
+      <div data-slide-content>
+        Slide 4
+      </div>
+      <nav data-slide-nav="arrows">
+        <a data-slide-arrow="prev" href="#slide-3" title="Prev">Prev</a>
+        <a data-slide-arrow="next" title="Next" data-arrow-disabled>Next</a>
+      </nav>
+    </section>
+  </div>
+</div>