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

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

License

Notifications You must be signed in to change notification settings

tomaszbujnowicz/frontie

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 Cannot retrieve latest commit at this time.

History

93 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.