Storefront Twbs

(opens new window) (opens new window)

💅 Foundation components for E-Com Plus Storefront (opens new window):

1. Boostrap 4.6 (opens new window):

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

2. Some animations imported from Animate.css 3 (opens new window):

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

3. Some webfont icons from Font Awesome 5 (opens new window):

   • scss/_icons.scss (opens new window): 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 (opens new window);
• Colors guide (opens new window);
• Font Awesome icons (opens new window);
• CSS animations (opens new window);
• CSS vars (opens new window);
• Included JavaScript (opens new window);
• Theming (opens new window);