In need of making a website prototype? Have to quickly develop a website for a hackathon? Worry not! quickstrap is here to save the day!
Features:
- Install and use Bootstrap, painlessly.
- Use a templating language to assemble your website in no time.
- Automatically run and refresh your website when you make any changes.
Inspired by foundation-sites.
Table of Contents
- Bootstrap - Most popular front-end framework.
- Panini - Super simple flat file generator.
- SASS - Write awesome stylesheets.
- Browsersync - Test your website immediately.
This project uses node and npm. Install them first before downloading this project.
To install this template:
- Download and copy this repo, or use
git clone https://github.com/nadyafebi/quickstrap.git
. - Open a command line/terminal inside the project folder and enter
npm install
.
Open a command line/terminal inside the project folder and enter gulp
to make your website and automatically run it at localhost:8000
.
You can also enter:
gulp build
- To make your website without running it.gulp clean
- To clean the project folder of the website created (for clean repo).
Warning: Any of these commands will delete any .html
files in the root of the project folder and will delete the /css
folder. If you add additional HTML or CSS files, you will have to modify the clean
function in gulpfile.js
to ignore these new files.
To make a new HTML page, modify the files inside these folders in /panini
:
- pages
This is where the body of your pages live. Any HTML files here will be compiled with their chosen layout to a finished HTML files in the root of the project folder. - layouts
The default layout isdefault.html
. If you make another layout, addlayout: your-layout-name
on top of your page file (aftertitle
). - partials
Any HTML files here can be injected anywhere in a page or layout using{{> partial-name}}
. Useful to make something consistent across your website, such as navigation bar or footer.
For more information, see Panini.
To style your website, modify the files inside /sass
:
- main.scss
This is where you should put your custom style in CSS or SASS format. - _var.scss
Customize the default Bootstrap template by modifying the variables in this file.