A frontend boilerplate to build professional web projects easily and quickly.
- Gulp - Task Runner.
- Bower - Package Manager.
- Browsersync - Watch project changes and updates browsers.
- Nunjucks - Template Engine.
- Browserify - CommonJS Modules.
- BabelJS - Javascript compiler.
- Karma - Javascript Test Runner.
- Jasmine - Javascript Test Framework.
You will need to install NodeJS.
# Clone the repository.
$ git clone https://github.com/mjnr/Simple-Boilerplate.git project
$ cd project
# Install Gulp and Bower, if you haven't already.
$ npm install -g gulp bower
# Installs all the dependencies.
$ npm install
# Installs all packages.
$ bower install
# Start a mini server to view the project and watch their changes on http://localhost:3000/
$ gulpBasically the development files are in the src folder and compiled files go directly to assets.
The view structure is based on Nunjucks Template Engine features and it generate .html files. See more here.
Its possible extends the default layout to create pages.
{# Variables #}
{% block variables %}
{% set host = "http://localhost:3000" %}
{% set page = "" %}
{% set assets = "/assets/" %}
{% set title = "Home page" %}
{% set description = "Lorem ipsum dolor sit amet, consectetur." %}
{% set keywords = "lorem, ipsum, dolor" %}
{% set scripts = [] %}
{% endblock %}
{# Imports #}
{% import "macros/forms.html" as form %}
{% from "macros/image.html" import img %}
<!DOCTYPE html><!--[if IE 8]><html class="ie8" lang="pt-br"><![endif]-->
<!--[if IE 9]><html lang="pt-br" class="ie9"><![endif]-->
<!--[if !IE]><!-->
<html lang="pt-br"><!--<![endif]-->
<head>
<title>{{ title }} | Simple Boilerplate</title>
<!-- [ Includes metatags ]-->
{% include "includes/metatags.html" %}
<!-- [ Includes CSS files ]-->
{% include "includes/styles.html" %}
<!-- [ Includes Javascript files ]-->
{% include "includes/scripts.html" %}
</head>
<body>
<!-- [ Includes Header ]-->
{% include "includes/header.html" %}
<!-- [ Includes Content ]-->
{% block content %}{% endblock %}
<!-- [ Includes Footer ]-->
{% include "includes/footer.html" %}
</body>
</html>{% extends "layouts/default.html" %}
{% block variables %}
{{ super() }}
{% set title = "Home Page" %}
{% set description = "Lorem ipsum dolor sit amet, consectetur." %}
{% set keywords = "lorem, ipsum, dolor" %}
{%
set scripts = ["home"]
%}
{% endblock %}
{% block content %}
<main role="main" class="content container">
<!-- content -->
</main>
{% endblock %}The style structure is a blend of several CSS architecture concepts, with emphasis on SMACSS and RSCSS . Currently, it is divided into:
// Config
// -------------------------
@require 'config/*'
// Vendors
// -------------------------
@require 'vendors/*'
// Base
// -------------------------
@require 'base/*'
// Components
// -------------------------
@require 'components/*'
// Layouts
// -------------------------
@require 'jeet'
@require 'layouts/*'Inspired by RSCSS Components
It is currently possible to create multiple bundles with Browserify and write modules using ES6 features.
/*
* Class sample
*/
class ZodiacSaint {
constructor(name, cloth) {
this._name = name;
this._cloth = cloth;
}
sayName() {
return `My name is ${this._name} and I am the ${this._cloth} saint`;
}
}
class BronzeSaint extends ZodiacSaint {
constructor(name, cloth) {
super(name, `Bronze ${cloth}`);
}
sayName() {
return super.sayName();
}
}
export { ZodiacSaint, BronzeSaint }import { ZodiacSaint, BronzeSaint } from "./modules/my-module";
let saintIkki = new BronzeSaint("Ikki", "Phoenix");
saintIkki.sayName();
// My name is Ikki and I am the Bronze Phoenix saintgulporgulp watchStart watch for changes and server with Browsersync.gulp buildRun all development tasksgulp build --productionRun all development tasks and minify all files for production.gulp optimize:imagesOptimize all images.gulp compile:templateCompile Nunjucks template.gulp compile:stylesCompile Stylus.gulp lint:stylesLint Stylus files.gulp build:stylesCompile and lint Stylus files.gulp bundle:javascriptCreate Javascript bundle.gulp lint:javascriptLint Javascript files.gulp build:javascriptCreate and lint Javascript bundle.