andros/FFNM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update README.md

Browse Source
This commit is contained in:
Andros Fenollosa 2020-07-16 11:23:05 +02:00 committed by GitHub
parent 605a4463b6
commit 2c306485d4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 36 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
README.md
View File

@ -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)
<p align="center">
👇👇👇👇👇👇
</p>
![Self clicked](media/self-clicked.png)
Modify others
![Other click](media/other-click.png)
<p align="center">
👇👇👇👇👇👇
</p>
![Other clicked](media/other-clicked.png)
Simplifies the scroll
![Other click](media/scroll.png)
<p align="center">
👇👇👇👇👇👇
</p>
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 `<head>` the following tag.
<nav i-scroll-down="class:remove('show')"></nav>
```
#### 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 `<head>` la siguiente etiqueta.
<nav i-scroll-down="class:remove('show')"></nav>
```
#### 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