All Projects → the-couch → Slater Theme

the-couch / Slater Theme

Shopify Starter theme based on slate

Programming Languages

es6
455 projects

Projects that are alternatives of or similar to Slater Theme

Shopify Theme Lab
Shopify theme development environment using Liquid, Vue and Tailwind CSS 🧪
Stars: ✭ 250 (+431.91%)
Mutual labels:  webpack, shopify, liquid
shopify-wishlist
💙 A set of files used to implement a simple customer wishlist on a Shopify store
Stars: ✭ 115 (+144.68%)
Mutual labels:  liquid, shopify
Jsx Lite
Write components once, run everywhere. Compiles to Vue, React, Solid, Angular, Svelte, and Liquid.
Stars: ✭ 1,015 (+2059.57%)
Mutual labels:  shopify, liquid
gulp-shopify-theme
Shopify theme synchronisation during development
Stars: ✭ 26 (-44.68%)
Mutual labels:  liquid, shopify
Webpack Livereload Plugin
LiveReload during webpack --watch
Stars: ✭ 183 (+289.36%)
Mutual labels:  webpack, livereload
mechanic-tasks
Public task repository for Mechanic (https://mechanic.dev)
Stars: ✭ 42 (-10.64%)
Mutual labels:  liquid, shopify
dry
Dry is a new template engine and language, and is a superset of Shopify's Liquid, with first-class support for advanced inheritance features, and more. From the creators of Enquirer, Assemble, Remarkable, and Micromatch.
Stars: ✭ 66 (+40.43%)
Mutual labels:  liquid, shopify
Moonmail
Email marketing platform for bulk emailing via Amazon SES (Google Cloud Platform and Azure coming soon)
Stars: ✭ 1,766 (+3657.45%)
Mutual labels:  shopify, liquid
Browser Sync Webpack Plugin
Easily use BrowserSync in your Webpack project.
Stars: ✭ 356 (+657.45%)
Mutual labels:  webpack, livereload
vscode-liquid-snippets
Shopify Liquid Template Snippets
Stars: ✭ 22 (-53.19%)
Mutual labels:  liquid, shopify
Kirby Webpack
💪 A Kirby CMS starter-kit with modern frontend tools
Stars: ✭ 150 (+219.15%)
Mutual labels:  webpack, livereload
Shopify Lang
Multi-Language Shopify Online Shop
Stars: ✭ 26 (-44.68%)
Mutual labels:  shopify, liquid
Simple Boilerplate
A simple webpack boilerplate for your comfortable work with HTML, JS and CSS.
Stars: ✭ 116 (+146.81%)
Mutual labels:  webpack, livereload
vscode-liquid
💧Liquid language support for VS Code
Stars: ✭ 137 (+191.49%)
Mutual labels:  liquid, shopify
Html5 Boilerplate
A simple, fast, modern, pure html, css (and sass), js, live reload starter template
Stars: ✭ 65 (+38.3%)
Mutual labels:  webpack, livereload
bootstrap-shopify-theme
🛍 A free Shopify Theme built with Bootstrap, BEM, Liquid, Sass, ESNext, Theme Tools, ... and Webpack.
Stars: ✭ 41 (-12.77%)
Mutual labels:  liquid, shopify
Concrete
🏗 Concrete Shopify Theme Framework
Stars: ✭ 124 (+163.83%)
Mutual labels:  shopify, liquid
Shopify Modern
A modern template for developing Shopify-themes using Vuejs
Stars: ✭ 136 (+189.36%)
Mutual labels:  shopify, liquid
liquidpy
A port of liquid template engine for python
Stars: ✭ 49 (+4.26%)
Mutual labels:  liquid, shopify
Craigstarter
An open source crowdfunding tool built on Shopify
Stars: ✭ 484 (+929.79%)
Mutual labels:  shopify, liquid

slater theme is deprected and now maintained in slater

Note, the slater-theme is now bundled with Slater-CLI

slater

This theme is no longer maintained here


SLATER

Slater than Slate. Minimaler than minimal.

Up and Running

Clone the repo to your local environment

git clone [email protected]:the-couch/slater-theme.git theme

cd theme

npm install or yarn install


Initial build

We need to upload our initial build of the theme, we can do this by running npm run build to compile the theme one time, from there we can zip the src archive and upload it to our Shopify environment.


Development

Duplicate the config-sample.yml and grab the creds from your shopify theme.

In two separate windows run the watch command (this is to allow us to use our own build process on top of Shopify Slate).

npm run watch:assets - watches js and css

npm run start - manages theme refresh/upload

Custom Routing

We're using operator to extend pjax style routing throughout the theme. This can be used to fetch/cache/handle transitions between routes. This can also help us init/code split specific javascript to specific routes (for example a flickity slideshow).

The code for handling this is found in lib/router

We use the afterRender and beforeRender methods for handling page transitions

To block a custom route add the no-ajax class to the url element.

Why

I think slate is awesome, but I don't like that it's a closed box, I love the flexibility of things like react-create-app because it let's you actually eject the project and extend it. So this is a bit of a hack but I think y'all enjoy it. If you don't like it though, you don't have to use it ;)

Why why

Slate is a really big step forward to Shopify theme development. However, we generally prefer Webpack to Gulp, vanilla js to jQuery, CSS to SCSS, functional to object-oriented, etc. We've removed the boilerplate in favor of nothing, and will be releasing packages to replace the functionality of Slate in the near future.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].