From 2433c72fb468e124c1ad3dfaea3a8699b328e1c9 Mon Sep 17 00:00:00 2001 From: Francesco Improta Date: Wed, 24 Aug 2022 15:12:27 +0200 Subject: [PATCH] Merge branch release/v1.0.0 into main commit c76fc5f494d572b3e8198ad0d5ca23c3eb3f0c41 Author: Francesco Improta Date: Wed Aug 24 15:04:58 2022 +0200 Added missing links commit 5b1a0cdd8eaa14cf26c5895cea256ebea13868ce Author: Francesco Improta Date: Wed Aug 24 15:03:14 2022 +0200 New blog post about release 1.0.0 commit 0121e48a9de63f351507654fddade651ea3cea7c Author: Francesco Improta Date: Wed Aug 24 14:48:55 2022 +0200 Changed variables text commit 2de4b0b8e99fae9866ccd5f7d85587bd0cd11dbd Author: Francesco Improta Date: Mon Aug 22 18:17:26 2022 +0200 Making the bundle file public commit 038a6cc3fbb7eee9592cab1bd1ac096fbb7945f0 Author: Francesco Improta Date: Mon Aug 22 17:58:35 2022 +0200 Added .zip file commit 27c66ebec58f1f1e00b83fea14c9bf83e51f24fc Author: Francesco Improta Date: Mon Aug 22 17:58:27 2022 +0200 Bumped version commit 94944141eec851d2f330961f599cd77b8bb7e4d6 Author: Francesco Improta Date: Mon Aug 22 17:57:33 2022 +0200 Squashed commit of the following: commit 79c836009272376eea7f72a8fb872533ab927785 Author: Francesco Improta Date: Fri Aug 19 16:17:20 2022 +0200 Added min css commit f65deaf35f85599437ef3666ab84426efb334556 Author: Francesco Improta Date: Fri Aug 19 16:17:15 2022 +0200 Added doc page commit 574c818fcb80193e61a5983ac6e0e8542addbd3f Author: Francesco Improta Date: Fri Aug 19 16:06:49 2022 +0200 Changed input display commit c66259b7d4cff80bbb000ad1e7c144823303c943 Author: Francesco Improta Date: Fri Aug 19 16:04:20 2022 +0200 Changed html commit 6742fc947023c680f64e4c0a547b36d179e7aff6 Author: Francesco Improta Date: Thu Aug 18 16:44:27 2022 +0200 Added toggle variables commit 480bddd3f5f58a9a8e7845f8571a622e235c058b Author: Francesco Improta Date: Wed Aug 17 17:39:36 2022 +0200 Removed margin commit cadb106c6a21f7372d077408043e8bd79f0de4cb Author: Francesco Improta Date: Wed Aug 17 17:38:59 2022 +0200 Added toggle commit 49dfe82d2ee6ae4366c794d1f42504cf701f217d Author: Francesco Improta Date: Fri Jul 1 16:10:02 2022 +0200 Merge branch 'feature/#36-range-slider' into dev commit 6b075c88c4cbc2e2bec3e6a04b00518671aded6a Author: Francesco Improta Date: Thu Jun 9 16:05:03 2022 +0200 Squashed commit of the following: commit 2b3c62f1b645a2020f59495a6df6086259b2051a Author: Francesco Improta Date: Thu Jun 9 16:03:11 2022 +0200 Added fullpage doc #45 commit 77c8b5d2bb4eef3dc8d1baadb25b4e8e93b20558 Author: Francesco Improta Date: Thu Jun 9 16:03:01 2022 +0200 Compiled CSS commit 320244a1ed74d15d4c1908637a1e05408cfaa0b1 Author: Francesco Improta Date: Thu Jun 9 16:02:50 2022 +0200 Added slide background variable commit 71bfb85f4cdd5484a262d27132a54a4ba17ca20e Author: Francesco Improta Date: Thu Jun 9 15:40:25 2022 +0200 Built minified css commit 6cf645326f152aa8688ca0cf623627446d92c15f Author: Francesco Improta Date: Thu Jun 9 15:40:04 2022 +0200 Restored default settings commit a76d123ffa74af1d14b592d126a367efa993040d Author: Francesco Improta Date: Tue Jun 7 11:41:11 2022 +0200 Added fullpage draft commit b89ea492a3dc032c5a2eced43e7c7457fde8fefb Author: Francesco Improta Date: Tue Jun 7 11:37:00 2022 +0200 Added verticalScroll graphic changes #45 commit 2b86461ac526d71199f297c12a9022dfe3ff79cc Author: Francesco Improta Date: Tue Jun 7 11:17:58 2022 +0200 Added data-slide-content commit 8660734ce2d4790716ee133c8581537cd8e19b37 Author: Francesco Improta Date: Wed Jun 1 15:02:38 2022 +0200 Fixed Sass variables commit 5cd201ddcb9b80a820afe29cbea77871cbebfeb8 Author: Francesco Improta Date: Wed Jun 1 15:02:18 2022 +0200 Removed margin from body element commit aa931059d2a8eecc02af2c7e918f9e10a02c7efe Author: Francesco Improta Date: Mon May 16 14:26:27 2022 +0200 Updated height with variable #45 commit d5b8d3f4d5c8d9bcc50364061b83143e8933d1d7 Author: Francesco Improta Date: Thu May 12 18:06:29 2022 +0200 Added options commit 4ce003a591e90e7ecfab3aff3a3283f48f916194 Author: Francesco Improta Date: Wed May 11 16:13:30 2022 +0200 Renamed in fullpage commit a22a7b238b1276e9101e5382cfc0c553533bb7bb Author: Francesco Improta Date: Wed May 11 14:52:30 2022 +0200 Added fullpage template and styles #45 commit c039f9ba825bacba0b93db6fa10cc756cd4f45ac Author: Francesco Improta Date: Wed Apr 27 13:57:53 2022 +0200 Added first template version #45 commit 91247f990b1228f112946edc66cdfcc4e98579d9 Merge: caa230a 026acfe Author: Francesco Improta Date: Sun Apr 24 09:09:54 2022 +0200 Merge branch 'main' into dev commit caa230ae3deb9818946adf0ee8e7cff86d229145 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 d9814b101b3bd3619e74d84fa232b101b776e379 Author: Francesco Improta Date: Thu Mar 24 15:10:54 2022 +0100 Added a draft for the next release --- content/blog/release-1.0.0/index.md | 22 ++ content/docs/components/accordion.md | 2 +- content/docs/components/dropdown.md | 2 +- content/docs/components/fullpage.md | 110 ++++++++++ content/docs/components/modal.md | 2 +- content/docs/components/range.md | 52 +++++ content/docs/components/slideout.md | 2 +- content/docs/components/tabs.md | 2 +- content/docs/components/toggle.md | 57 +++++ lib/package.json | 2 +- lib/src/cssui.scss | 2 + lib/src/fullpage/fullpage.html | 43 ++++ lib/src/fullpage/fullpage.scss | 205 ++++++++++++++++++ lib/src/range/range.html | 8 + lib/src/range/range.scss | 48 ++++ lib/src/toggle/toggle.html | 8 + lib/src/toggle/toggle.scss | 56 +++++ ...s_1920d2ec1ff1120c91690141d2072447.content | 15 +- static/cssui.zip | Bin 16404 -> 25546 bytes static/cssui/cssui.bundle.min.css | 11 + static/cssui/cssui.fullpage.min.css | 1 + static/cssui/cssui.min.css | 3 +- static/cssui/cssui.range.min.css | 1 + static/cssui/cssui.toggle.min.css | 1 + 24 files changed, 638 insertions(+), 17 deletions(-) create mode 100644 content/blog/release-1.0.0/index.md create mode 100644 content/docs/components/fullpage.md create mode 100644 content/docs/components/range.md create mode 100644 content/docs/components/toggle.md create mode 100644 lib/src/fullpage/fullpage.html create mode 100644 lib/src/fullpage/fullpage.scss create mode 100644 lib/src/range/range.html create mode 100644 lib/src/range/range.scss create mode 100644 lib/src/toggle/toggle.html create mode 100644 lib/src/toggle/toggle.scss create mode 100644 static/cssui/cssui.bundle.min.css create mode 100644 static/cssui/cssui.fullpage.min.css create mode 100644 static/cssui/cssui.range.min.css create mode 100644 static/cssui/cssui.toggle.min.css diff --git a/content/blog/release-1.0.0/index.md b/content/blog/release-1.0.0/index.md new file mode 100644 index 0000000..ffecd09 --- /dev/null +++ b/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! 🙌 \ No newline at end of file diff --git a/content/docs/components/accordion.md b/content/docs/components/accordion.md index b67ca5a..27e1ddb 100644 --- a/content/docs/components/accordion.md +++ b/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); diff --git a/content/docs/components/dropdown.md b/content/docs/components/dropdown.md index fd80c89..8e0bd22 100644 --- a/content/docs/components/dropdown.md +++ b/content/docs/components/dropdown.md @@ -52,7 +52,7 @@ Dropdown is built using `
` 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); diff --git a/content/docs/components/fullpage.md b/content/docs/components/fullpage.md new file mode 100644 index 0000000..951665a --- /dev/null +++ b/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. + +
+ + + +
+
+
+
+ Slide 1 +
+ +
+
+
+ Slide 2 +
+ +
+
+
+ Slide 3 +
+ +
+
+
+ Slide 4 +
+ +
+
+
+
+ +## 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; +``` diff --git a/content/docs/components/modal.md b/content/docs/components/modal.md index 2478ed2..2cc92f0 100644 --- a/content/docs/components/modal.md +++ b/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 body-scroll-lock 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); diff --git a/content/docs/components/range.md b/content/docs/components/range.md new file mode 100644 index 0000000..aea69f8 --- /dev/null +++ b/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. + +
+ + + + + +
+ +## Usage +The range slider uses the default HTML5 tag: + +```html + +``` + +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); +``` diff --git a/content/docs/components/slideout.md b/content/docs/components/slideout.md index 6ec54ab..6e3b5f8 100644 --- a/content/docs/components/slideout.md +++ b/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; diff --git a/content/docs/components/tabs.md b/content/docs/components/tabs.md index e08ab85..c5f76dd 100644 --- a/content/docs/components/tabs.md +++ b/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; diff --git a/content/docs/components/toggle.md b/content/docs/components/toggle.md new file mode 100644 index 0000000..c4f219a --- /dev/null +++ b/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. + +
+ + + + + +
+ +## Usage + +Add the `data-toggle-input` and `data-toggle` attributes to a standard `` and `