move to pattern library / styleguide module

[zebapy]

⚠️ This would be a major change. Creating this issue to track thoughts.

With the upcoming website projects and for long term use, we need to extract components to a separate library which could then be imported into specific projects, like the MIIS site.

Examples

• https://github.com/primer/primer (really like the use of storybook)
• http://carbondesignsystem.com/
• https://www.lightningdesignsystem.com/
• https://design.trello.com/

(Please post any examples you like. More can be found on http://styleguides.io/examples and https://github.com/alexpate/awesome-design-systems)

Baseline goals

• Have a UI to edit components in isolation (like storybook)
• Able to install the package as an npm dependency
• Be able to load all css/js from a link like using unpkg.com
• Documentation for components lives alongside styles for those components
• Demo code should also live in same folder which should get generated for a styleguide website

Questions

• Do we stick with BEM?
• Do we want a design system prefix? e.g. lightning design system prefixes all classes with lds- to prevent conflicts with 3rd party classes. Carbon uses bx-
• Do we need a structure like ITCSS?
• How would interactive components (js) work in Storybook if we used it?
• Should we set up a monorepo like primer? Having every component as a package seems like overkill

Pieces to move

These are parts of this repo that should be abstracted to this framework

Objects

• grid
• media object

Components

• accordion
• buttons
• breadcrumb
• page nav(?)
• alerts
• forms
• icons
• input groups
• lists (should this be an object?)
• modals
• panel
• pagination
• block/pullquote
• schedule
• tags
• callout
• video

Typography

• headings
• paragraphs
• intro/lead

Utilities

• spacing
• font size
• background colors
• display

Todo

• Finalize color palette and name colors
• Finalize typographic scale (font sizes and line heights)
• Finalize spacing scales
• Determine if a library like this would work for genesis child themes
  • do we use mixins to recreate components if we cannot easily modify class names of a platform?

Overall we should do an actual requirements gathering but I don't know the best way to approach that.

[ghost]

@zebapy lets do this now

[zebapy]

started in https://github.com/middlebury/design-system

[zebapy]

oops. Re-opening because we haven't migrated to the (unfinished) design system. So we can track that progress in this issue.