https://github.com/bkdev98/innoteq-design-system

🧜🏿‍♂️
https://github.com/bkdev98/innoteq-design-system

design-system gatsbyjs reactjs styled-components styled-system

Last synced: 17 days ago
JSON representation

🧜🏿‍♂️

• Host: GitHub
• URL: https://github.com/bkdev98/innoteq-design-system
• Owner: bkdev98
• Created: 2019-05-28T02:47:20.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-03T11:16:21.000Z (about 2 years ago)
• Last Synced: 2024-11-15T04:26:48.325Z (about 2 months ago)
• Topics: design-system, gatsbyjs, reactjs, styled-components, styled-system
• Language: JavaScript
• Size: 229 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Innoteq design system 🧜🏿‍

`yarn add innoteq-design-system`

### Setup Instructions

- TODO

### Directory Structure

    .

    └── src

        ├── atoms                  # Contains all the atoms

        ├── components             # Contains all the components

        ├── molecules              # Contains all the molecules

        ├── customStyleSystem.js   # Defines custom style methods which are unavailable in styled-system

        ├── theme.js               # Defines theme for the design system

        └── utils                  # Contains utility functions

### Building blocks

#### Atoms

Atoms are indivisible components which are built on top of html elements with basic style over it. Every atom will have its own constraints defined.

An Example of atom is: `Box`. Box is a styled div but only the following styles can be configured for the Box. - display - height, width - maxHeight, maxWidth - margin and padding - color - boxSizing

#### Molecules

Molecules are components which are built on top of html elements and/or atom components with basic style over it. Every molecule will have its own constraints defined.

An Example of molecule is: `Container`. Container is a styled Box but only `maxWidth` can be configured for it.

#### Components

Components are made of atoms and molecules. Complex molecules which are specific to the use case (innoteq website) of the design system are grouped under components.

An Example of Component is: `Feature` which displays heading, description and image. `Feature` is a re-usable component on innoteq website.

### Docs

- TODO