search

1aurabrown / shopify-boilerplate

7 stars 3 forks source link

Pass #1

Open efekurnaz opened 4 years ago

efekurnaz commented 4 years ago

Hey Laura!

I'm planning to use Tailwind on a new project, wanted to get a glimpse on what you have in there. What's the pass for store?

1aurabrown commented 4 years ago

Whoops! I just disabled the password.

FYI, this is very much an evolving WIP based on what I find I commonly need when starting a project. It's a bit of a frankenstein combo of Slate boilerplate files and other tooling, and I haven't done much to test and develop every view. For instance, I copied many slate templates over but removed all icon assets shipped with Slate from the assets directory, so any remaining references to these files may appear broken. You can see a demo of some default tailwind styling in the first section of the homepage.

1aurabrown commented 4 years ago

@efekurnaz You can see an example of the project I am currently developing in tandem using this boilerplate here: https://shop-sock-candy.myshopify.com/ & https://github.com/1aurabrown/sock-candy-shopify

efekurnaz commented 4 years ago

Thank you for your return!

Got it, I just couldn't find the urge to use Tailwind on a project before, it feels like there's too much to think on beforehand, wanted to see how you set it up and also how it looks on barebones.

I still can't reach to it though, both boilerplate and sock candy have password protection.

1aurabrown commented 4 years ago

Sorry, should be fixed now!

I have just started using Tailwind but I find it rather useful to be able to define colors and type styles in one place. See here: https://github.com/1aurabrown/sock-candy-shopify/blob/master/tailwind.config.js

efekurnaz commented 4 years ago

Wow I can imagine and can't wait to see the Sock Candy come alive!

Defining styles at a one config file seems useful definitely. I just wonder how would the theming with Shopify Editor would be in that case 🤔 Can you add color picker to theme editor with liquid and somehow connect it with tailwind.config.js?

1aurabrown commented 4 years ago

You make a good point. Tailwind styles are defined before css is compiled locally, whereas the theme editor approach for colors and type requires using liquid in css which gets compiled on shopify servers.

If you have a set of predefined colors or fonts declared in the tailwind config it is easy to set up a select list in the theme editor and apply the corresponding classes in your liquid template.

If the possible values are not a predefined set, for example you want to use a color picker rather than a list of predefined colors, it might be possible to set up tailwind classes using css variables as placeholders which later get assigned values via the theme editor, but not sure if that would work for sure. Can you give an example of what would need to be made editable?

Most of my projects have fixed brand guidelines on typography and colors so these do not need to be made editable in the theme editor.

-- Laura Brown laurabrown.xyz

1aurabrown commented 4 years ago

https://github.com/tailwindcss/tailwindcss/issues/260

Looks like you can setup tailwind.config.js using css variables, which will be undefined at postcss compile time. then you'd have to create a .css.liquid file that interpolates values from your theme editor into the css variable declarations. -- Laura Brown laurabrown.xyz