├── src ├── assets │ └── .gitkeep ├── sections │ └── .gitkeep ├── snippets │ └── .gitkeep ├── templates │ ├── 404.liquid │ ├── article.liquid │ ├── blog.liquid │ ├── cart.liquid │ ├── page.liquid │ ├── product.liquid │ ├── search.liquid │ ├── collection.liquid │ ├── gift_card.liquid │ ├── page.contact.liquid │ ├── password.liquid │ ├── customers │ │ ├── account.liquid │ │ ├── login.liquid │ │ ├── order.liquid │ │ ├── addresses.liquid │ │ ├── register.liquid │ │ ├── activate_account.liquid │ │ └── reset_password.liquid │ ├── list-collections.liquid │ └── index.liquid ├── scripts │ ├── sections │ │ └── .gitkeep │ ├── templates │ │ └── .gitkeep │ └── layout │ │ └── theme.js ├── locales │ └── en.default.json ├── styles │ ├── theme.scss │ └── theme.scss.liquid ├── config │ ├── settings_data.json │ └── settings_schema.json └── layout │ └── theme.liquid ├── .github └── probots.yml ├── .babelrc ├── tailwind.config.js ├── .env-sample ├── postcss.config.js ├── README.md ├── package.json ├── .travis.yml ├── CONTRIBUTING.md ├── LICENSE ├── .gitignore ├── slate.config.js └── CODE_OF_CONDUCT.md /src/assets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/sections/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/snippets/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/templates/404.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/templates/article.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/templates/blog.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/templates/cart.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/templates/page.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/templates/product.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/templates/search.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scripts/sections/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/scripts/templates/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/templates/collection.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/templates/gift_card.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/templates/page.contact.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/templates/password.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/locales/en.default.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /src/templates/customers/account.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/templates/customers/login.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/templates/customers/order.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/templates/list-collections.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/templates/customers/addresses.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/templates/customers/register.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.github/probots.yml: -------------------------------------------------------------------------------- 1 | enabled: 2 | - cla 3 | -------------------------------------------------------------------------------- /src/templates/customers/activate_account.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/templates/customers/reset_password.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["babel-preset-env"] 3 | } 4 | -------------------------------------------------------------------------------- /src/templates/index.liquid: -------------------------------------------------------------------------------- 1 | {{ content_for_index }} 2 | -------------------------------------------------------------------------------- /src/styles/theme.scss: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | 3 | @tailwind components; 4 | 5 | @tailwind utilities; 6 | -------------------------------------------------------------------------------- /src/config/settings_data.json: -------------------------------------------------------------------------------- 1 | { 2 | "current": "Default", 3 | "presets": { 4 | "Default": {} 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | theme: { 3 | extend: {} 4 | }, 5 | variants: {}, 6 | plugins: [] 7 | } 8 | -------------------------------------------------------------------------------- /.env-sample: -------------------------------------------------------------------------------- 1 | SLATE_STORE= 2 | 3 | 4 | SLATE_PASSWORD= 5 | 6 | 7 | SLATE_THEME_ID= 8 | 9 | 10 | SLATE_IGNORE_FILES=/config/settings_data.json 11 | -------------------------------------------------------------------------------- /src/styles/theme.scss.liquid: -------------------------------------------------------------------------------- 1 | /** 2 | * Insert your styles with Liquid below. 3 | * 4 | * Import additional stylesheets into this sheet using CSS imports: 5 | * @import url('./global/form.scss'); 6 | */ 7 | -------------------------------------------------------------------------------- /src/scripts/layout/theme.js: -------------------------------------------------------------------------------- 1 | import "../../styles/theme.scss"; 2 | import "../../styles/theme.scss.liquid"; 3 | 4 | document.querySelector('#app > nav > div.block').addEventListener('click', (e) => { 5 | document.querySelector('div[name="nav-items"]').classList.toggle('hidden') 6 | }) -------------------------------------------------------------------------------- /src/config/settings_schema.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "theme_info", 4 | "theme_name": "Skeleton theme", 5 | "theme_version": "1.0.0", 6 | "theme_author": "Shopify", 7 | "theme_documentation_url": "https://github.com/Shopify/skeleton-theme", 8 | "theme_support_url": "https://github.com/Shopify/skeleton-theme/issues" 9 | } 10 | ] 11 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const purgecss = require('@fullhuman/postcss-purgecss')({ 2 | 3 | // Specify the paths to all of the template files in your project 4 | content: [ 5 | './src/**/*.html', 6 | './src/**/*.liquid', 7 | './src/**/*.jsx', 8 | // etc. 9 | ], 10 | 11 | // Include any special characters you're using in this regular expression 12 | defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [] 13 | }); 14 | 15 | module.exports = { 16 | plugins: [ 17 | require('tailwindcss'), 18 | require('autoprefixer'), 19 | ...process.env.NODE_ENV === 'production' 20 | ? [purgecss] 21 | : [] 22 | ] 23 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## This is a Tailwindcss starter template for slate, it is based on Shopify's starter skeleton template 2 | 3 | 4 | This project is based off [shopify/skeleton-theme](https://github.com/shopify/skeleton-theme), checkout Slate for more information. 5 | 6 | get started 7 | ``` 8 | $ yarn create slate-theme my-new-theme tracy-codes/shopify-slate-tailwind-starter 9 | ``` 10 | 11 | This example includes a quick mobile responsive navbar directly from the [Tailwindcss Documentation](https://tailwindcss.com/components/navigation#responsive-header) to show the use of Tailwind. 12 | 13 | ### How to work with slate for Shopify: 14 | 15 | - rename .env-sample to .env and setup your development store config. 16 | 17 | - run: `$ yarn start` 18 | - slate will open your localhost, just ignore that, and go to your development store. 19 | - In the development store you should have your theme loaded 20 | - Changes will hot reload in the dev store. 21 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "slate-tailwind-starter", 3 | "version": "1.0.0", 4 | "private": true, 5 | "author": "Shopify Inc., Tracy Adams", 6 | "description": "A barebones, Slate compatible, starting point for developing Shopify themes with Tailwindcss.", 7 | "keywords": [ 8 | "shopify", 9 | "theme", 10 | "tailwind", 11 | "tailwindcss" 12 | ], 13 | "license": "MIT", 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/tracy-codes/shopify-slate-tailwind-starter" 17 | }, 18 | "devDependencies": { 19 | "@fullhuman/postcss-purgecss": "2.3.0", 20 | "@shopify/slate-tools": "1.0.0-beta.19", 21 | "babel-preset-env": "^1.7.0", 22 | "tailwindcss": "1.5.1" 23 | }, 24 | "scripts": { 25 | "start": "slate-tools start", 26 | "watch": "slate-tools start --skipFirstDeploy", 27 | "build": "slate-tools build", 28 | "deploy": "slate-tools build && slate-tools deploy", 29 | "zip": "slate-tools build && slate-tools zip" 30 | }, 31 | "dependencies": {} 32 | } -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "8.11.1" 4 | cache: 5 | yarn: true 6 | directories: 7 | - node_modules 8 | script: 9 | - yarn build 10 | notifications: 11 | email: false 12 | slack: 13 | secure: RvPL7N56A4CGjVaMdqm2Mcz9pPum7qDr1sn8lvSQvZdz0gHCA4340vhwbC+Ca7BpObE6hGGadsO6FrPVs6PXYQoISm5AW/WkSDmgKKebMxRrHqLrwmtn6Y3/jxNlIWsF5vaz8R/Teq204CGRclUMONfJHw7YbmNt7Qco2OYjU2BpRZo9DZ360nSWYFHa+Ohngh2hMHGWpQVBsYl5tayiy8l8C1/TPKU+Yo5j6rvmzAOviSd0mQtPiwWO5q7exJUJpoX0GKUK4vMFrrBSNdX9Q2LoCNH8RI9br58hHv3s2jeO06rEYV3txVhUViBrNwRY6SNv4Fy0eqFkstXJIXUy7nPVV10lkt/6vd9iRaW5Vansl4TMG4gP5wNRSiMqldxgntXT0geyHGFZezi1sO/wy5JJ7QtPzrLtR/7OpzOHfcHfEI9fvB2GH8/5Vs4vBBKT0rDf30nuhEbGlcvPWMIAnUVAMu6fmp7tdQtmYZC3pBhYAdVbnsddHF0yXcCvSSLUKOUWyxOwIqcjughFmoAzKlrDCl42MX2wohHNJr9ZDhYuu1e2eaVQ8ypg+Tkh6Ss/4lBjHrHFgF+YYoN1rTokA6ChCiTw8r8VEitrHkL/GT1vQKRvHr+f+PbbAfV4FCdLbv/k6OytMnsoPhmAQJ6tAcEbVqgiQouFaKN4Oh3PpeQ= 14 | on_success: change 15 | on_pull_requests: false 16 | template: 17 | - "%{repository_slug} (%{commit}) : %{message}" 18 | - "Build details: %{build_url}" 19 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # How to contribute 2 | 3 | We ❤️ pull requests. If you'd like to fix a bug, contribute a feature or just correct a typo, please feel free to do so, as long as you follow our [Code of Conduct](https://github.com/Shopify/skeleton-theme/blob/master/CODE_OF_CONDUCT.md). 4 | 5 | If you're thinking of adding a big new feature, consider opening an issue first to discuss it to ensure it aligns to the direction of the project (and potentially save yourself some time!). 6 | 7 | ## Getting Started 8 | 9 | To start working on the codebase, first fork the repo, then clone it: 10 | 11 | ``` 12 | git clone git@github.com:your-username/skeleton-theme.git 13 | ``` 14 | 15 | _Note: replace "your-username" with your GitHub handle_ 16 | 17 | Install all package dependencies and link local packages: 18 | 19 | ``` 20 | yarn install 21 | ``` 22 | 23 | Write some features! 24 | 25 | ## Documentation 26 | 27 | If your change affects how people use the project (i.e. adding or removing 28 | functionality, changing the return value of a function, etc), 29 | please ensure the documentation is also updated to 30 | reflect this. 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2018 Shopify Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # This file contains a list of files and folders to be ignored when 2 | # committing to a git repository. Ignored files are both Slate project 3 | # specific files as well as commonly ignored files on any project. 4 | 5 | # For more information on this .gitignore files, see GitHub's 6 | # documentation: https://help.github.com/articles/ignoring-files/ 7 | 8 | # Project # 9 | ################### 10 | node_modules 11 | dist 12 | upload 13 | deploy.log 14 | config/shopify.yml 15 | npm-debug.log 16 | .env 17 | .env.* 18 | 19 | 20 | # Compiled source # 21 | ################### 22 | *.com 23 | *.class 24 | *.dll 25 | *.exe 26 | *.o 27 | *.so 28 | 29 | # Packages # 30 | ############ 31 | # it's better to unpack these files and commit the raw source 32 | # git has its own built in compression methods 33 | *.7z 34 | *.dmg 35 | *.gz 36 | *.iso 37 | *.jar 38 | *.rar 39 | *.tar 40 | *.zip 41 | 42 | # Logs and databases # 43 | ###################### 44 | *.log 45 | *.sql 46 | *.sqlite 47 | 48 | # OS generated files # 49 | ###################### 50 | .DS_Store 51 | .DS_Store? 52 | ._* 53 | .Spotlight-V100 54 | .Trashes 55 | ehthumbs.db 56 | Thumbs.db 57 | 58 | # Custom # 59 | ###################### 60 | *.sass-cache* 61 | .cache/* 62 | _site 63 | /.idea 64 | /.vscode 65 | secrets.json 66 | .jekyll-metadata 67 | .ruby-version 68 | -------------------------------------------------------------------------------- /slate.config.js: -------------------------------------------------------------------------------- 1 | // Configuration file for all things Slate. 2 | // For more information, visit https://github.com/Shopify/slate/wiki/Slate-Configuration 3 | /* eslint-disable no-undef */ 4 | const path = require("path"); 5 | const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 6 | const isDevelopment = process.env.NODE_ENV === "development"; 7 | 8 | const part = { 9 | resolve: { 10 | extensions: [".js", ".css", ".json"] 11 | }, 12 | module: { 13 | rules: [ 14 | { 15 | test: /.js$/, 16 | loader: "babel-loader", 17 | exclude: /node_modules/ 18 | }, 19 | { 20 | test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, 21 | loader: "url-loader", 22 | //include: path.join(__dirname, ''), 23 | options: { 24 | publicPath: "./", 25 | limit: 10000 26 | } 27 | }, 28 | { 29 | test: /\.pcss$/, 30 | exclude: [ /node_modules/, /assets\/static/ ], 31 | use: [ 32 | { 33 | loader: MiniCssExtractPlugin.loader, 34 | options: { 35 | // you can specify a publicPath here 36 | // by default it uses publicPath in webpackOptions.output 37 | // publicPath: '../', 38 | hmr: isDevelopment, 39 | }, 40 | }, 41 | 'style-loader', 42 | 'css-loader', 43 | ] 44 | } 45 | ] 46 | }, 47 | plugins: [ 48 | new MiniCssExtractPlugin() 49 | ] 50 | }; 51 | 52 | const purgecss = require('@fullhuman/postcss-purgecss')({ 53 | // Specify the paths to all of the template files in your project 54 | content: [ 55 | './src/**/*.html', 56 | './src/**/*.liquid', 57 | './src/**/*.jsx' 58 | ], 59 | 60 | // Include any special characters you're using in this regular expression 61 | defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || [] 62 | }); 63 | 64 | module.exports = { 65 | "webpack.extend": config => { 66 | return part; 67 | }, 68 | 'webpack.postcss.plugins': (config, defaultValue) => [ 69 | require('tailwindcss'), 70 | require('autoprefixer'), 71 | require('cssnano')({ 72 | preset: 'default', 73 | }), 74 | ...defaultValue, 75 | ...process.env.NODE_ENV === 'production' ? [purgecss] : [] 76 | ] 77 | }; 78 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Code of Conduct - from slate's original repository 2 | 3 | As contributors and maintainers of this project, and in the interest of 4 | fostering an open and welcoming community, we pledge to respect all 5 | people who contribute through reporting issues, posting feature 6 | requests, updating documentation, submitting pull requests or patches, 7 | and other activities. 8 | 9 | We are committed to making participation in this project a 10 | harassment-free experience for everyone, regardless of level of 11 | experience, gender, gender identity and expression, sexual orientation, 12 | disability, personal appearance, body size, race, ethnicity, age, 13 | religion, or nationality. 14 | 15 | Examples of unacceptable behavior by participants include: 16 | 17 | * The use of sexualized language or imagery 18 | * Personal attacks 19 | * Trolling or insulting/derogatory comments 20 | * Public or private harassment 21 | * Publishing other's private information, such as physical or electronic 22 | addresses, without explicit permission 23 | * Other unethical or unprofessional conduct 24 | 25 | Project maintainers have the right and responsibility to remove, edit, 26 | or reject comments, commits, code, wiki edits, issues, and other 27 | contributions that are not aligned to this Code of Conduct, or to ban 28 | temporarily or permanently any contributor for other behaviors that they 29 | deem inappropriate, threatening, offensive, or harmful. 30 | 31 | By adopting this Code of Conduct, project maintainers commit themselves 32 | to fairly and consistently applying these principles to every aspect of 33 | managing this project. Project maintainers who do not follow or enforce 34 | the Code of Conduct may be permanently removed from the project team. 35 | 36 | This Code of Conduct applies both within project spaces and in public 37 | spaces when an individual is representing the project or its community. 38 | 39 | Instances of abusive, harassing, or otherwise unacceptable behavior may 40 | be reported by contacting a project maintainer at . All complaints will be reviewed and investigated and will 41 | result in a response that is deemed necessary and appropriate to the 42 | circumstances. Maintainers are obligated to maintain confidentiality 43 | with regard to the reporter of an incident. 44 | 45 | This Code of Conduct is adapted from the Contributor Covenant, version 46 | 1.3.0, available from http://contributor-covenant.org/version/1/3/0/ 47 | -------------------------------------------------------------------------------- /src/layout/theme.liquid: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | {{ shop.name }} 11 | 12 | 13 | 14 | {% include 'style-tags', layout: 'theme' %} 15 | {% include 'script-tags', layout: 'theme' %} 16 | 17 | {{ content_for_header }} 18 | 19 | 20 | 21 |
22 | 45 | 46 | {{ content_for_layout }} 47 |
48 | 49 | 50 | --------------------------------------------------------------------------------