Re-architect frontend UI code

[bradfrost]

In an effort to make Pattern Lab's UI more flexible and extensible, the frontend code should be re-architected. I'll likely be tackling this using these conventions, which have proven to be effective on very large, complex software applications. So it should work well here.

Given the nature of the changes, we'll have to be mindful of what would be affected (plugins, dependencies, etc), so could use some guidance in flagging that stuff.

[bradfrost]

Alright I'm going to give a blow-by-blow here. Working on the refactor in this branch: https://github.com/pattern-lab/styleguidekit-assets-default/tree/feature-css-refactor

[bradfrost]

The existing styleguide.scss contains all of the styles, which is unruly. I've chunked things out into the following folders within an scss folder:

• abstracts for variables
• base for reset
• components for UI components
• utilities for helper classes
• vendor for third-party CSS libraries

[bradfrost]

@bmuenzenmeyer @EvanLovely just a heads up that globally I'm going to restructure the current prefix of sg- (standing for "style guide") to pl- (standing for "Pattern Lab" of course). That SG was in place before Pattern Lab had a name, and I think the pl- prefix is more helpful as an identifier.

I bring it up as a heads up because that obviously touches a lot of things.

[bradfrost]

I cleaned up the Sass variables and updated them to be more descriptive. So instead of $sg-gray-light-3 we're now working with $pl-color-gray-20.

[bradfrost]

I renamed the main CSS file to pattern-lab.css and removed minification of the file.

[bradfrost]

I've been making a whole mess of refactoring tweaks to the header. A lot of it is syntax and cleanup, but I'm also starting to work on theming. Here's a taste of what a light theme and a "comfy" (read: bigger padding) theme could look like:

This ultimately can of course lead to a left sidebar version vs an across-the-top header, similar to http://bradfrost.github.io/style-guide-guide/

And this also paves the way for users to more easily theme their own Pattern Labs.

[bradfrost]

The frontend refactoring bleeds into https://github.com/pattern-lab/styleguidekit-mustache-default, so I've been going through and updating that code as well.

[bradfrost]

I also want to change the styleguide directory that ultimately lives in public to pattern-lab, and put everything that belongs to PL into that directory. That includes annotations and anything else that can be put in there.

[bmuenzenmeyer]

@bradfrost

I also want to change the styleguide directory that ultimately lives in public to pattern-lab

let us know if that lands into a branch or branches, as it will likely break PL Node and PL PHP

[bradfrost]

@bmuenzenmeyer Yeah I realize that's going to be a big change, so I'll make it it's own thing and flag/coordinate things accordingly.

[sghoweri]

let us know if that lands into a branch or branches, as it will likely break PL Node and PL PHP

@bmuenzenmeyer that's precisely why I had originally suggested (and had already gotten a good deal into) doing this Styleguidekit Assets Default re-architecture as a monorepo using something like Lerna -- at least for the initial buildout -- given how even a relatively small change in one Pattern Lab dependency can require changes spanning 2 or 3 other repos...