Bootstrap Cards
Responsive Bootstrap template implementing card-based design. Demo here.
How to Install
Default Bootstrap Cards
- Download this repo here.
- Navigate to the
dist/
folder on Terminal. - Update the Bower dependencies using
bower update
. - Copy the contents of
dist/
to your project folder.
Customizing Bootstrap Cards
Setup
- Download this repo here.
- Install Gulp globally using
npm install -g gulp-cli
. - Install the Node.js modules needed in this project using
npm install
. - Navigate to
dist/
and update all the Bower dependencies usingbower update
. - (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
- Navigate to this repo and run
gulp
. This will serve the files indist/
through a local web server and take care of JS linting, Sass compilation and refreshing the browser when any changes are made. - To change the CSS, edit the Sass code inside
src/sass/
. - 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 todist/fonts/
.src/img/
: Contains all images. Gulp copies them over todist/img/
.src/js/
: Contains all custom JavaScript files. Gulp lints them and then copies them over todist/js/
.src/sass/
: Contains all custom styles. Gulp compilesmain.scss
intodist/css/cards.css
.src/*.html
: Gulp lints the Bootstrap classes used and then copies the files over todist/
.
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.
- Normalize.css (https://necolas.github.io/normalize.css/)
- jQuery (https://jquery.com/)
- Bootstrap (http://getbootstrap.com/)
- Font Awesome (http://fontawesome.io/)
- Animate.css (https://daneden.github.io/animate.css/)
- wow.js (http://mynameismatthieu.com/WOW/)
- jQuery Easing Plugin (https://github.com/gdsmith/jquery.easing)