The design-system from middlebury

considerations for using new digital pulp components on MIIS

We need to think about how we are going to retrofit new components from the institution and school sites into the existing MIIS site.

site navigation (no longer the vertical bar)
page nav (left aligned on new designs)

add components from institution and school site designs

Once we have final designs (and we complete our own revisions), we need to add components we define as design system worthy and add them to this repo.

https://docs.google.com/spreadsheets/d/1zq-59Rthacw1hEk6qk0jKu_lcHSUmuVpixYjywLSeY8/edit#gid=0

establish grid for icons

We should adhere to a grid for icon creation to maintain consistent style and use.

Carbon has good docs on this https://github.com/carbon-design-system/design-system-website/blob/master/src/content/style/iconography/contribution.md

gather feedback on type, colors, and spacing

We need to discuss and finalize our decisions around:

type scales (and line height)
colors and color names
spacing scales

set up linting

eslint (do we want to use d8 eslint config?)
stylelint (is there a good base stylelint we can adopt?)
add npm scripts
consider houndci

design system examples

For tracking other design systems we like

Please post any examples you like. More can be found on

installing and using sass source fails because bootstrap is not available

🚨  /Users/zpykosz/Sites/midd-journey/src/app.scss: File to import not found or unreadable: ./../../node_modules/boot    at options.error (/Users/zpykosz/Sites/midd-journey/node_modules/node-sass/lib/index.js:291:26)

We should either set this as a peer dependency, fix path so it starts at project node_modules somehow, or just remove bootstrap

It would be nice to autogenerate changelog from either following a commit summary structure (fix(button): make thing work) like commitizen or follow a strict github workflow pattern to always submit PRs which we'd label accordingly then generate changlog from labels (https://github.com/lerna/lerna-changelog)

create dev site

need a dev site (can we use doc site?) for developing and iterating on components in isolation

change preview code to use iframe to preview responsiveness

Could maybe create iframes with srcdoc instead of moving files

<iframe srcdoc="<html><body>Hello, <b>world</b>.</body></html>"></iframe>
https://stackoverflow.com/questions/6102636/html-code-as-iframe-source-rather-than-a-url

add banner info to dist files

Do we need banners to put info about the files? Copyright, version, url?

Example https://unpkg.com/[email protected]/dist/css/bootstrap-grid.min.css

deploy to npm

finish build process #2
icon processing #13
finish importing starting framework styles/components etc #10

use gulp-postcss

we should use gulp-postcss since we have multiple postcss plugins (autoprefixer, cssnano, and eventually something to combine media queries)

https://www.npmjs.com/package/gulp-autoprefixer#tip

add offset-{breakpoint}-0 classes

consider remark custom components to render code examples

https://using-remark.gatsbyjs.org/custom-components/#writing-a-component

code examples broken

Not sure what happened but previews for code are not getting inserted into markdown pages

create build process for deploying css/js

create umd bundle for browsers, commonjs, and amd
must be able to import specific components as ES modules
move sass files to dir for importing (so we do not publish md and html files)
min and unmin files
include sourcemaps

create a changelog

maybe auto generate with https://github.com/lerna/lerna-changelog

import usable design system styles from miis frontend

support sub pages

Some documentation pages include lengthy content, so it would be nice to organize them into sub pages.

Example: style/color page has a color palette but as this grows, it would make the page too lengthy to document usage and other info on the same page. Ideally we could have style/color/usage sub page.

Theses subpages would be stored as a folder.

|-style/
|--grid/
|--colors/
|---index.md
|---usage.md

Goals

docs should live with component styles and js
markup should live in same folder
must be able to edit and work on components in isolation

Nice to haves

markup examples show live example next to it from the same code
mobile/tablet/desktop views for examples #4
copy html button for markup example

Docs to finish

Getting started

installation
usage / config?

Guidelines

Style

Color
Grid
Iconography
Typography

Components

Utilities

Scope

Typography

Other todos

load mds styles
load mds scripts for widgets
load mds icons on page

middlebury / design-system Goto Github PK

design-system's People

Contributors

Stargazers

Watchers

design-system's Issues