https://github.com/bigcommerce/themes-lib-skeleton
https://github.com/bigcommerce/themes-lib-skeleton
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/bigcommerce/themes-lib-skeleton
- Owner: bigcommerce
- Created: 2021-06-03T13:00:01.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-06-26T15:15:40.000Z (about 3 years ago)
- Last Synced: 2025-01-06T02:27:23.643Z (over 1 year ago)
- Language: HTML
- Size: 613 KB
- Stars: 0
- Watchers: 6
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Bigcommerce Skeleton Theme
A stripped-down version of Bigcommerce's official [Stencil](https://github.com/bigcommerce/stencil) theme. Very much a WIP (stands for 'work in progress').
## Dependencies
### [stencil-cli](https://github.com/bigcommerce/stencil-cli)
Development platform for stencil themes. Install this globally with NPM.
### [stencil-utils](https://github.com/bigcommerce/stencil-utils)
Provides theme hooks and api calls for stencil themes. Added to themes with JSPM. Comes bundled with this skeleton.
### [bc-core](https://bitbucket.org/pixelunion/bc-core)
Shared templates for our stencil themes. Not bundled with this skeleton. Run the install script included in bc-core to add it to your theme.
## Webpack
Webpack is now being used as our module bundler. It can be installed globally:
```
$ npm install -g webpack
```
### Installation
```
npm install
```
Once the dependencies are installed, all you have to do is
```
stencil init
stencil start
```
## Theme Directory Structure
### SCSS
```
scss
|-- modules/
|-- general/
|-- pages/
+-- theme.scss
```
##### general/
All your global styles.
##### pages/
Page-specific: `_home.scss`, `_blog-post.scss` etc.
##### modules/
For overrides to any modules you may need. If you've got a `carousel` module and you want different arrow colours or the like, drop a `_carousel.scss` in here.
### JS
```
js
|-- theme/
|-- app.js
+-- page-manager.js
```
...
### Templates
```
templates
|-- components/
|-- layout/
+-- pages/
```
### Notes
#### Quick Shop
When developing a quick shop, all the base functions you'll need reside within `product-utils.js`—use these.