Slate-Bootstrap Theme

Slate v1 is currently in beta! You should expect potentially breaking changes between updates and more bugs than a finalized release. Slate v1.0 has not yet been tested on Windows.

This is the theme I wish had been available when I was rolling my own integration of Bootstrap 4 into a custom Shopify store.

Theme Preview

I've started with the base Shopify/skeleton-theme and brought over most of the /src directory of Shopify/starter-theme, and some of src/styles. These default Shopify styles are being gradually refactored out of the theme as I have time. PRs welcome!

For responsive image loading, use the responsive-image & responsive-bg-image snippets. They pair well with Bootstrap's responsive classes, and the lazyloader dependancy is built into the theme.

Theming

Body background and text color can be set via the Shopify theme editor panels, but other changes should be made with Bootstrap's built-in Sass variables, allowing global style preferences, easy theming and component changes.

In src/styles/variables.scss you will find examples of customization already done, with the primary and secondary colors changed to different Bootstrap 4 color variables. You could experiment with other changes, such as adding $enable-rounded: false; to variables.scss and deploying the theme. For more examples, see the Bootstrap 4 theming documentation.

Typography

This theme is intended to be used with Montserrat Bold for headings and Harmonica Sans for body text. Both of these can be set using the Shopify admin theme editor. You may need to make adjustments in typography.scss if other font pairings are used.

jQuery & Webpack

Because Bootstrap requires jQuery, additional setup is required in theme.js. For discussion, see Webpack issue #4258.

To add plugins to the theme, such as jackmoore/zoom, take a look at this gist which is implemented in theme.js. Image zoom is implemented in sections/product.liquid.

System requirements

You'll want to ensure you have the following already installed on your local machine before getting started with the Slate-Bootstrap theme:

Node: The current LTS (long-term support) release. We like to use a Node Version Manager like NVM.
NPM 5+ or Yarn: Both of these package managers have ups and downs, choose whichever you prefer. Follow the installation instructions for Yarn or NPM to make sure you're using the latest version.

Getting started

To get started with the Slate-Bootstrap theme, run the following command in your terminal:

$ yarn create slate-theme my-new-theme neckerson/slate-bootstrap-theme

For more information on connecting your new project with a Shopify store, see the Slate docs.

Troubleshooting

If you cannot see the Bootstrap styles being applied after running yarn start, open the browser console and check for ERR_CERT_AUTHORITY_INVALID errors. You will need to generate a local SSL certificate before the theme assets can be served.

Contributing

For help on setting up the repository locally, building, testing, and contributing please see CONTRIBUTING.md.

Code of Conduct

All developers who wish to contribute through code or issues, take a look at the Code of Conduct.

abokareem / slate-bootstrap-theme Goto Github PK