# FFNM (Front-End for the next master) ``` html
``` 👇 🖱 **Click!** 👇 ``` html
``` Simple utility to **avoid writing Javascript** when working with **classes**. It only takes up **3.8Kb**! - Simplifies the **click**. - Simplifies the **scroll**. - Simplifies **hover**. - Simplifies when the elements are **visible** or not. ## DEMOS [Click](https://codepen.io/androsfenollosa/pen/dyGdRVE) | [Scroll](https://codepen.io/androsfenollosa/pen/xxZQxNV) | [Visible](https://codepen.io/androsfenollosa/pen/YzwBLGW) ## Documentation - [English](#user-content-english) - [Spanish/Español](#user-content-spanishespañol) --- ## English ### Install Add to your `` the following tag. ```html ``` ### Examples #### Click ##### Add the class `press` to `button` when the button is pressed. ```html ``` ##### Remove the class `press` to `button` when the button is pressed. ```html ``` ##### Switch the classs `show` to `button` when the button is pressed. ```html ``` ##### Add the class `show` to the `#nav` selector when the button is pressed. ```html ``` ##### Remove the `show` class from the `#nav` selector when the button is pressed. ```html ``` ##### Switch the `show` class to the `#nav` selector when the button is pressed. ```html ``` #### Scroll up ##### Add the class `show` to `nav` when the scroll goes up. ```html ``` ##### Remove the `show` class from `nav` when the scroll goes up. ```html ``` #### Scroll down ##### Add the class `show` to `nav` when the scroll down. ```html ``` ##### Remove the `show` class from `nav` when the scroll down. ```html ``` #### Hover ##### Add the class `show` to `div` when hover. ```html
``` ##### Remove the `show` class from `div` when hover. ```html
``` ##### Toggle the `show` class from `div` when hover. ```html
``` ##### Add the class `show` to `#button` when `div` hover. ```html
``` #### Visible ##### Add the class `show` to `div` when is visible. ```html
``` ##### Remove the `show` class from `div` when is visible. ```html
``` ##### Toggle the `show` class from `div` when is visible. ```html
``` ##### Add the class `show` to `#button` when `div` is visible. ```html
``` #### Not visible ##### Add the class `show` to `div` when is not visible. ```html
``` ##### Remove the `show` class from `div` when is not visible. ```html
``` ##### Toggle the `show` class from `div` when is not visible. ```html
``` ##### Add the class `show` to `#name` when `div` is not visible. ```html
``` --- ## Spanish/Español ### Instalar Añade a tu `` la siguiente etiqueta. ```html ``` ### Ejemplos de uso #### Clic ##### Añadir la clase `apretado` a `button` cuando sea pulsado. ```html ``` ##### Quitar la clase `apretado` a `button` cuando sea pulsado. ```html ``` ##### Intercambiar la clase `apretado` a `button` cuando sea pulsado. ```html ``` ##### Añadir la clase `show` al selector `#menu` cuando sea pulsado el botón. ```html ``` ##### Quitar la clase `show` al selector `#menu` cuando sea pulsado el botón. ```html ``` ##### Intercambiar la clase `show` al selector `#menu` cuando sea pulsado el botón. ```html ``` #### Subir scroll ##### Añadir la clase `show` al selector `nav` cuando el scroll sube. ```html ``` ##### Quitar la clase `show` al selector `nav` cuando el scroll sube. ```html ``` #### Bajar scroll ##### Añadir la clase `show` al selector `nav` cuando el scroll baja. ```html ``` ##### Quitar la clase `show` al selector `nav` cuando el scroll baja. ```html ``` #### Hover ##### Añade la clase `show` al `div` cuando sea hover. ```html
``` ##### Quita la clase `show` al `div` cuando sea hover. ```html
``` ##### Intercambia la clase `show` al `div` cuando sea hover. ```html
``` ##### Añade la clase `show` a `#button` cuando `div` sea hover. ```html
``` #### Visible ##### Añade la clase `ver` en el `div` cuando es visible. ```html
``` ##### Quita la clase `ver` en el `div` cuando es visible. ```html
``` ##### Intercambia la clase `ver` cuando el `div` es visible. ```html
``` ##### Añade la clase `ver` en `#boton` cuando el `div` es visible. ```html
``` #### No visible ##### Añade la clase `ver` en el `div` cuando no es visible. ```html
``` ##### Quita la clase `ver` en el `div` cuando no es visible. ```html
``` ##### Intercambia la clase `ver` cuando el `div` no es visible. ```html
``` ##### Añade la clase `ver` en `#boton` cuando el `div` no es visible. ```html
``` --- ## Development ### Install ```javascript npm i ``` ### Build ```javascript gulp ``` ### Watch mode ```javascript gulp dev ```