---
name: Getting Started
route: /
---

import { Playground } from 'docz';

import Container from './atoms/container';
import Text from './atoms/text';
import Row from './atoms/row';
import Col from './atoms/col';

# **D**elta **D**esign **S**ystem


## Intro

⁞

## Installation

Run this command on your project folder:

`npm add git+https://bitbucket.org/albdigitaltransformation/designsystem.web/`

Then import the module anywhere to use the components:

`import styled, { Text, Button } from 'delta-design-system-web';`

⁞

Thats all! 

Look at the component list below to know what to use and how!

⁞

## Default Theme

⁞

## Color Props

Some components can receive prop that extends that change it according to some color of the theme.

For example, to sets a Container component to the primary color of the theme, just add a primary prop on it, like this:

`<Container primary></Container>`

The same is valid for the following list of color variables:

- primary
- secondary
- error
- warn
- success
- black
- white
- gray
- overlay

The following components as known to accept this group of props:

- Container
- Button
- Link
- Text
- Input

There are some components that accepts different props to changes its style, more info is available in its own documentation.
⁞

## Inline Style Logic

Some components uses a "inline style" logic to customize its styles. 

In this cases, it will provide some props that have the same name of CSS properties.

⁞

For example, the [Container](/view) component can receive a maxWidth prop to change its style directly.

<Playground>
  <Container bordered hasContent maxWidth='50%'>50%</Container>
  <br/>
  <Container bordered hasContent maxWidth='200px'>200px</Container>
</Playground>

⁞

## Grid System

- [Container](/container)
- [Row](/row)
- [Col](/col)

⁞

## Components: Atoms
- [Image](/image)
- [Avatar](/avatar)
- [Logo](/logo)
- [Switch](/switch)
- [Badge](/badge)
- [Counter](/counter)
- [Loader](/loader)
- [Icon](/icon)
- [Fab](/fab)
- [Divider](/divider)
- [Arrow](/arrow)
- [Container](/container)
- [Col](/col)
- [Row](/row)
- [Overlay](/overlay)
- [Input](/input)
- [Link](/link)
- [Button](/button)
- [Text](/text)

⁞

## Components: Molecules
- [Card](/card)
- [CardTitle](/cardTitle)
- [Chip](/chip)
- [Username](/username)
- [MenuItem](/menuItem)
- [MenuButton](/menuButton)
- [Menu](/menu)
- [Body](/body)
- [Footer](/footer)
- [Header](/header)
- [LoadScreen](/loadScreen)
- [Select](/select)
- [Fieldset](/fieldset)
- [Modal](/modal)

⁞

## Components: Organisms
- [MainContent](/mainContent)
- [Sidebar](/sidebar)
- [Menu](/menu)

⁞

## Components: Templates
- [Page](/page)

⁞

## Advanced

Delta Design System uses [styled-components](https://www.styled-components.com/) as style library.

To style Delta Design System components or create your own, just import Delta Design System like the follow:

`import styled, { Text, Button } from 'delta-design-system-web';`

⁞

Remember to import a component from the list available on this documentation:

[ATOMS](/#atoms) | [MOLECULES](/#molecules) | [ORGANISMS](/#organisms) | [TEMPLATES](/#templates)

⁞

You can create your own component this way:

`const StyledDiv = style.div`` `

And use it anywhere, preserving its style:

`<StyledDiv>My awesome content</StyledDiv> `

More documentation can be found on [styled-components](https://www.styled-components.com/).

⁞

There are another way to style Delta Design System components, is using a Theme prop that can  be passad directly or through a ThemeProvider.

You can do this importing the ThemeProvider from Delta Design System like this:

`import { ThemeProvider } from 'delta-design-system-web'`

Then passing it arround your application, like the Provider from Redux.

For more info, please visit the complete documentation on [styled-components](https://www.styled-components.com/docs/advanced).

⁞

**IMPORTANT**: do not install styled-component in your application, just use the styled methods exported by Delta Design System.