slavapas/storefront-twbs

Generate Bootstrap 4 custom theme for storefront

storefront-twbs

Generate Bootstrap 4 custom theme for E-Com Plus storefront.

Small guide for partners, please take a look before creating new templates and widgets.

Compiling the storefront theme

From CLI, compile the custom SASS theme to new storefront Bootstrap kit and utilities passing directories and brand colors RGBs (without #):

npm i -g @ecomplus/storefront-twbs
storefront-twbs ~/mytheme/scss ~/mytheme/dist 6f42c1 e83e8c

Note that ~/mytheme/scss directory must contain theme folder with at least _variables.scss and _components.scss files.

Creating custom theme

Clone the GitHub repository and install dependencies with NPM:

git clone https://github.com/ecomclub/storefront-twbs
cd storefront-twbs
npm i

Edit the SASS files in the scss/theme directory, we recommend start from _variables.scss.

Start the localhost test server with:

npm run test

Or optionally just compile the SASS to CSS with:

npm run build

When you're done, generate sourcemap and minified CSS on dist folder by running:

npm run dist

Components

We're including all Bootstrap 4.3 components, for complete theme customizations, components styles may be overridden one by one on theme/_components.scss.

For partners

Note that your dist is not ready for stores, we also have to compile with the brand colors defined by the desired merchant.

The customized SASS files on theme folder will be used to compile the theme for each store with respective brand colors, so these are the files that you should put on your template source distributed in the Market.

Reference

• https://getbootstrap.com/docs/4.3/getting-started/theming/
• https://uxplanet.org/how-to-customize-bootstrap-b8078a011203

tl;dr

You can also find open source Bootstrap 4 themes on Bootswatch 😉.