Photogram-ui-kit NPM

About The Project

This package provides UI components for every Photogram app. It standardises how Photogram apps look and feel across the board.

Built With

The component library uses the atomic design principle to structure its components.

Atomic Design

An introduction can be found by following the link above. Here is how it works briefly summarized: In atomic design components are classified in:

Atoms An indivisible component e.g. a label or a button. Also more abstract things like color, font and animations can be classified as atoms.
Molecules A combination of Atoms like a searchbar or a card.
Organisms A combination of Molecules like headers, footers or a filter component containing multiple searchbars, autocompletes and selects
Templates A template is like a wireframe (layout). It is the prototype of a page were organisms, molecules and atoms can be filled in.
Pages The finished Webpage with all organisms, molecules and atoms filled in.

Storybook

Storybook is an open-source tool for developing UI components in isolation. It allows developers to create and showcase components independently of the larger application. With Storybook, you can visually test components in various states, making it easier to build, document, and maintain a robust design system. It provides a sandbox environment to develop, document, and test components in isolation, facilitating faster and more efficient development workflows for building complex user interfaces.

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Running Locally

Below is an example of how you can instruct your audience on installing and setting up your app. This template doesn't rely on any external dependencies or services.