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