After our last post about Shopify we decided to contribute a bit to the open-source community and build our Shopify Slate alternative to scaffold projects much more quickly.
We took an in-depth look at Shopify’s Slate Project to learn what makes it so great so we could adopt some good practices as we set to the goal to create our own version of Slate in the form of a Yeoman Generator.
So, without further ado, you can take it for a spin by just doing 2 global installs:
1$ npm i -g yo generator-pixel2html-shopify
After that cd into an empty folder and run:
1$ yo pixel2html-shopify
And you should be all set and ready for the magic that’s about to happen.
Heres a quick video showing how this works:
What it does
Skeleton will guide you to Scaffold a Gulp 4 based development kit to start creating Shopify Themes using gulp-shopify-upload-with-callbacks
All of your credentials are kept locally in a .env file that will NOT be pushed to the platform, we also suggest each team member has its own sand-boxed development store and credentials to develop. All in the name of safety.
Skeleton will get you hooked up with auto-reloading using Brower-Sync which does a Proxy to your preview theme so no more manual reloading for you on that area ⚡.
To be in line with latest best practices in front-end development, we believe its time to truly embrace ES6 (aka ES2015) and beyond, so we have included Browserify with Babel right out of the box. You can also add more plug-ins as needed to the project, doing a simple $ npm install and a adding some quick tweaks to the .babelrc file.
We know jQuery is still king of the web-land (and will probably remain as such for the near future) so we included the latest jQuery out of the box and already exposed it as a global variable so other plug-ins and apps can use it should they need to.
For our styles we love using Sass as it gives plenty of tools that standard CSS alone doesn’t have like mixins, variables and functions. Skeleton will give you 3 files to split your styles in vendor, main and fonts. Speaking of the latter, you can also opt to work with the awesome WebFont Loader so we can load them in an asynchronous way to keep things extra crispy.
Regarding SVG icons you can drop them in the src/icons folder and they will be automatically added in-line in the pages as needed, so you can use them as you wish, making it easy to animate or colour them using CSS.
For liquid Skeleton will provide you with a set of very slim files that will cover all of the basic needs so you can go ahead and focus on what matters for the project by filling in the blanks. We aim to keep this as it is so the tool is as pure and as blank as possibly. Any extensions or forks are obviously welcomed.
Since a lot of our projects involve stores running on Shopify Plus, Skeleton includes those files as well to give you a good starting point there as well.
After you are done with your coding you can run:
1$ npm run build
And that will bundle everything up in a zip file ready to upload or share, that command will also minify everything to improve the render experience for your users and customers while in production.
Pro-Tip: CI Rejoice 🦄
Since we have custom .env files and commands that keep the theme in sync, it can be easy to setup a CI system in which, for example, you can have a protected branch that only the lead developer could merge to master and on with each push this will build and deploy the theme to a staged (recommended) or live theme. With Shopify only supporting just 20 unpublished themes as maximum at the same time, we think this will be helpful for use cases in where every developer can have its very own theme to work in development without colliding with the CI or with the other team members.
More to come soon…
We would like to add linters to the liquid files like Slate is doing, however we noted the current implementation in Node of the Theme Linter is only linting translations, so for the time being, the last word is still server side on Shopify’s end. We are sure that tool will evolve more with time to have more linting powers, so stay tuned for an upgrade on Skeleton as soon as that is available.
We surely hope this tool can be useful to the whole Shopify Development community as it helps us daily. If you have any comments, feedback or questions, we welcome all issues/pull requests the GitHub Repo or you can tweet at us at @Pixel2HTML.
