studiopress / genesis-sample

This is the sample theme created for the Genesis Framework.
https://demo.studiopress.com/genesis-sample/
528 stars 285 forks source link

Modularize CSS #364

Open timothyjensen opened 3 years ago

timothyjensen commented 3 years ago

There has been a good deal of interest regarding moving Genesis Sample from CSS to SASS/SCSS. The discussion taking place in #315 identifies the benefit of splitting up the style sheet for performance reasons, but an even greater benefit is that SCSS files make it easier to write clean, maintainable CSS.

In #315 @nickcernis identifies some key questions about implementing a modular CSS version of Genesis Sample, and there is some valuable feedback to his questions posted in the comments.

As Nick stated, once we have some feedback on his points the next steps would include

Adjust existing npm build scripts and tooling.

In this PR I have made an attempt at adding the required build steps. I chose to go with Laravel Mix because it is a fairly popular choice, including the Sage theme, and the level of abstraction it affords should make it easier to maintain the build process.

I should mention that the changes proposed here offer merely a starting point. There is a lot of improvement to be made with regard to cleaning up the SCSS partials.