Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

@ecomplus/storefront-twbs

ecomplus908MIT7.3.6

Storefront foundation components built with custom Bootstrap 4 + Animate.css + FontAwesome

ecomplus, storefront, ecommerce, store-theme, bootstrap, twbs, font-awesome, animate-css

readme

Storefront Twbs

npm version License MIT

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

  3. Some webfont icons from Font Awesome 5:

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.

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

changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

7.3.6 (2023-11-02)

Note: Version bump only for package @ecomplus/storefront-twbs

7.3.5 (2023-09-06)

Note: Version bump only for package @ecomplus/storefront-twbs

7.3.4 (2023-05-16)

Bug Fixes

  • deps: update all non-major dependencies (#903) (788dfac)

7.3.3 (2023-03-24)

Bug Fixes

  • deps: update all non-major dependencies (#878) (ab8936d)

7.3.2 (2022-12-29)

Bug Fixes

  • deps: update all non-major dependencies (#837) (257b66e)

7.3.1 (2022-10-25)

Bug Fixes

  • deps: update all non-major dependencies (#763) (8d2d68d)

7.3.0 (2022-07-28)

Features

  • twbs/icons: New Feather Icons iconset (#761) (20515e0)
  • twbs/icons: new tabler icons iconset (#760) (db8b966)

7.2.0 (2022-07-26)

Bug Fixes

Features

  • twbs/icons: new Bootstrap Icons iconset (#759) (fe7ca9a)

7.1.0 (2022-01-24)

Bug Fixes

  • twbs/colors: custom components colors maps must use css vars for brand colors (4c4ff5f)

Features

  • twbs/fonts: load custom font family from $web-font-path scss var [#607] (7ff3943)

7.0.0 (2022-01-18)

Performance Improvements

  • twbs/components-variants: smaller color maps for less used components [#606] (830631a)
  • twbs/components: exclude bs button groups [#606] (2c7bb0c)
  • twbs/content-code: removed styles for not used pre (code snippets) and kbd tags [#606] (755bc51)
  • twbs/content-images: removed thumbnail and figure not used styles [#606] (726f069)
  • twbs/css-utilities: remove stretched link css util [#606] (86a83f9)
  • twbs/dropdowns: remove dropup, left and right, keep normal dropdown only [#606] (ed016af)
  • twbs/forms: remove usuned form variant classes [#606] (d419925)
  • twbs/list-group: remove horizontal list group and context color variations [#606] (4ec2d7c)
  • twbs/modal: remove usuned modal centered and derivatives [#606] (ad02e01)
  • twbs/nav: remove nav style variants [#606] (d65803e)
  • twbs/pagination: remove pagination sizing variants [#606] (8590d16)
  • twbs/progress: remove progress animated variant [#606] (044464a)
  • twbs/table: remove background tables, responsive inflix and dark theads [#606] (a45075d)

BREAKING CHANGES

  • twbs/content-images: no more .img-thumbnail and .figure* classes
  • twbs/table: tons of table additional classes removed
  • twbs/progress: ..progress-bar-animated class removed
  • twbs/pagination: node more .pagination-lg and pagination-sm classes
  • twbs/nav: node more .nav-pills, .nav-justified and .nav-fill classes
  • twbs/modal: .modal-dialog-centered removed
  • twbs/list-group: no more .list-group-horizontal* and .list-group-item-{color} classes
  • twbs/forms: .form-control-plaintext, .form-inline, .col-form*, .form-check* removed
  • twbs/dropdowns: .dropup, .dropleft, .dropright no more available
  • twbs/css-utilities: .stretched-link class no more available
  • twbs/components: no more .btn-group* classes available

6.0.0 (2022-01-11)

Bug Fixes

  • twbs/icons: always keep same icon codes (fa original charset) even on different fonts (74d9dab)

Features

  • scss/icons: add line awesome icons option and scss var $icons-font (30a0830)
  • twbs/icons: optional backport for .fa- icon class names with $icons-fa-backport (2808afa)

BREAKING CHANGES

  • twbs/icons: icons renamed without -alt suffix

-alt suffix is still used with FA backport only

  • scss/icons: icon classes changed to use generic prefix .i- instead of fa specific

5.12.1 (2021-12-31)

Bug Fixes

  • twbs/scss-colors: fix setting yiq text dark/light with css vars (bb6a902)

5.12.0 (2021-12-29)

Bug Fixes

  • twbs/colors: fix scss theme-color-level with mix function as bs original (7914426)
  • twbs/scss-color: more color functions fixes (triggered by custom themes) (4e46b4c)
  • twbs/scss-colors: fix gradients mixin to use color-mix function (6740be1)

Features

  • twbs/color-shift-weights: keep and merge $color-shift-weights if set for variant colors customization (be3a978)
  • twbs/css-vars: more css vars for brand colors and make it consistent on bs components :partying_face: (d76adc4), closes #509
  • twbs/scss-colors: new mix-color function safe for css vars (441ce35)

Performance Improvements

  • twbs/scss-reset: remove some ie specific workarounds (db7490c)

5.11.1 (2021-07-24)

Bug Fixes

  • pkg: use cross-env for win compatibility with npm scripts (0f87141)

5.11.0 (2021-07-02)

Features

  • twbs/icons: add new tiktok and shopping-backet icons (5dc6b48)

5.10.4 (2021-03-12)

Note: Version bump only for package @ecomplus/storefront-twbs

5.10.3 (2020-12-16)

Note: Version bump only for package @ecomplus/storefront-twbs

5.10.2 (2020-12-15)

Note: Version bump only for package @ecomplus/storefront-twbs

5.10.1 (2020-12-15)

Note: Version bump only for package @ecomplus/storefront-twbs

5.10.0 (2020-12-15)

Features

  • env: export new 'isSafariNew' const to identify safari 14 (2a5a74b)

5.9.4 (2020-09-14)

Bug Fixes

  • scss: preventing Safari double-tap link issue (20b1de8)

5.9.3 (2020-08-27)

Bug Fixes

  • env: use screen width as fallback to body offset width (5887c23)
  • scss: remove deprecated and not used .text-hide class (e2c6f7d)

5.9.2 (2020-08-12)

Bug Fixes

  • env: set 'isScreenXs' and 'isScreenLg' with body width (735d45f)

5.9.1 (2020-06-21)

Performance Improvements

  • scss: woff2 and woff for icons web fonts only (8c26e7a)

5.9.0 (2020-06-21)

Features

  • scss: add curated font awesome icons web fonts (3f10d21)

Performance Improvements

  • js: stop importing fontawesome svg js (f86101a)

5.8.0 (2020-06-02)

Features

  • js-env: export env info by user agent and screen size (6e6974b)

5.7.0 (2020-06-02)

Features

  • scss: add progress bootstrap default component (7dd8d43)

5.6.0 (2020-05-28)

Features

  • icons: add 'fa-telegram' icon (d92eb6a)
  • icons: add fa-forward icon (08f210e)

5.5.0 (2020-05-14)

Features

  • bootstrap: updating to bootstrap v4.5.0 (22e94fb)

5.4.2 (2020-05-05)

Note: Version bump only for package @ecomplus/storefront-twbs

5.4.1 (2020-04-16)

Bug Fixes

  • deps: bootstrap 4.4.1 not compatible with jquery 3.5.0 (06c314a)

5.4.0 (2020-04-16)

Bug Fixes

  • animate-css: add timer fallback (animationend event is unstable) (5038b18)

Features

  • scss: add new --font-headings css var (47ac3b6)

5.3.2 (2020-04-03)

Bug Fixes

  • scss: edit default container width (too large) to 1400px (b863298)

Reverts

  • scss: keep default bootstrap containers at all (4a51583)

5.3.1 (2020-03-30)

Bug Fixes

  • js: prevent ssr error with window object (b690aec)
  • pkg: fix entry files, no module entry (82f2ea3)

5.3.0 (2020-03-28)

Bug Fixes

  • scss: minor hack to set container "almost fluid" (6704477)
  • scss: pointer on checkbox and radio inputs (5332991)

Features

  • icon: add faPlay fa icon (40446f5)
  • icons: add faArrowDown and faWifi (d6485f7)
  • icons: add times-circle to fa collection (878a470)

5.2.0 (2020-02-27)

Bug Fixes

  • import: import 'jquery' only, let webpack to alias to slim (86bf632)

Features

  • scss: custom utilites (text and spacing helpers) (f8dcdd8)
  • vars: complete set of text css vars (fs, fw, ln) (a50e81c)

Performance Improvements

  • vars: removing unecessary --spacer-0 var (0b4534f)

5.1.0 (2020-02-13)

Bug Fixes

  • $: set $ and jQuery globally (window) (362160d)
  • jquery: importing stable jquery slim (9b7b3b8)
  • js: imports with absolute path to support webpack aliases (f7c66b2)

Features

  • animate-css: utility function for effects with animate.css classes (04f27ea)
  • exports: export default $ (7ccd7d9)

5.0.1 (2020-02-06)

Bug Fixes

  • src: fix source files path (85b9b65)

5.0.0 (2020-02-05)

Note: Version bump only for package @ecomplus/storefront-twbs

5.0.0-beta.1 (2020-02-05)

Note: Version bump only for package @ecomplus/storefront-twbs

5.0.0-beta.0 (2020-02-04)

Note: Version bump only for package @ecomplus/storefront-twbs

Legacy Change Log

2.0.0-alpha.1~5.0.0-alpha.3