Susy refactor

[frankiejarrett]

This PR is currently experimental and a continual WIP.

Goals:

• Completely refactor the Primer styles with a fresh base of Underscores Sass
• Create sensible Sass structure and variable naming convention (Clean up SCSS / HTML #9) heavily based on Stout
• Use variables for all values with Customizer controls for easier targeting by our Colors API
• Handle grids on-demand with Susy (Switch to using grids on-demand with Susy #4)
• Drastically reduce the size of style.css (which is currently at 3,830 lines)

[tobeycodes]

This 100% needs to be done. But what about the child themes? We go back to them individually and make the same changes?

[frankiejarrett]

@schrapel In a perfect world you are totally right, every child theme would follow the exact same Sass structure, using the same variables and Susy for grids, but I'm afraid we are to far along in the process now unfortunately for that kind of outcome without impacting the timeline - which is the highest priority.

The child themes don't load the parent styles at all, right? If this is true then I suggest we not change the markup in Primer at all and only address the Sass woes here and child themes can do their own thing for now.

If we nail the Primer styles exactly the way we want, then we will have a standard pattern by which child themes built in the future can use. Then down the road, we can start refactoring each of these first 9 child themes to go back and do what you're suggesting.

[tobeycodes]

Yeah, they use a copy and pasted version of the css from primer at the time development started on the child theme. Not exactly sure why this format was chosen and I'm sure you noticed we've fixed things in certain child themes and then we have to also go and fix them all in the other themes too. It's a bit of a mess.

[frankiejarrett]

@jonathanbardo @schrapel OK I think I've got this branch at a point where I could really use some review from you guys. As of right now the style.css size is cut by more than half. If there is anything that can be improved please do it, just don't over-do it as we want this to be as simple as possible.

Especially want input on the Sass file/folder/variable structure - I have very little experience or opinion on this, just want it to be as clear and easy to understand as possible.

[frankiejarrett]

Don't forget to run npm install since I've added Susy to package.json.

[tobeycodes]

Will have a look at this later tonight / tomorrow