Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Bootstrap Cards

Responsive Bootstrap template implementing card-based design. Demo here.

How to Install

Default Bootstrap Cards

  1. Download this repo here.
  2. Navigate to the dist/ folder on Terminal.
  3. Update the Bower dependencies using bower update.
  4. Copy the contents of dist/ to your project folder.

Customizing Bootstrap Cards

Setup

  1. Download this repo here.
  2. Install Gulp globally using npm install -g gulp-cli.
  3. Install the Node.js modules needed in this project using npm install.
  4. Navigate to dist/ and update all the Bower dependencies using bower update.
  5. (Optional) This project uses HTML-CSS-JS Prettify for Sublime Text to maintain a consistent coding style. The custom options are defined in .jsbeautifyrc.

Writing Code

  1. Navigate to this repo and run gulp. This will serve the files in dist/ through a local web server and take care of JS linting, Sass compilation and refreshing the browser when any changes are made.
  2. To change the CSS, edit the Sass code inside src/sass/.
  3. To change the JS, edit the JS code inside src/js/.

Contents of Source Folder & Overview of Gulp Tasks

BootstrapCards/
└── src/
    ├── fonts/
    ├── img/
    ├── js/
    ├── sass/
    │   ├── layout/
    │   ├── pages/
    │   ├── utils/
    │   └── main.scss
    ├── blog-post.html
    ├── blog.html
    └── index.html
  • src/fonts/: Contains all custom fonts. Gulp copies them over to dist/fonts/.
  • src/img/: Contains all images. Gulp copies them over to dist/img/.
  • src/js/: Contains all custom JavaScript files. Gulp lints them and then copies them over to dist/js/.
  • src/sass/: Contains all custom styles. Gulp compiles main.scss into dist/css/cards.css.
  • src/*.html: Gulp lints the Bootstrap classes used and then copies the files over to dist/.
Sass Files
  • sass/layout/: Contains styles for the cards, navbar, jumbotrons & footer.
  • sass/pages/: Contains page-specific styles.
  • sass/utils/: Contains globally used variables, mixins & base styles.
  • sass/main.scss: Imports all the necessary Sass files.

Bower Components

Listed below are all the Bower components used in Bootstrap Cards. The ones in bold are necessary while the others are optional, however, leaving them out might break some things.

About

🚀 Responsive Bootstrap template implementing card-based design.

Resources

License

Packages

No packages published
You can’t perform that action at this time.