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 `