DesignThingy Bootstrap Boilerplate

A painless front-end bootstrap boilerplate by DesignThingy for building fast, robust, and adaptable static websites from PSD, sketch files.

Table of Contents

1. Features
2. Author
3. Contributors
4. Installation
5. Grunt tasks and live development
   • Tasks
   • Live development
6. Usage
7. Docs
8. FAQ
9. Copyright

Features

• Technologies: Full support for HTML5, JavaScript (ES6, babel), CSS (Sass and PostCSS) and SVG (svg4everybody)
• Local Development Server: Built-in server with real time monitoring (browserSync and Watch)
• ES6 Ready: Built-in Babel support
• Minification: Automatically minify your css and js files with source map in development process
• Autoprefixing: Convert your SCSS files to CSS with vendor prefixes
• Linting: Built-in support for eslint and stylelint for testing
• SVG: Support SVG4Everybody that adds SVG External Content support to all browsers
• Bootstrap Theming: Support Bootstrap theming
• Fontawesome: Build-in fontawesome support
• SCSS module pattern support

Author

DesignThingy

Contributors

Shashikant Yadav Saurabh Yadav

Installation

Prerequisites

DesignThingy Bootstrap Boilerplate requires following packages installed on your machine.

• Node JS
• Git
• NPM
  • Grunt CLI

  # install grunt cli globally
  npm install -g grunt-cli

Clone or download the Git Repo

# Clone the repo into the current directory
git clone https://github.com/designthingy/designthingy-bootstrap-boilerplate.git
# Navigate to the newly cloned directory
cd designthingy-bootstrap-boilerplate
# remove .git folder
rm -rf .git
# Initialize a local Git repository(optional)
git init

Install dependencies

npm install

Run the development server

npm start

Grunt tasks and live development

Tasks

Tasks	Description
Development	grunt dev or npm start Build and run the local server (development ready)
Build	grunt build Build the project (production ready)
Preview	grunt prev Preview the project on local server
Test	grunt test or npm test Run tests on JS and SCSS files

Live development

You can live test your changes using npm start or grunt dev (install node if you haven't) on a local server.

Usage

Add all your JS, IMAGES, SCSS (style.scss and bootstrap-override.scss are required), SVG and HTML files in the src folder and you will get the output in build folder.

Customize Bootstrap

To customize bootstrap you need to add all your custom scss code in src/scss/_custom.scss.

SVG sprite

To generate SVG sprite, add all your svg icons in a src\svg folder. You will see a svg-sprite.svg in build\assets\svg folder.

Customize Grunt config or tasks

To customize grunt configuration or tasks, go to grunt/config or grunt/tasks.

FAQ

How it's different from other boilerplates?

As being a conversion service ourselves, we exactly know what the parameters that a developer need's to take care during coding a static website from design are. It requires a clean, robust and fast development environment. Through our experience in the field, we have created this boilerplate to overcome issues and streamline the development process. We have designed Designthingy Bootstrap Boilerplate by keeping design to live website conversion purpose in mind.

Copyright

Copyright [current year]. All rights reserved.