tomaszbujnowicz / frontie

Frontie is a front-end boilerplate. Gulp | Twig.js | Sass | Autoprefixer | Browsersync | Bootstrap 4 Grid System & Responsive Breakpoints

There is more up to date boilerplate based on Gulp 4 and Webpack. Please consider using this one instead https://github.com/tomaszbujnowicz/frontie-webpack

Frontie - Front-end Boilerplate

Frontie is a front-end boilerplate using Gulp for task automation.

Based on normalize.css, Bootstrap 4 Grid & Responsive breakpoints and enhanced with Twig.js, Sass, Autoprefixer plus Browsersync. These tools make it a solid front-end boilerplate to get a new project off the ground.

Features

• Gulp for task automation

• Bootstrap 4 Grid System as a powerful mobile-first flexbox grid to build layouts of all shapes and sizes

• Bootstrap 4 Responsive Breakpoints as a media queries to create sensible breakpoints

• Twig.js as a templating engine

• Sass as a CSS preprocessor

• Autoprefixer for parsing CSS and add vendor prefixes to rules by Can I Use

• Browsersync for time-saving synchronised browser testing

• Github pages for publishing contents to Github pages

• Source Maps

Usage

Requirements

Make sure all dependencies have been installed before moving on:

• npm or yarn
• Node.js
• Gulp

Quick start: Installation

Clone this repository and run

• npm install or yarn to install dependencies

This will take some time and will install all packages necessary to run Frontie and its tasks.

Development

• gulp to start the server (Browsersync session) and watch for changes

Then visit http://localhost:3000/ - or a new browser windows popped-up already - to preview your new website. BrowserSync will automatically reload the CSS or refresh the whole page, when stylesheets, assets or content changes.

There are other tasks available including:

• gulp watch to watch without building /dist (production files) from scratch
• gulp build to build a static version of the website inside the /dist folder
• gulp deploy to publish contents from /dist folder to Github pages

Structure

|--dist                  # →  Static version of the website ready to upload (never edit)
|
|--node_modules          # →  Node.js packages (never edit)
|--gulpfile.js           # →  Gulpfile tasks
|--package.json          # →  Node.js dependencies and scripts
|--package-lock.json     # →  Node.js lock file (never edit)
|--yarn.lock             # →  Yarn lock file (never edit)
|
|--src                   # →  Site source files
|  |--img                # →  Site images
|  |--css                # →  Site stylesheets
|  |--js                 # →  Site JS
|  |  |--components      # →  Components JS (e.g. navbar)
|  |  |--vendor          # →  Vendor JS - 3rd party libraries
|  |  |--main.js         # →  Main (custom scripts) JS
|  |--templates          # →  Site templates
|  |  |--components      # →  Components templates (e.g. navbar)
|  |  |--layouts         # →  Base templates
|  |  |--partials        # →  Partial templates
|  |  |--components.twig # →  The components page for demo purpose
|  |  |--index.twig      # →  The index page

Components

There are also some default Frontie components ( with basic styling and functionality) included in the package.
You can easily remove / comment them out in case you don't need them.

• Navbar
• Button

Notes

Why don't you include everything from Bootstrap 4?

It's a really great front-end framework for many projects but in some cases it might be just too large and complex.
I only took what I needed from it which is a grid system and responsive breakpoints.
If you need more stuff then you can easily import required components or use a dedicated version Frontie Bootstrap 4

Next Step?

• Upgrade to use Gulp 4, Webpack and Babel or @std/esm

Copyright and license

Copyright 2018 Tomasz Bujnowicz under the MIT license.

frontie's Issues

Browsersync doesn't reload on SCSS changes

With the default tasks, everything is compiled and neat for the StyleSheets directory. But Browsersync doesn't work, maybe intentionally as it can take a few milliseconds to compile? I've been poking around and can't seem to get it to work. Probably obvious.