Storefront Twbs

💅 Foundation components for E-Com Plus Storefront:

1. Boostrap 4.6:

   • scss/styles.scss: Majority part (but not all) of Bootstrap CSS is imported, with almost all components, some utility classes and custom additional CSS vars;
   • src/bootstrap.js: Bootstrap 4 scripts for respective components, using jQuery and Popper.js normally;

2. Some animations imported from Animate.css 3:

   • scss/_animate.scss: Curated CSS animations list;
   • src/animate-css.js: Simple utility function to apply animations with JS;

3. Some webfont icons from Font Awesome 5:

   • scss/_icons.scss: Curated icons list;

We're not importing those frameworks as is to select only common and most useful components for Storefront themes. By this way we're reducing final bundle size and improving website performance 🚀.

We generally use (and recommend partners to) Vue.js for Storefront components and widgets, but remember that Bootstrap CSS, Font Awesome and Animate.css are all reusable with any JS framework.

Installation

You can install the package with bundlers such as Webpack and Browserify, or load from CNDs like jsDelivr or UNPKG.

With bundlers

npm i --save @ecomplus/storefront-twbs

import '@ecomplus/storefront-twbs'

@import "node_modules/@ecomplus/storefront-twbs/scss/styles";

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ecomplus/storefront-twbs/dist/storefront-twbs.min.css">

<script src="https://cdn.jsdelivr.net/npm/@ecomplus/storefront-twbs/dist/storefront-twbs.bundle.min.js"></script>

Or with no dependencies included:

<script src="https://cdn.jsdelivr.net/npm/@ecomplus/storefront-twbs/dist/storefront-twbs.min.js"></script>

Usage

• Bootstrap components;
• Colors guide;
• Font Awesome icons;
• CSS animations;
• CSS vars;
• Included JavaScript;
• Theming;