handlebars-materialize-snippets

0.3.0 • Public • Published

handlebars-materialize-snippets

A Set of Handlebars snippets for the MaterializeCSS framework that makes my life easier. Why? handlebars are my favorite template engine, it tends to use express-handlebars and gulp-hbs in my works. also, I use MaterializeCSS because it's very easy to create "apps looking web pages", so, I repeat a lot of markup.

Usage:

handlebars notation:

{{>forms/input c="s12 m6" n="name" id="id" ph="placeholder" r="t" ac="name" d="t" v="value" label="label"}}

output:

<div class="input-field col s12 m6">
    <input
    name="name"  
    id="id"
    placeholder="placeholder"
    required
    autocomplete="name"
    disabled
    value="value"
    type="text"
    >
    <label for="id">label</label>
</div>

Install

npm i handlebars-materialize-snippets

I recommend to move the partials directory ./node_modules/handlebars-materialize-snippets/**/* to a better destiny with your build system. ex in gulp:

gulp.task('hbs-snippets',()=>{
  return gulp.src(['./node_modules/handlebars-materialize-snippets/**/*'])
          .pipe(gulp.dest('./views/partials/'));
});

Contributing

If this repo is usefull for you, be free to propose, pull or open issues

API

input

{{>forms/input}}
{{>forms/email}}
{{>forms/number}}
{{>forms/password}}

Creates a basic input.

options:

n="name"//set the name
id="id" //set the id, if no Id is provided, name is used instead
r=true //set field as required
ph="placeholder"//set a placeholder
d=true //set field as disabled
v="value" //default field value
max,min,step//sets this parameters (only for number inputs)

licence

MIT

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.3.0
    2
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 0.3.0
    2
  • 0.2.0
    0
  • 0.1.0
    0

Package Sidebar

Install

npm i handlebars-materialize-snippets

Weekly Downloads

2

Version

0.3.0

License

MIT

Last publish

Collaborators

  • fega