Storefront Twbs

 

:nail_care: 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 :rocket:.

> 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.

$3

``bash
npm i --save @ecomplus/storefront-twbs
`

`js
import '@ecomplus/storefront-twbs'
`

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

$3

`html

`

`html

`

Or with no dependencies included:

`html

``

Usage

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