A frontend boilerplate to build professional web projects easily and quickly.
Features
- NPM Scripts - Build Scripts.
- Browsersync - Watch project changes and updates browsers.
- Pug - Template Engine.
- Critical - Add inline critical path css to html pages.
- Stylus - Preprocessor.
- Rucksack - Postcss Features.
- Jeet - Grid System.
- Rupture - Media Queries.
- Webpack - Module Bundler.
Instalation
You will need to install NodeJS.
# Clone the repository.
$ git clone https://github.com/mjnr/Simple-Boilerplate.git project
$ cd project
# Installs all the dependencies and starts a mini server on port 3000.
$ npm install && npm start
Folder Structure
Basically the development files are in the dev folder and compiled files go directly to dist.
dev
βββ images
β βββ logo.png
βββ scripts
β βββ main.js
β βββ modules
β βββ my-module.js
βββ styles
β βββ base
β β βββ base.styl
β β βββ fonts.styl
β β βββ helpers.styl
β βββ components
β β βββ my-component.styl
β βββ config
β β βββ aliases.styl
β β βββ functions.styl
β β βββ mediaqueries.styl
β β βββ variables.styl
β βββ layouts
β β βββ container.styl
β βββ main.styl
β βββ vendors
β βββ normalize.styl
βββ views
βββ includes
β βββ analytics.pug
β βββ metatags.pug
β βββ scripts.pug
β βββ styles.pug
βββ layouts
β βββ default.pug
βββ pages
βββ index.pug
Views
The view structure is based on Pug Template Engine features and it generate .html files. See more here.
Data file
{
"sitename": "Simple Boilerplate",
"basedir": "./dev/views/",
"root": "/",
"analyticsCode": "UA-XXXXX-X",
"pages": {
"home": {
"title": "Simple Boilerplate - Just a simple frontend boilerplate",
"description": "A simple frontend boilerplate to build professional web projects easily and quickly.",
"keywords": "boilerplate, node, frontend, pug, stylus, webpack"
}
}
}
Default Layout
Its possible extends the default layout to create pages.
block vars
- var page;
doctype html
html(lang="en")
head
title #{pages[page].title}
meta(charset="UTF-8")
meta(http-equiv="X-UA-Compatible" content="IE=edge")
meta(name="viewport" content="width=device-width, initial-scale=1.0")
block metatags
include /includes/metatags
block styles
include /includes/styles
body
main.main
.container
block content
block scripts
include /includes/scripts
block analytics
include /includes/analytics
Page
extends /layouts/default
block vars
- var page = "home"
block content
section.content-section
h1.title
| Simple Boilerplate
Styles
The style structure is a blend of several CSS architecture concepts, with emphasis on SMACSS and RSCSS . Currently, it is divided into:
/*
* Simple Boilerplate
* https://github.com/mjnr/Simple-Boilerplate
* -----------------------------------
* Author: Milson JΓΊnior
* URL: https://github.com/mjnr
* -----------------------------------
* Project Name
* -----------------------------------
*/
// Config
// -------------------------
@require 'config/*';
// Vendors
// -------------------------
@require 'vendors/*';
// Base
// -------------------------
@require 'base/*';
// Grid System
// -------------------------
@require 'jeet';
// Components
// -------------------------
@require 'components/*';
// Layouts
// -------------------------
@require 'layouts/*';
Scripts
It is currently possible to create multiple bundles with Webpack and write modules using ES6 features.
Module
export default function() {
console.log('Simple Boilerplate is working!');
}
Bundle
import myModule from './modules/my-module.js';
myModule();
Available tasks
npm start
Start watch for changes and server with Browsersync.npm run build:dev
Run all dev tasksnpm run build:prod
Run all dev tasks and minify all files for production.npm run lint
Lints styles and scripts.