5.2 KiB
5.2 KiB
FFNM (Front-End for the next master)
<button i-click="class:add('open', 'article')">open</button>
<article></article>
👇 🖱 Click! 👇
<button i-click="class:add('open', 'article')">open</button>
<article class="open"></article>
Simple utility to avoid writing Javascript when working with classes. It only takes up 2.5Kb!
-
Simplifies the click.
-
Simplifies the scroll.
-
Simplifies hover.
DEMOS
Documentation
English
Install
Add to your <head> the following tag.
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.2.3/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.3/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