Front-End for the next master
Go to file
2020-07-16 01:06:48 +02:00
dist Optional second param 2020-07-16 00:58:17 +02:00
media add example image 2020-07-05 13:04:03 +02:00
src Optional second param 2020-07-16 00:58:17 +02:00
test Optional second param 2020-07-16 00:58:17 +02:00
.gitignore Add test class 2020-07-05 10:35:36 +02:00
gulpfile.js Optimize gulp 2020-07-04 16:57:28 +02:00
LICENSE Initial commit 2020-06-29 19:39:58 +02:00
package-lock.json Optimize gulp 2020-07-04 16:57:28 +02:00
package.json Optimize gulp 2020-07-04 16:57:28 +02:00
README.md Update README.md 2020-07-16 01:06:48 +02:00

FFNM (Front-End for the next master)

example

Simple utility to avoid writing Javascript when working with classes. It only takes up 1,7 Kb!

DEMOS

Click

Documentation


English

Install

Add to your <head> the following tag.

<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.0.0/dist/ffnm.min.js"></script>

Examples

Click

Add the class press to button when the button is pressed.
<button i-click="class:add('press')">open</button>
Remove the class press to button when the button is pressed.
<button i-click="class:remove('press')">close</button>
Switch the classs show to button when the button is pressed.
<button i-click="class:toggle('show')">view</button>
Add the class show to the #nav selector when the button is pressed.
<button i-click="class:add('show', '#nav')">open</button>
<nav id="nav"></nav>
Remove the show class from the #nav selector when the button is pressed.
<button i-click="class:remove('show', '#nav')">close</button>
<nav id="nav" class="show"></nav>
Switch the show class to the #nav selector when the button is pressed.
<button i-click="class:toggle('show', '#nav')">view</button>
<nav id="nav" class="show"></nav>

Scroll up

Add the class show to nav when the scroll goes up.
<nav i-scroll-up="class:add('show')"></nav>
Remove the show class from nav when the scroll goes up.
<nav i-scroll-up="class:remove('show')"></nav>

Scroll down

Add the class show to nav when the scroll down.
<nav i-scroll-down="class:add('show')"></nav>
Remove the show class from nav when the scroll down.
<nav i-scroll-down="class:remove('show')"></nav>

Classes without events

Add the class show to the #nav selector
class:add('show', '#nav')
Remove the show class from the #nav selector
class:remove('show', '#nav')
Switch the class show to the #nav selector
class:toggle('show', '#nav')

Spanish/Español

Instalar

Añade a tu <head> la siguiente etiqueta.

<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.0.0/ffnm.min.js"></script>

Ejemplos de uso

Clic

Añadir la clase apretado a button cuando sea pulsado.
<button i-click="class:add('apretado')">Apreta</button>
Quitar la clase apretado a button cuando sea pulsado.
<button i-click="class:remove('apretado')">cerrar</button>
Intercambiar la clase apretado a button cuando sea pulsado.
<button i-click="class:toggle('apretado')">ver</button>
Añadir la clase show al selector #menu cuando sea pulsado el botón.
<button i-click="class:add('show', '#menu')">abrir</button>
<nav id="menu"></nav>
Quitar la clase show al selector #menu cuando sea pulsado el botón.
<button i-click="class:remove('show', '#menu')">cerrar</button>
<nav id="menu" class="show"></nav>
Intercambiar la clase show al selector #menu cuando sea pulsado el botón.
<button i-click="class:toggle('show', '#menu')">ver</button>
<nav id="menu" class="show"></nav>

Subir scroll

Añadir la clase show al selector nav cuando el scroll sube.
<nav i-scroll-up="class:add('show')"></nav>
Quitar la clase show al selector nav cuando el scroll sube.
<nav i-scroll-up="class:remove('show')"></nav>

Bajar scroll

Añadir la clase show al selector nav cuando el scroll baja.
<nav i-scroll-down="class:add('show')"></nav>
Quitar la clase show al selector nav cuando el scroll baja.
<nav i-scroll-down="class:remove('show')"></nav>

Clases sin eventos

Añadir la clase show al selector #menu
class:add('show', '#menu')
Quitar la clase show al selector #menu
class:remove('show', '#menu')
Intercambiar la clase show al selector #menu
class:toggle('show', '#menu')

Development

Install

npm i

Build

gulp

Watch mode

gulp dev