Atomic Design System for Solid Applications
Inspired by Brad Frost's Atomic design principles, we use Nick Berens' Atomic Docs framework as a base style guide / design system generation tool for Solid applications. This is a live repository of UI styles and UX patterns utilized in our Software Development Kits for Solid. The design system will continue to evolve as we commit and release new patterns and features.
This design system can be forked and customized for unique theming in your Solid application projects.
To see this live, go to design.inrupt.com.
As this is a living design system, new components are continually added and refactored as the system evolves.
To use it in your application
There are two main ways to install the design system output (which can be replicated for customized themes/systems):
npm install --save @inrupt/solid-style-guide
yarn add @inrupt/solid-style-guide
After installation, the design system can be added to your root component:
To customize your own version
To set up the design system for local development / custom theming:
- Fork this repository and add to your local PHP environment.
- Configure your preprocessor to output
- Go to
http://localhost/atomic-docs/atomic-core/index.phpand get started.
Built using Nick Berens' Atomic Docs Framework based in PHP and SASS/SCSS.
Check out AtomicDocs.io for more detail on the framework and installation tips.