A painless front-end bootstrap boilerplate by DesignThingy for building fast, robust, and adaptable static websites from PSD, sketch files.
- 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
Shashikant Yadav Saurabh Yadav
DesignThingy Bootstrap Boilerplate requires following packages installed on your machine.
# 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
npm install
npm start
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 |
You can live test your changes using npm start
or grunt dev
(install node if you haven't) on a local server.
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.
To customize bootstrap you need to add all your custom scss
code in src/scss/_custom.scss
.
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.
To customize grunt configuration or tasks, go to grunt/config
or grunt/tasks
.
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 [current year]. All rights reserved.