Reorganizing Files & Leveraging Variables (v2.0 Code Journal)February 25, 2016
We're progressively building a full v2.0 for our frontend shopping cart. In the "v2.0 Code Journal" entries, we'll expose some of our development tools and methods for doing so. Chances are this stuff will be useful to a dev or two out there. :)
Here are the issues we discussed in our Code Journal thus far:
- Using Gulp.js to Optimize Our Frontend Workflow
- Refining Cart Customization: SASS, BEM, & Low Specificity
Since we're going to expand on the customization subject in this short post, I encourage you to read our latest entry. Today, we'll expose how we improved our files architecture, and how we use SASS variable to fine-tune our cart customization.
Current files architecture issues with Snipcart
Like we mentioned on the blog a few weeks ago, adding SASS, BEM, and a low specificity rule solved a lot of customization issues. But some pains remained:
- We were still stuck with only one huge file.
- We were still dragging around lots of garbage styles (e.g. more than 30 colors on the modal cart).
- Our base CSS wasn't quite easy to customize yet.
Reorganizing our files
Since we're now using both SASS and BEM, we can reorganize our whole SCSS file for more clarity:
Components/ _product.scss _step.scss ... Settings/ _colors.scss _fonts.scss _reset.scss ... Tools/ _mixins.scss v2.scss
v2.scss is the base SCSS file that includes everything else.
We then have a Tools folder including every mixins and functions you may need in SASS.
The Settings folder is included mostly to define variables and for the reset file.
The Components folder includes all of our Block (remember our BEM methodology). Quick tip: if you come across a class like
.product__title, you will find it in
_product.scss. That's just one example of why we love BEM. :)
Introducing variables to facilitate customization
We had two major goals for Snipcart's v2.0:
- Drastically improve maintainability
- Unleash cart customization potential
Enabling different levels of customization for developers was a key point for us. We wanted it to be easy to handle full shopping cart makeovers as well as simple tweaks (like changing button colors, for instance).
So for us, SASS variables were a way to optimize our cart customization. We now use a two-tier system for our variables.
On top of each Components files, we have functional variables (for example
$_product-color--error: $red; or
And in the Settings folder, we have files that define descriptive variables (for example
$red: #f10; or
This way, if you were to simply apply brand colors to your cart, you'd find
_colors.scss, insert your colors, and find/replace the files. That's it. If you were to handle more changes, you'd modify variables on each component's files.
If you'd like to go even further than that, well, you're a hard person to please! ;) But you could indeed rewrite any component you'd need.
So what's next?
For now, we only hinted at how easy it will be to customize Snipcart's v2.0. But rest assured, we'll be closing this blog series with an in-depth technical article to help you customize our shopping cart. This post will most likely introduce different GitHub templates to kickstart your e-commerce customizations with Snipcart.
In the meantime, our lead developer & co-founder Charles will explain how we'll handle versioning for the v2.0 in the next Code Journal entry. Stay tuned!
If you enjoyed this post and found it valuable, please, take a second to share it on Twitter. As always, your thoughts and questions regarding the upcoming cart v2.0 are welcome in the comments below!