Skip to content

Latest commit

 

History

History
73 lines (49 loc) · 2.86 KB

README.md

File metadata and controls

73 lines (49 loc) · 2.86 KB
Raw

quickstrap

bootstrap

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

What's Inside

  • Bootstrap - Most popular front-end framework.
  • Panini - Super simple flat file generator.
  • SASS - Write awesome stylesheets.
  • Browsersync - Test your website immediately.

Install

This project uses node and npm. Install them first before downloading this project.

To install this template:

  1. Download and copy this repo, or use git clone https://github.com/nadyafebi/quickstrap.git.
  2. Open a command line/terminal inside the project folder and enter npm install.

Usage

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.

Develop

Layout

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 is default.html. If you make another layout, add layout: your-layout-name on top of your page file (after title).
  • 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.

Style

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.