Sign up
mlibrary
/
design-system
Public
We aim to build trust in our digital services by creating components and standards that are reusable, equitable, informed by research, and available to the public.
design-system.lib.umich.edu/
MIT License
4 stars
3 forks
Star
Notifications
main
Go to file
GitHub Actions Bot
28 days ago
README.md
University of Michigan Library Design System
The design system exists to build trust in our digital services and create components and standards that are reusable, equitable, informed by research, and available to the public.
Are you trying to find design system documentation?
How do I get started developing?
We expect that you have basic working understanding of HTML, CSS, JavaScript, Node.js and npm, and Github.
git clone https://github.com/mlibrary/design-system.git cd design-system
Build the images
docker-compose build
Install the npm packages on your host machine
docker-compose run --rm web npm install
Build everything locally
docker-compose run --rm web npm run build
Start everything
docker-compose up
The Developer Workshop will then be available at http://localhost:8080/. This web page serves as a design system workshop to develop web components and styles and learn how to use the system.
Reference, A to Z
Eleventy is a static site generator that is fairly simple, but powerful enough to use for our design system website.
Gulp for automating our development workflows and build pipelines.
PostCSS for improving the developer experience when writing styles with plugins like postcss-nesting and optimizing and transforming CSS for distribution.
Stencil is a compiler that generates Web Components (more specifically, Custom Elements). We use this to create ready-to-go solutions like with our Universal Header Web Component.
Theo is an abstraction for transforming and formatting Design Tokens. Used to manage our single source of truth for design values, such as colors and spacings.
Releases
20 tags
Packages
No packages published
Contributors 4
jonearley Jon Earley
niquerio Monique Rio
bridgetburke Bridget
dependabot[bot]
Languages
HTML33.0%
TypeScript31.0%
CSS24.3%
SCSS10.4%
Other1.3%
© 2021 GitHub, Inc.
Terms
Privacy
Security
Status
Docs
Contact GitHubPricingAPITrainingBlogAbout
CodeCodeIssuesIssuesPull requestsPull requests1ActionsActionsProjectsProjectsWikiWikiSecuritySecurityInsightsInsights Code Issues Pull requests Actions Projects Wiki Security Insights