diff --git a/README.md b/README.md index 54fd546..384a84e 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,43 @@ # FFNM (Front-End for the next master) -![example](media/example.png) - Simple utility to **avoid writing Javascript** when working with **classes**. It only takes up **1,7 Kb**! +Simplifies the click + +![Self click](media/self-click.png) + +

+ πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡ +

+ +![Self clicked](media/self-clicked.png) + +Modify others + +![Other click](media/other-click.png) + +

+ πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡ +

+ +![Other clicked](media/other-clicked.png) + +Simplifies the scroll + +![Other click](media/scroll.png) + +

+ πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡πŸ‘‡ +

+ +Scroll up + +![Other clicked](media/scroll-up.png) + +Scroll down + +![Other clicked](media/scroll-down.png) + ## DEMOS [Click](https://codepen.io/androsfenollosa/pen/dyGdRVE) @@ -96,27 +130,6 @@ Add to your `` the following tag. ``` - -#### Classes without events - -##### Add the class `show` to the `#nav` selector - -```javascript -class:add('show', '#nav') -``` - -##### Remove the `show` class from the `#nav` selector - -```javascript -class:remove('show', '#nav') -``` - -##### Switch the class `show` to the `#nav` selector - -```javascript -class:toggle('show', '#nav') -``` - --- ## Spanish/EspaΓ±ol @@ -200,26 +213,6 @@ AΓ±ade a tu `` la siguiente etiqueta. ``` - -#### Clases sin eventos - -##### AΓ±adir la clase `show` al selector `#menu` - -```javascript -class:add('show', '#menu') -``` - -##### Quitar la clase `show` al selector `#menu` - -```javascript -class:remove('show', '#menu') -``` - -##### Intercambiar la clase `show` al selector `#menu` - -```javascript -class:toggle('show', '#menu') -``` --- ## Development