Front-End for the next master
Go to file
2020-07-17 12:12:22 +02:00
dist Fix regex check 2020-07-17 12:12:02 +02:00
media Fix images 2020-07-16 11:30:47 +02:00
src Fix regex check 2020-07-17 12:12:02 +02:00
test Fix regex check 2020-07-17 12:12:02 +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-17 12:12:22 +02:00

FFNM (Front-End for the next master)

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

Simplifies the click

Modify others

Simplifies the scroll

Scroll up

Scroll down

Simplifies Hover

DEMOS

Click

Documentation


English

Install

Add to your <head> the following tag.

<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.2.1/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>

Hover

Add the class show to div when hover.
<div i-hover="class:add('show')"></div>
Remove the show class from div when hover.
<div i-hover="class:remove('show')"></div>
Toggle the show class from div when hover.
<div i-hover="class:toggle('show')"></div>
Add the class show to #button when div hover.
<div i-hover="class:toggle('show', '#button')"></div>
<button id="button">Hi</div>

Spanish/Español

Instalar

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

<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.2.1/dist/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>

Hover

Añade la clase show al div cuando sea hover.
<div i-hover="class:add('show')"></div>
Quita la clase show al div cuando sea hover.
<div i-hover="class:remove('show')"></div>
Intercambia la clase show al div cuando sea hover.
<div i-hover="class:toggle('show')"></div>
Añade la clase show a #button cuando div sea hover.
<div i-hover="class:toggle('show', '#button')"></div>
<button id="button">Hi</div>

Development

Install

npm i

Build

gulp

Watch mode

gulp dev