# @arnat/styled-base

> The bootstrap base components created with styled-components

Latest version **0.0.12** (published 2019-12-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install @arnat/styled-base
pnpm add @arnat/styled-base
yarn add @arnat/styled-base
bun add @arnat/styled-base
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.12 |
| Published | 2019-12-30 |
| First published | 2019-12-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 179 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Arnat Technologies |
| Maintainers | arnat.technologies, rsurjano |
| Keywords | arnat, components, react, react-component, ui, styled-components, base, bootstrap, presentational, stateless |

## Links

- npm: https://www.npmjs.com/package/@arnat/styled-base
- Repository: https://github.com/arnat-technologies/styles
- Issues: https://github.com/arnat-technologies/styles/issues
- npm.io page: https://npm.io/package/@arnat/styled-base

## Dependencies (1)

- [@arnat/styled-config](https://npm.io/package/@arnat/styled-config.md) ^0.0.11

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 0.0.12 (latest) — 2019-12-30
- 0.0.11 — 2019-12-29
- 0.0.10 — 2019-12-28
- 0.0.9 — 2019-12-22
- 0.0.7 — 2019-12-21
- 0.0.6 — 2019-12-21
- 0.0.4 — 2019-12-15
- 0.0.3 — 2019-12-14
- 0.0.2 — 2019-12-14
- 0.0.1 — 2019-12-09

## README

# styled-base-components

[![npm](https://img.shields.io/npm/v/@arnat/styled-base.svg?style=flat-square)](https://www.npmjs.com/package/@arnat/styled-base)
[![Travis branch](https://img.shields.io/travis/arnat-technologies/styles/master.svg?style=flat-square)](https://travis-ci.org/arnat-technologies/styles)
[![Codecov branch](https://img.shields.io/codecov/c/github/arnat-technologies/styles/master.svg?style=flat-square)](https://codecov.io/gh/arnat-technologies/styles)
[![storybook](https://img.shields.io/badge/docs%20with-storybook-f1618c.svg?style=flat-square)](https://arnat-technologies.github.io/styles)
[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg?style=flat-square)](https://lernajs.io/)

Modular approach to use [bootstrap](https://getbootstrap.com)
components for quick prototypes, as an entrypoint of the component
library.

## Usage

This package contains basic global style for bootstrap layouts and
styled components for using `utility` classes from bootstrap.

This package also contains `Transition` components that can be used for
creating transitions.

```jsx
import { styled } from 'styled-components';
import { BootstrapBaseCss, Div, Utilities } from '@arnat/styled-base';

// Same as imported <Div> components, but you may want to use this for
// styling existing components.
const MyComponent = styled.div`
  ${Utilities};
`;

const App = (props) => (
  <div>
    <BootstrapBaseCss />
    {/* This installs bootstrap styling for html elements */}

    <Div bgDark textLight p2>
      Hello World
    </Div>
  <div>
);
```

## Properties

### Transition

- transitionComponentProps **Type**: object
- delay **Type**: millisecods
- duration **Type**: milliseconds
- timingFunc **Type**: string
- noExit **Type**: boolean
- noEnter **Type**: boolean
- noInitialEnter **Type**: boolean
- hideOnExit **Type**: boolean

### Utilities

Possible values for `{size}`:

- nothing (for `xs`)
- `Sm` (for `sm`)
- `Md` (for `md`)
- `Lg` (for `lg`)
- `Xl` (for `xl`)

- vertical-align:
  - `text{size}Baseline`
  - `text{size}Top`
  - `text{size}Bottom`
  - `text{size}TextTop`
  - `text{size}TextBottom`
- text-align:
  - `text{size}Justify`
  - `text{size}Left`
  - `text{size}Right`
  - `text{size}Center`
- white-space:
  - `text{size}Wrap`
  - `text{size}NoWrap`
- text-transform:
  - `text{size}Lowercase`
  - `text{size}Uppercase`
  - `text{size}Capitalize`
- font-weight:
  - `text{size}WeightBold`
  - `text{size}WeightBolder`
  - `text{size}WeightNormal`
  - `text{size}WeightLight`
  - `text{size}WeightLighter`
- font-style:
  - `text{size}Italic`
- font-family:
  - `text{size}Monospace`
- color:
  - `text{size}Primary`
  - `text{size}Secondary`
  - `text{size}Success`
  - `text{size}Danger`
  - `text{size}Warning`
  - `text{size}Info`
  - `text{size}Light`
  - `text{size}Dark`
  - `text{size}Darker`
  - `text{size}Reset`
- background-color:
  - `bg{size}Primary`
  - `bg{size}Secondary`
  - `bg{size}Success`
  - `bg{size}Danger`
  - `bg{size}Warning`
  - `bg{size}Info`
  - `bg{size}Light`
  - `bg{size}Dark`
  - `bg{size}Darker`
  - `bg{size}White`
  - `bg{size}Transparent`
- text-decoration:
  - `textDecoration{size}None`
- word-break + overflow-wrap:
  - `text{size}WordBreak`
- (max-)width/height:
  - `w{size}100` (width: 100%)
  - `w{size}75` (width: 75%)
  - `w{size}50` (width: 50%)
  - `w{size}25` (width: 25%)
  - `h{size}100` (height: 100%)
  - `h{size}75` (height: 75%)
  - `h{size}50` (height: 50%)
  - `h{size}25` (height: 25%)
  - `mw{size}100` (max-width: 100%)
  - `mw{size}75` (max-width: 100%)
  - `mw{size}50` (max-width: 100%)
  - `mw{size}25` (max-width: 100%)
  - `mh{size}100` (max-height: 25%)
  - `mh{size}75` (max-height: 25%)
  - `mh{size}50` (max-height: 25%)
  - `mh{size}25` (max-height: 25%)
- box-shadow:
  - `shadow{size}None`
  - `shadow{size}Small`
  - `shadow{size}`
  - `shadow{size}Large`
- position:
  - `position{size}Static`
  - `position{size}Relative`
  - `position{size}Absolute`
  - `position{size}Fixed`
  - `position{size}Sticky`
- overflow:
  - `overflow{size}Auto`
  - `overflow{size}Hidden`
- float:
  - `float{size}Right`
  - `float{size}Left`
  - `float{size}None`
- resize:
  - `resize{size}None`
  - `resize{size}Both`
  - `resize{size}Vertical`
  - `resize{size}Horizontal`
- border:
  - `borderLeft{size}`
  - `borderRight{size}`
  - `borderTop{size}`
  - `borderBottom{size}`
  - `border{size}`
  - `borderLeft{size}0`
  - `borderRight{size}0`
  - `borderTop{size}0`
  - `borderBottom{size}0`
  - `border{size}0`
- border-color:
  - `border{size}Primary`
  - `border{size}Secondary`
  - `border{size}Success`
  - `border{size}Danger`
  - `border{size}Warning`
  - `border{size}Info`
  - `border{size}Light`
  - `border{size}Dark`
  - `border{size}Darker`
- border-radius:
  - `roundedTop{size}`
  - `roundedBottom{size}`
  - `roundedLeft{size}`
  - `roundedRight{size}`
  - `rounded{size}`
  - `rounded{size}Circle`
  - `rounded{size}Pill`
- display
  - `d{size}None`
  - `d{size}Inline`
  - `d{size}InlineBlock`
  - `d{size}Block`
  - `d{size}Table`
  - `d{size}TableCell`
  - `d{size}TableRow`
  - `d{size}Flex`
  - `d{size}InlineFlex`
- flex-direction:
  - `flex{size}Row`
  - `flex{size}RowReverse`
  - `flex{size}Column`
  - `flex{size}ColumnReverse`
- justify-content:
  - `justifyContent{size}Start`
  - `justifyContent{size}End`
  - `justifyContent{size}Center`
  - `justifyContent{size}SpaceBetween`
  - `justifyContent{size}SpaceAround`
  - `justifyContent{size}SpaceEvenly`
- align-items:
  - `alignItems{size}Start`
  - `alignItems{size}End`
  - `alignItems{size}Center`
  - `alignItems{size}Baseline`
  - `alignItems{size}Stretch`
- align-self:
  - `alignSelf{size}Start`
  - `alignSelf{size}End`
  - `alignSelf{size}Center`
  - `alignSelf{size}Baseline`
  - `alignSelf{size}Stretch`
- align-content:
  - `alignContent{size}Start`
  - `alignContent{size}End`
  - `alignContent{size}Center`
  - `alignContent{size}Baseline`
  - `alignContent{size}Stretch`
- order:
  - `order{size}0`
  - `order{size}1`
  - `order{size}2`
  - `order{size}3`
  - `order{size}4`
  - `order{size}5`
  - `order{size}6`
  - `order{size}7`
  - `order{size}8`
  - `order{size}9`
  - `order{size}10`
  - `order{size}11`
  - `order{size}12`
- flex-grow:
  - `flexGrow{size}`
  - `flexGrow{size}0`
- flex-shrink:
  - `flexShrink{size}`
  - `flexShrink{size}0`
- flex-wrap:
  - `flexWrap{size}`
  - `flexNoWrap{size}`
  - `flexNoWrap{size}Reverse`
- visibility:
  - `visible{size}`
  - `invisible{size}`
- Clearfix
  - `clearfix{size}`
- Truncate text
  - `text{size}Truncate`
- Hide text
  - `text{size}Hide`

#### Spacing

Possible properties:

- `m` => margin
- `p` => padding

Possible property directions:

- `l` => left
- `r` => right
- `t` => top
- `b` => bottom
- `x` => left and right
- `y` => top and bottom

Possible values for spacing:

- `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`

> Results in "`value * 0.25`rem"

Possible values for margin only:

- `n0`, `n1`, `n2`, `n3`, `n4`, `n5`, `n6`, `n7`, `n8`, `n9`
- `Auto`

> `n` means negative

Spacing props has format:

```text
{property}{direction}{size}{value}
```

Examples:

```text
m1 (margin: 1*0.25rem)
mb3 (margin-bottom: 3*0.25rem)
mbn3 (margin-bottom: -3*0.25rem)
my3 (margin-top: 3*0.25rem; margin-bottom: 3*0.25rem)
pr2 (padding-right: 2*0.25rem)
pMd5 (@media (min-width: medium-screen-size) { padding: 5*0.25rem;})
```

---
_Source: https://npm.io/package/@arnat/styled-base · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._