Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jnkkkk/moretoggles.css

A pure CSS library that provides you with a variety of nice-looking toggles
https://github.com/jnkkkk/moretoggles.css

css sass scss stylesheets ui-components

Last synced: about 8 hours ago
JSON representation

A pure CSS library that provides you with a variety of nice-looking toggles

Host: GitHub
URL: https://github.com/jnkkkk/moretoggles.css
Owner: JNKKKK
License: mit
Created: 2020-02-21T01:31:34.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2024-01-22T04:55:13.000Z (8 months ago)
Last Synced: 2024-09-21T18:18:07.493Z (4 days ago)
Topics: css, sass, scss, stylesheets, ui-components
Language: SCSS
Homepage: https://jnkkkk.github.io/MoreToggles.css/
Size: 812 KB
Stars: 675
Watchers: 14
Forks: 40
Open Issues: 6
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # MoreToggles.css

`MoreToggles.css` is a **pure CSS** library that provides you with a variety of **nice-looking toggles**. 

[![banner](https://github.com/JNKKKK/MoreToggles.css/raw/master/banner.png)](https://jnkkkk.github.io/MoreToggles.css/)

![release badge](https://img.shields.io/github/v/release/JNKKKK/MoreToggles.css?include_prereleases&style=flat-square) 

![jsDelivr hits badge](https://img.shields.io/jsdelivr/gh/hm/JNKKKK/MoreToggles.css?style=flat-square)

![npm](https://img.shields.io/npm/dm/moretoggles?style=flat-square&logo=npm)

![license badge](https://img.shields.io/github/license/JNKKKK/MoreToggles.css?style=flat-square) 

------

You only have to attach a class to the wrapper div and `MoreToggles.css` will do the magic for you.

[Check out **all available styles** here](https://jnkkkk.github.io/MoreToggles.css/)

**Features**

🔹  Pure CSS

🔹  13 different styles (more styles are coming) 

🔹  Perfect scaling

## Usage

Import the stylesheet into your document's ``

```html

  

```

Wrap an extra div around your `` and ``. Pick a style [here](https://jnkkkk.github.io/MoreToggles.css/)

. Add the corresponding `mt-*` class to `
`.

```html

 

  

  



```

### Moretoggles.css is also available through [NPM](https://www.npmjs.com/package/moretoggles)

```bash

npm install moretoggles

```

**Import in js/jsx**

```js

// Import the minified CSS

import '../node_modules/moretoggles/output/moretoggles.min.css'

// Or

// import the Sass source file

import '../node_modules/moretoggles/src/moretoggles.scss'

```

Or **import in Sass**

```scss

@charset "utf-8";

@import "../node_modules/moretoggles/src/moretoggles";

```

## Styles

`MoreToggles.css` currently has 13 different styles. And for each style, several color patterns are provided.

[Check out **all available styles** here](https://jnkkkk.github.io/MoreToggles.css/)

To choose a style, replce the class name of the wrapper `
` with one of the options [here](https://jnkkkk.github.io/MoreToggles.css/).

```html

 

  

  



```

Example for `.mt-android-pink` style

```html

 

  

  



```

## Import Only a Single Style

If you care about the size of CSS files. Instead of importing `moretoggles.min.css`, you can import single style separately.

In the `/output` folder, you can find all of the built CSS files.

The naming convention is `moretoggles.STYLE_NAME.min.css`

Example for importing only *Android* Style

```html

  

```

## Size / Scaling

You can change the size of the toggles by assigning a font-size attribute `style="font-size:10px;"` to the wrapper div. You can try different numbers and the toggle will scale smoothly.

```html



  

  



```

## Disabled Toggles

Just like regular checkbox, you can add `disabled` attribute to `` tag.

```html



  

  



```

## Listening to the change event

Since the toggle is actually an `` with `type="checkbox"`, you can use addEventListener to listen to the onchange event.

```html

 

  

  



  const toggle = document.getElementById('6');

  toggle.addEventListener('change', (event) => {

    if (event.target.checked) {

      alert('checked');

    } else {

      alert('not checked');

    }

  });

```

## Notice

Nesting the `` directly inside the `` is **NOT supported**, although it is valid HTML syntax.

**Don't** ☹️

```html

 

  

    

  



```

**Do** 😃

```html

 

  

  



```

## License

MoreToggles.css is licensed under the MIT license. (https://opensource.org/licenses/MIT)

## Contributing

This project is still in very early stage. Your contribution is very welcome. Feel free to submit a pull request!

### Development Workflow

1. `npm install`

2. `npm run start` This will start the webpack-dev-server and render the [showcase page](https://jnkkkk.github.io/MoreToggles.css/)

3. Make changes and see live updates in the browser

4. Build the **[showcase page](https://jnkkkk.github.io/MoreToggles.css/)** and **compile Sass to CSS in `/output`**

   - `npm run build-doc`

   - `npm run build-css`