Front-End for the next master
| dist | ||
| src | ||
| .gitignore | ||
| gulpfile.js | ||
| LICENSE | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| tsconfig.json | ||
FFNM (Front-End for the next master)
Simple plugin to avoid writing Javascript in trivial tasks.
Documentation
Spanish/Español
Instalar
Añade a tu <head> la siguiente etiqueta.
<script defer src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.0.0/ffnm.min.js"></script>
Ejemplos de uso
Clic
Añadir la clase show al selector #menu cuando sea pulsado el botón.
<button i-click="class:add('show', '#menu')">abrir</button>
Quitar la clase show al selector #menu cuando sea pulsado el botón.
<button i-click="class:remove('show', '#menu')">cerrar</button>
Intercambiar la clase show al selector #menu cuando sea pulsado el botón.
<button i-click="class:toggle('show', '#menu')">ver</button>
Scroll
Añadir la clase down al nav cuando el usuario haga scroll hacia abajo.
<nav i-scroll-down="class:add('down', this)"></nav>
Quitar la clase down al nav cuando el usuario haga scroll hacia arriba.
<nav i-scroll-up="class:remove('down', this)"></nav>
Hover
Añadir la clase tadam al selector #menu cuando el usuario haga hover sobre el botón.
<button i-hover="class:toggle('tadam', '#menu')">sorpresa!</button>
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