Getting Started

Paper is a simple, elegant & flat Bootstrap Theme. It's free to use and open source. Checkout the source on Github. Paper is built on Twitter Bootstrap and written using Sass. It also comes up with Jquery Backstretch, Fontawesome and the Lato font.

Quick start

Download the project below and replace Bootstrap.

Download

Or Install using bower:

bower install paper-bootstrap

Files to copy

paper.css and paper.js (Development)
paper.min.css and paper.min.js(Minified/Production)

paper/
  └── dist/
      ├── css/
      │   ├── fonts/
      │   │   ├── Lato/
      │   │   ├── FontAwesome.otf
      │   │   ├── fontawesome-webfont.eot
      │   │   ├── fontawesome-webfont.svg
      │   │   ├── fontawesome-webfont.ttf
      │   │   └── fontawesome-webfont.woff
      │   │      
      │   ├── paper.css
      │   └── paper.min.css
      │
      └── js/
          ├── paper.js
          └── paper.min.js

Custom Theme

If you want to modify the theme here is what to do.

Fetch the Repository

Install Git
Clone the Repository using git clone git@github.com:sudharti/paper.git
This will download the master branch of the project's code to your system
The project's folder structure is descibed below

Folder Structure

Before you jump into customization here is the description of how the project is organized into directories. Below is a tree like representation of the file structure.

  paper/
  ├── dist/
  │   ├── css/
  │   │   ├── fonts/
  │   │   │   ├── Lato/
  │   │   │   ├── FontAwesome.otf
  │   │   │   ├── fontawesome-webfont.eot
  │   │   │   ├── fontawesome-webfont.svg
  │   │   │   ├── fontawesome-webfont.ttf
  │   │   │   └── fontawesome-webfont.woff
  │   │   │      
  │   │   ├── font-awesome.css
  │   │   ├── paper.css
  │   │   ├── paper.css.map
  │   │   └── paper.min.css
  │   │
  │   └── js/
  │       ├── vendor/
  │       ├── paper.js
  │       └── paper.min.js
  │   
  ├── fonts/
  │   └── Lato/
  ├── assets/
  │   ├── css/
  │   └── img/
  ├── src/
  │   ├── js/
  │   │   ├── bootstrap.js
  │   │   ├── card.js
  │   │   ├── jquery.backstretch.min.js
  │   │   └── slidepanel.js
  │   └── scss/
  │       ├── bootstrap/
  │       ├── components/
  │       ├── _bootstrap.scss
  │       └── paper.scss
  ├── pages/
  │   ├── components.html
  │   ├── css.html
  │   ├── extras.html
  │   ├── getting-started.html
  │   └── slider.html
  ├── templates/
  │   ├── code-templates/
  │   ├── css/
  │   ├── img/
  │   ├── js/
  │   ├── index.html
  │   ├── blog.html
  │   ├── login.html
  │   ├── timeline.html
  │   └── landing.html
  ├── index.html
  ├── Gruntfile.js
  ├── package.json
  ├── bower.json
  └── .jshintrc

Grunt & Bower

Grunt - The Javascript Task Runner is used for automating tasks and compile the source. Paper also uses bower to fetch and install packages and their dependencies. So install Grunt and Bower before customizing.

Installing Grunt

Grunt and it's plugins can be installed and managed using npm, the default Javascript package manager for nodejs. To install nodejs checkout the following link You can then install Grunt using the following command

npm install -g grunt-cli

Installing Bower

You can install Bower using npm.

npm install -g bower

To install the packages navigate to the project and install using npm install & bower install

cd paper/
npm install
bower install

npm install will search for package.json and fetch the node packages into node_modules/ directory. Similarly bower_install will search for bower.json and fetch packages & dependencies into bower_components/ directory.

Grunt Tasks

The available grunt tasks(commands) are specified in the Gruntfile.js and listed below

grunt clean: Cleans up the dist/ directory
grunt copy: Copies the packages and files from bower_components into the dist/ folder
grunt concat: Combines multiple files into final package
grunt sass: Compiles the Sass files from src/ and generates css in dist/css
grunt uglify: Uglify is used to minify the generated Javascript file into paper.min.js
grunt cssmin: Minifies the generated CSS file into paper.min.css
grunt: The default grunt task which performs the above tasks in the following order ['clean', 'copy', 'replace', 'sass', 'concat', 'uglify', 'cssmin']
grunt connect: Task to connect a server
grunt watch: Watches for changes in scss files and when it occurs performs grunt again
grunt server: Start the server, performs grunt connect and grunt watch

How to Customize?

Once Grunt and Bower are installed and configured you can start customizing the theme. To customize the theme follow the steps:

Modify the scss and js files under src/
The scss directory consists of bootstrap/ which includes the native bootstrap scss files.
The components/ directory has the added components along with fonts.scss
The js/ directory has bootstrap.js, backstretch and additional components
Start the server using grunt server
Any changes you make to the scss files will trigger the watch task which will regenerate the dist/ files
To manually compile the source again you can just execute grunt which will run the default task
You can also execute the individual tasks listed above using grunt [taskname]

Additional Components

Card Layout
Feed Layout
Pricing Tables
Slider Panel

More info can be found at Extras

Templates

Checkout some of the templates designed using paper Templates

Contributing

If you want to contribute to this project

Fork the Project at https://github.com/sudharti/paper
Make changes to the code
Send Pull Request!

Issues

You can raise issues at https://github.com/sudharti/paper/issues

If you really like this project you can help Spread the Word. You can also star the project at Github :)