Best workflow for Sage

Hello,

Hoping someone can point me in the right direction. So I took the plunge a few years ago and developed a site using the old roots 6 and popped up a site: https://www.umbrella-host.co.uk/ its a few years old now and I’m looking at updating it to the new Sage framework.

I’m not an expert by any means and I’m hoping that some of the confusion I am having in understanding the new framework will help me to create a cleaner theme to deploy that will above all stay clean and not get bloated over time! Was using grunt and composer previously and got the screencast which was hugely helpful. Now it seems sage is using Gulp and bower. So a new learning curve I guess albeit a small one.

So the questions I have are:

  1. Initially when I first deployed the previous site it was really clean at first but then got bloated with different plugins me and the team added. So bower, can that or does that get used to add in different plugins/packages? Trying to get my head around this. Every time we add a plugin it adds its own css and js. Should I now start using bower to add the plugin/package which will then add the css and js to existing css/js files via gulp? or am I incorrect here? having searched in docs I couldn’t find anything specific to help me out here…

  2. I want to further modify the theme by adding some schema code. Now if there is an update to the Sage theme in github and I pull in that to clone will this overwrite all my changes? very new to Git, so what’s the best work-flow to be used here so that I can maintain my customisations but be able to update the theme at the same time keeping it current?

  3. SCSS - which file should I be using to make custom edits too? _variables.scss or a different one? looking at that file and there is only a couple lines of code in. I.e. //colors $ brand-primary - sorry if this is a novice question BUT where would I be able to find the rest of it to customise? and would I then add it to _variables.scss file? has bootstrap been completely stripped out? or its there but I cant see it and custom edits need to go in _variables.scss?

Hoping that I can get the right work-flow going to maintain a clean theme but also be able to use the plugins/code that I need for a sharp looking website. Apologies if some of the questions and thoughts I have had are obvious to some. Its confusing after having used the old roots and now jumping in to use sage :wink:

Thanks in advance.

  1. Bower is a way to maintain/organize vendor plugins or frameworks. Where previously you would have used enqueue to add javascript and css and had to manually manage those files, Bower allows you to add and maintain those separately from your own code. I’ve been hesitant to jump on the Bower bandwagon, but Sage/Trellis has made it easier, and I’m grateful for it now.

  2. It’s tempting to try and keep Sage clean and maintainable, but ultimately it’s a starter theme and framework for setting out on the right foot with building something of your own. I assume there will be updates in future, but you can always check their Git repos to see what’s been added and integrate back into your own code on an as-needed/wanted basis.

  3. Really you can use the scss files however you’d like. Variables is for, well, variables - project-specific items which might be set once and then used throughout other SCSS files such as colours, sizes and paths (the _variables.scss file in the ‘assets/styles/common/’ folder shows simple examples of this). If you add more colours, for example, I’d do it here. From there you can add files to the ‘assets/styles/layouts’ folder - the files here are a good place to start with page, post or header/footer specific code. If I add a custom page, such as a 404 error page, I typically add it here (_404.scss) and then add the import to the list in the _main.scss file.

Hope this helps (I’m just a user, been figuring some of this stuff out myself).

3 Likes

thanks for input @tobyl certainly makes much more sense now!

2 and 3 make much more sense now.

On point 1 though… still confused. Are we talking about plugins that are NOT from the wordpress repository? so for example Yoast SEO. What I am gathering here is that I would install and use that as I normally would do via wp admin AND the bower ones that i can add in and manage are say for example isotope or masonry additions/plugins/dependencies? Is that correct?

So I would continue to add in wordpress repository plugins as I would normally via wp admin and not bower? this is what confuses me!

Did you by any chance find anything specific on how to use bower? any links you can provide would be very helpful indeed. Thank you in advance.

Ah… yes, I see - Bower is not for Wordpress plugins, no - specifically CSS or JS frameworks, like Bootstrap, or jQuery plugins such as jQuery UI. Sage doesn’t alter the way you install Wordpress plugins.

1 Like

Cool. That’s what was confusing me!

Bootstrap has so much in it anyway that I don’t foresee adding anything extra in one of the reasons I started to use roots in the first place. Maybe ill try anyway as it would allow me to play with bower a little bit. Thanks for your quick input :smile:

Thanks for the help answering this @tobyl!