Skip to content

Commit

Permalink
Merge branch release/v1.0.0 into main
Browse files Browse the repository at this point in the history
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
  • Loading branch information
zetareticoli committed Aug 24, 2022
1 parent c3edfc0 commit 2433c72
Show file tree
Hide file tree
Showing 24 changed files with 638 additions and 17 deletions.
22 changes: 22 additions & 0 deletions content/blog/release-1.0.0/index.md
Original file line number Diff line number Diff line change
@@ -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! 🙌
2 changes: 1 addition & 1 deletion content/docs/components/accordion.md
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion content/docs/components/dropdown.md
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
110 changes: 110 additions & 0 deletions content/docs/components/fullpage.md
Original file line number Diff line number Diff line change
@@ -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;
```
2 changes: 1 addition & 1 deletion content/docs/components/modal.md
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
52 changes: 52 additions & 0 deletions content/docs/components/range.md
Original file line number Diff line number Diff line change
@@ -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);
```
2 changes: 1 addition & 1 deletion content/docs/components/slideout.md
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion content/docs/components/tabs.md
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
57 changes: 57 additions & 0 deletions content/docs/components/toggle.md
Original file line number Diff line number Diff line change
@@ -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;
```
2 changes: 1 addition & 1 deletion lib/package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
2 changes: 2 additions & 0 deletions lib/src/cssui.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -16,4 +17,5 @@

body {
font-family: var(--cssui-font-family);
margin: 0;
}
43 changes: 43 additions & 0 deletions lib/src/fullpage/fullpage.html
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 2433c72

Please sign in to comment.