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
Documentation
English
Install
Add to your <head> the following tag.
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.2.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>
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.0/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