Minimum version?

[hanbyul-here]

• I do often find myself needing only forms from the styleguide. I think It would be nice if we can make somewhat minimal version of styleguide for this kind of need.

[souperneon]

Katie brought up having a separate styleguide for demos as well. Should we discuss this in the frondship meeting this week?

[rfriberg]

I'm thinking about this (and this related issue)... it's true that each page of our website loads more CSS than it needs. But we also don't want to get in the business of generating a single, large, page-specific CSS file for each different page -- as @hanbyul-here noted, that would not allow for caching and would require the browser to re-download the CSS each time the user moves to a different page.

So, here's a two-step proposal (entirely open for discussion):

1) Slim down styleguide.scss to just the essentials (colors, typography, grid spacing -- i.e., most of the design elements). The generated output will be the bulk of the CSS for any given page and will be cached as soon as a user visits the site (or any site using the styleguide). 2) Add page-specific scss files, which may or may not be shared between pages. This is where the UI components would come in. Each page-specific file would import only those components it's actually using. (We could also set up a file for "demos" while we're at it.)

Pros:

• Reduce the overall amount of CSS on a page
• The majority of the CSS on a page would be cached across all pages (currently we use website.css, developer.css, documentation.css or styleguide.css depending on the page)

Cons:

• Would be an additional server request (the page-specific CSS)
• Some of the CSS would likely be repeated (namely SCSS variables and colors)

Thoughts? cc/ @hanbyul-here @meghanhade @souperneon @kkowalsky

[kkowalsky]

I think this makes a lot of sense @rfriberg :smile_cat:

[souperneon]

Sounds great @rfriberg! I know we don't actively think about/track performance but since you bring it up here, I'd be curious to understand the performance comparison if we decide to implement this approach.

[rfriberg]

I don't think we've tracked performance in the past, but we def think about it (hence the pro/con list above). :)

In digging into this, this strategy is not a huge kb-saver due to all the bootstrap dependencies. I'm going to think about this a little more. 🤔

HOWEVER, in digging around, I did find that most pages were calling the unminified versions of these stylesheets. I'm assuming that's an artefact or oversight so making PRs to change them now. (Let me know if it's intentional!)

For reference, the unminified styleguide.css is 213 KB while the minified styleguide.min.css is 159 KB.