fibre

fibre is a website project scaffolding designed to help you get your web project instantly up and running with the latest workflow technologies.

Table Of Contents

• Installation - Installing fibre
• The Basics - The basics behind fibre
• HTML - Guide To HTML Functionality
• CSS & SCSS - Guide To CSS & SCSS Functionality
• fibreGrid - Guide To fibreGrid, fibre's Grid System
• JavaScript - Guide To JavaScript Functionality
• Miscellaneous Functionality - Guide To Miscellaneous Functionality

Installation

• Get the latest release by:
  • Install with Bower: bower install fibre -or-
  • Install with NPM: npm install fibre -or-
  • Cloning the repo git clone https://github.com/bhough/fibre.git -or-
  • Downloading the zip File
• Install Node using the package on the Node.js website
• Install Gulp.js npm install -g gulp
• Install BrowserSync npm install -g browser-sync
• Install Browserify npm install -g browserify
• Install Compass gem install compass
• Install Dependencies npm install from the project root
• Run gulp from the project root

The Basics

What's included

fibre uses the popular Javascript-based streaming build system Gulp to automate your workflow. Common tasks are included to handle all the basics needs of web project development.

HTML

Included is a base HTML template that utlizes best practices for mobile rendering, SEO, and performance. It also includes a placeholder 404 template.

BrowserSync

fibre leverages BrowserSync providing you with an easy way to run your project locally. Upon first running fibre, a new browser window will be launched that will reload with your latest changes whenever you update the code base.

SCSS & Compass

CSS in fibre is written using SCSS and Compass. fibre automatically compiles into minified CSS complete with source map support. Using AutoPrefixer and Modernizr, fibre makes sure you have all your supported browsers covered.

Grid System

Also included is fibreGrid, a customizable, responsive, mobile-first CSS grid system to further help you get straight to coding. Configure the number of columns, margins, and breakpoints to make fibreGrid work for any project. As of 1.1.0 fibre now supports basic flexbox functionality.

JavaScript

fibre provides an easy way to write clean, modularized JavaScript using Browserify. All JS is automatically compiled and minified complete with source map support.

& more...

• Automatic CSS cache-busting
• Image minification
• Pre-configured .gitignore
• Leverage the popular and exhaustive .htaccess from HTML5Boilerplate
• Formatting configurations for any editor that supports EditorConfig