# 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 ``` #### Scroll top ##### Add the class `show` to `nav` when the scroll is top of the page. ```html ``` ##### Remove the `show` class from `nav` when the scroll top of the page. ```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 ``` #### Scroll esta arriba de la pagina (principio) ##### AƱadir la clase `show` al selector `nav` cuando el scroll esta al inicio. ```html ``` ##### Quitar la clase `show` al selector `nav` cuando el scroll esta al inicio. ```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 ```