Shopify Design Foundations
About this repo | Projects | How to use this repo | Technical details | Contribute to our explorations | Resources
About this repo
The experience platform for Shopify. This repository is focused on centralizing foundational design system resources.
| Current status | Owner | Help |
|---|---|---|
| paused | @polaris-team | #polaris |
Projects
A public version of our Github Project will be coming soon!
Development
Make sure Git and Node.js are installed on your computer, then run the following commands in your terminal to get started:
$ git clone https://github.com/Shopify/foundational-design-system-proto.git # git clone repository
$ cd foundational-design-system-proto # access the files
$ npm install # install dependencies
$ npm run dev # run locallyTechnical details
As we continue to iterate and evolve, these technologies are subject to change. Currently, the foundations are built using the following technologies as part of our React TypeScript stack:
- Sprinkles, a CSS framework for vanilla-extract
- vanilla-extract, a CSS-in-JS library
- ViteJS, a frontend build tool
For questions about our tech stack, go to #polaris
Contribute to our explorations
We'd love to hear what you think. Start a conversation in Github Discussions!
Resources
Documentation
NPM packages
@shopify/layout-experimental
An NPM package of experimental React components for layout, including abstractions for flexbox and grid, built with Vanilla Extract and Sprinkles.
Install locally
- Add the dependency:
NPM
npm install @shopify/layout-experimentalYarn
yarn add @shopify/layout-experimental- Import the foundation styles at the base of your app:
import '@shopify/layout-experimental/dist/style.css';- Read the component API documentation
Explore the sandbox
We have created a sandbox utilizing the experimental release of our foundational layout components: Box, Grid, Flex, and more. Check it out to see examples of how the components can be used and try them out yourself!