Skip to content
This repository has been archived by the owner on Mar 15, 2019. It is now read-only.

Latest commit

 

History

History
104 lines (70 loc) · 4.29 KB

README.md

File metadata and controls

104 lines (70 loc) · 4.29 KB

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

Usage

Requirements

Make sure all dependencies have been installed before moving on:

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.