— Responsive Bootstrap template implementing card-based design. Demo here.
- Download this repo here.
- Navigate to the
dist/
folder on Terminal. - Install all the Bower dependencies using
bower install
. - Copy the contents of
dist/
to your project folder.
- 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 install all the Bower dependencies usingbower install
. - (Optional) This project uses HTML-CSS-JS Prettify for Sublime Text to maintain a consistent coding style. The custom options are defined in
.jsbeautifyrc
.
- 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/
.
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 styles and then copies the files over todist/
.
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.
Listed below are all the Bower components used in Bootstrap Cards. The ones in bold are necessary while the others are optional.
- 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)