FFNM/README.md

274 lines
5.2 KiB
Markdown
Raw Permalink Normal View History

2020-06-29 19:55:01 +02:00
# FFNM (Front-End for the next master)
2020-07-17 16:29:34 +02:00
``` html
2020-07-17 18:04:01 +02:00
<button i-click="class:add('open', 'article')">open</button>
<article></article>
2020-07-17 16:29:34 +02:00
```
👇 🖱 **Click!** 👇
``` html
2020-07-17 18:04:01 +02:00
<button i-click="class:add('open', 'article')">open</button>
<article class="open"></article>
2020-07-17 16:29:34 +02:00
```
Simple utility to **avoid writing Javascript** when working with **classes**. It only takes up **2.5Kb**!
2020-06-29 19:55:01 +02:00
2020-07-17 16:29:34 +02:00
- Simplifies the **click**.
2020-07-16 11:23:05 +02:00
2020-07-17 16:25:00 +02:00
- Simplifies the **scroll**.
2020-07-16 11:23:05 +02:00
2020-07-17 16:25:00 +02:00
- Simplifies **hover**.
2020-07-17 11:11:53 +02:00
2020-07-05 11:01:25 +02:00
## DEMOS
2020-07-17 18:01:33 +02:00
[Click](https://codepen.io/androsfenollosa/pen/dyGdRVE) | [Scroll](https://codepen.io/androsfenollosa/pen/xxZQxNV)
2020-07-05 11:01:25 +02:00
2020-06-29 20:03:05 +02:00
## Documentation
2020-06-29 20:03:31 +02:00
- [English](#user-content-english)
- [Spanish/Español](#user-content-spanishespañol)
2020-06-29 19:58:17 +02:00
2020-06-29 19:55:01 +02:00
---
2020-07-05 10:44:00 +02:00
## English
### Install
Add to your `<head>` the following tag.
```html
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.2.3/dist/ffnm.min.js"></script>
2020-07-05 10:44:00 +02:00
```
### Examples
#### Click
2020-07-16 01:06:48 +02:00
##### Add the class `press` to `button` when the button is pressed.
```html
<button i-click="class:add('press')">open</button>
```
##### Remove the class `press` to `button` when the button is pressed.
```html
<button i-click="class:remove('press')">close</button>
```
##### Switch the classs `show` to `button` when the button is pressed.
```html
<button i-click="class:toggle('show')">view</button>
```
2020-07-05 10:44:00 +02:00
##### Add the class `show` to the `#nav` selector when the button is pressed.
```html
<button i-click="class:add('show', '#nav')">open</button>
2020-07-16 01:06:48 +02:00
<nav id="nav"></nav>
2020-07-05 10:44:00 +02:00
```
##### Remove the `show` class from the `#nav` selector when the button is pressed.
```html
<button i-click="class:remove('show', '#nav')">close</button>
2020-07-16 01:06:48 +02:00
<nav id="nav" class="show"></nav>
2020-07-05 10:44:00 +02:00
```
##### Switch the `show` class to the `#nav` selector when the button is pressed.
```html
<button i-click="class:toggle('show', '#nav')">view</button>
2020-07-16 01:06:48 +02:00
<nav id="nav" class="show"></nav>
2020-07-05 10:44:00 +02:00
```
2020-07-16 00:44:52 +02:00
#### Scroll up
##### Add the class `show` to `nav` when the scroll goes up.
```html
<nav i-scroll-up="class:add('show')"></nav>
```
##### Remove the `show` class from `nav` when the scroll goes up.
```html
<nav i-scroll-up="class:remove('show')"></nav>
```
#### Scroll down
##### Add the class `show` to `nav` when the scroll down.
```html
<nav i-scroll-down="class:add('show')"></nav>
```
##### Remove the `show` class from `nav` when the scroll down.
```html
<nav i-scroll-down="class:remove('show')"></nav>
```
2020-07-17 11:11:53 +02:00
#### Hover
##### Add the class `show` to `div` when hover.
```html
<div i-hover="class:add('show')"></div>
```
##### Remove the `show` class from `div` when hover.
```html
<div i-hover="class:remove('show')"></div>
```
##### Toggle the `show` class from `div` when hover.
```html
<div i-hover="class:toggle('show')"></div>
```
##### Add the class `show` to `#button` when `div` hover.
```html
<div i-hover="class:toggle('show', '#button')"></div>
<button id="button">Hi</div>
```
2020-07-05 10:44:00 +02:00
---
2020-06-29 19:55:01 +02:00
## Spanish/Español
### Instalar
Añade a tu `<head>` la siguiente etiqueta.
```html
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.2.3/dist/ffnm.min.js"></script>
2020-06-29 19:55:01 +02:00
```
### Ejemplos de uso
#### Clic
2020-07-16 01:06:48 +02:00
##### Añadir la clase `apretado` a `button` cuando sea pulsado.
```html
<button i-click="class:add('apretado')">Apreta</button>
```
##### Quitar la clase `apretado` a `button` cuando sea pulsado.
```html
<button i-click="class:remove('apretado')">cerrar</button>
```
##### Intercambiar la clase `apretado` a `button` cuando sea pulsado.
```html
<button i-click="class:toggle('apretado')">ver</button>
```
2020-06-29 19:55:01 +02:00
##### Añadir la clase `show` al selector `#menu` cuando sea pulsado el botón.
```html
<button i-click="class:add('show', '#menu')">abrir</button>
2020-07-16 01:06:48 +02:00
<nav id="menu"></nav>
2020-06-29 19:55:01 +02:00
```
##### Quitar la clase `show` al selector `#menu` cuando sea pulsado el botón.
```html
<button i-click="class:remove('show', '#menu')">cerrar</button>
2020-07-16 01:06:48 +02:00
<nav id="menu" class="show"></nav>
2020-06-29 19:55:01 +02:00
```
##### Intercambiar la clase `show` al selector `#menu` cuando sea pulsado el botón.
```html
<button i-click="class:toggle('show', '#menu')">ver</button>
2020-07-16 01:06:48 +02:00
<nav id="menu" class="show"></nav>
2020-06-29 19:55:01 +02:00
```
2020-07-16 00:44:52 +02:00
#### Subir scroll
##### Añadir la clase `show` al selector `nav` cuando el scroll sube.
```html
<nav i-scroll-up="class:add('show')"></nav>
```
##### Quitar la clase `show` al selector `nav` cuando el scroll sube.
```html
<nav i-scroll-up="class:remove('show')"></nav>
```
#### Bajar scroll
##### Añadir la clase `show` al selector `nav` cuando el scroll baja.
```html
<nav i-scroll-down="class:add('show')"></nav>
```
##### Quitar la clase `show` al selector `nav` cuando el scroll baja.
```html
<nav i-scroll-down="class:remove('show')"></nav>
```
2020-07-17 11:11:53 +02:00
#### Hover
##### Añade la clase `show` al `div` cuando sea hover.
```html
<div i-hover="class:add('show')"></div>
```
##### Quita la clase `show` al `div` cuando sea hover.
```html
<div i-hover="class:remove('show')"></div>
```
##### Intercambia la clase `show` al `div` cuando sea hover.
```html
<div i-hover="class:toggle('show')"></div>
```
##### Añade la clase `show` a `#button` cuando `div` sea hover.
```html
<div i-hover="class:toggle('show', '#button')"></div>
<button id="button">Hi</div>
```
2020-07-05 10:44:00 +02:00
---
2020-06-30 10:12:43 +02:00
## Development
2020-07-02 10:40:34 +02:00
### Install
```javascript
npm i
```
2020-06-30 10:12:43 +02:00
### Build
```javascript
2020-07-02 10:40:34 +02:00
gulp
2020-06-30 10:12:43 +02:00
```
### Watch mode
```javascript
2020-07-02 10:40:34 +02:00
gulp dev
2020-06-30 10:12:43 +02:00
```