Front-End for the next master
dist | ||
src | ||
test | ||
.gitignore | ||
gulpfile.js | ||
LICENSE | ||
package-lock.json | ||
package.json | ||
README.md |
FFNM (Front-End for the next master)
Simple utility to avoid writing Javascript when working with classes.
Documentation
English
Install
Add to your <head>
the following tag.
<script src="https://cdn.jsdelivr.net/gh/tanrax/FFNM@v1.0.0/ffnm.min.js"></script>
Examples
Click
Add the class show
to the #nav
selector when the button is pressed.
<button i-click="class:add('show', '#nav')">open</button>
Remove the show
class from the #nav
selector when the button is pressed.
<button i-click="class:remove('show', '#nav')">close</button>
Switch the show
class to the #nav
selector when the button is pressed.
<button i-click="class:toggle('show', '#nav')">view</button>
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 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>
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