Skip to content
Atomic Style Guide for Solid Applications
Branch: master
Clone or download
Latest commit 0e66f3a Apr 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
atomic-core
atomic-db
components
css
js
readme
scss
.gitignore Added git ignore on .idea for us Intellij devs Apr 5, 2019
README.html
README.md
atomic-foot.php
atomic-head.php
config.codekit
docker-compose.yml
index.php
package.json

README.md

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 applied, check out the React Application Generator in the Solid React SDK.

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

npm install --save @inrupt/solid-style-guide

yarn

yarn add @inrupt/solid-style-guide

Post-install

After installation, the design system can be added to your root component:
import @inrupt/solid-style-guide

To customize your own version

To set up the design system for local development / custom theming:

  1. Fork this repository and add to your local PHP environment.
  2. Configure your preprocessor to output scss/main.scss to css/main.css.
  3. Go to http://localhost/atomic-docs/atomic-core/index.php and get started.

Credit

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.

You can’t perform that action at this time.