styled-box

Yet another box using React and Styled-component that aims to reinvent the wheel.

Intend

The intend behind this styled-component is to quickly build proptotypes on a vertical grid without writing css. Please, don't use in production (really).

Quick Start

1 - Set a css variable named --line-height

import { injectGlobal } from 'styled-components';

injectGlobal`
  :root { --line-height: 2rem; }
`

2 - Import the magic box and add marginTop property

import Box from '@rmalgoire/styled-box';

<Box marginTop={1}>I am a box</Box>

3 - Here your export

.bSYwGn {
  margin-top: calc(var(--line-height) * 1);
}

Okay, it's cool, but you will quickly realise that you need to write responsive css.

Responsive object

1 - Inject a breakpoints object by using the ThemeProvider from styled-components

import { ThemeProvider } from 'styled-components';

<ThemeProvider theme={{ breakpoints: {
    tablet: 300,
    desktop: 500,
    ultraDesktop: 1000
  }
}}>
  <MyApp />
</ThemeProvider>

2 - When setting a value for your props, just match the breakpoints object

<Box marginTop={{mobile: [1], desktop: [2]}}>
  I am a box with responsive margin
</Box>

3 - Boom

/* mobile does not exist, so it just print the css directly */
.bSYwGn {
  margin-top: calc(var(--line-height) * 1);
}

/* desktop is converted to em: 500/16 = 31.25 */
@media (min-width: 31.25em) {
  .bSYwGn {
    margin-top: calc(var(--line-height) * 2);
  }
}

Notes:

• The breakpoint value for desktop has been converted into "em".
• If you are using a key that does not exist in breakpoints object, no media query will be printed.

Properties available

| prop | type | example | notes | |------|------|---------|-------| | display | string | 'flex', 'block', 'grid'... | | | width | number, string | 1, '100%', 'auto'... | number will return a multiple of --line-height | | minWidth | number, string | 1, '100%', 'auto'... | number will return a multiple of --line-height | | maxWidth | number, string | 1, '100%', 'auto'... | number will return a multiple of --line-height | | height | number, string | 1, '100%', 'auto'... | number will return a multiple of --line-height | | minHeight | number, string | 1, '100%', 'auto'... | number will return a multiple of --line-height | | maxHeight | number, string | 1, '100%', 'auto'... | number will return a multiple of --line-height | | padding | array* | [1, null], [1, 'auto', 1]... | number will return a multiple of --line-height. null will not print anything | | paddingTop | number, string | 1, '20%' | number will return a multiple of --line-height | | paddingRight | number, string | 1, '20%' | number will return a multiple of --line-height | | paddingBottom | number, string | 1, '20%' | number will return a multiple of --line-height | | paddingLeft | number, string | 1, '20%' | number will return a multiple of --line-height || | margin | array* | [1, null], [1, 'auto', 1]... | number will return a multiple of --line-height. null will not print anything | | marginTop | number, string | 1, '20%' | number will return a multiple of --line-height | | marginRight | number, string | 1, '20%' | number will return a multiple of --line-height | | marginBottom | number, string | 1, '20%' | number will return a multiple of --line-height || | marginLeft | number, string | 1, '20%' | number will return a multiple of --line-height | | borderRadius | array* | [1, null], [1, '50%', 1]... | number will return a multiple of --border-radius. null will not print anything | | color | string | 'primary' | will refer to a css variable for consistency like var(--${value}) | | textAlign | string | 'center', 'left' | | | flexDirection | string | 'row', 'column'... | | | flexWrap | string | 'wrap', 'nowrap'... | | | justifyContent | string | 'flex-start', 'center'... | | | alignItems | string | 'flex-start', 'center'... | | | alignContent | string | 'flex-start', 'center'... | | | gridTemplateAreas | string | 'A C''B C' | | | gridTemplateColumns | string, number | 3, '1fr 2fr 1fr' | number will return repeat(${value}, 1fr) | | gridTemplateRows | string, number | 3, '1fr 2fr 1fr' | number will return repeat(${value}, 1fr) | | gridArea | string | 'A', 'header' | | | gridColumn | string | '2 span', '3 / span 2' | | | gridRow | string | '2 span', '3 / span 2' | | | gridColumnGap | number | .25, 1 | number will return a multiple of --line-height | | gridRowGap | number | .25, 1 | number will return a multiple of --line-height | | gridGap | number | .25, 1 | generate grid-column-gap and grid-row-gap with the same value |

*array
Array are used to behave like shorthand properties. They can be from 1 to 4 entries:

<Box marginTop={[1, 'auto']} padding={[1, 1, 1, 2]} />

You certainly understand the idea at first sight. However, styled-box do not render shorthand properties. It renders a deconstruct version of it:

• It's a good practice in css
• It will save you time

Example:

<Box padding={[1, 1, 1, 2]} />
<Box margin={[null, 'auto']} />

.bSYwGn {
  padding-top: calc(var(--line-height) * 1);
  padding-right: calc(var(--line-height) * 1);
  padding-bottom: calc(var(--line-height) * 1);
  padding-left: calc(var(--line-height) * 2);
}
.eTGHnk {
  margin-right: auto;
  margin-left: auto;
}

Colours

The current background colours solution is shameful. I recommend you to do not use it, as I am working on a refactoring. But If you are still interested, you need to set these variables:

:root {
  /* primary */
  --primary-600: #453C77;
  --primary-500: #5C509E;
  --primary-400: #7364C6;
  --primary-300: #8F83D1;
  --primary-200: #ABA2DD;

  /* secondary */
  --secondary-600: #994C45;
  --secondary-500: #CC655C;
  --secondary-400: #FF7E73;
  --secondary-300: #FF988F;
  --secondary-200: #FFB2AB;

  /* accent colours */
  --dark-600: #2C2932;
  --dark-500: #3A3743;
  --dark-400: #494554;
  --dark-300: #6D6A76;
  --dark-200: #928F98;

  --light-600: #939496;
  --light-500: #C4C5C8;
  --light-400: #F5F6FA;
  --light-300: #F7F8FB;
  --light-200: #F9FAFC;

  /* font colours */
  --font-light: #F7F8FB;
  --font-dark: #3A3743;
}

Then when using a variable, the font color will be set automatically. Well it's currently hardcoded, so depending of your primary and secondary colours, it mays look weird.

<Box background='primary-400' />

It will return:

.bSYwGn {
  background-color: var(--primary-400);
  color: var(--font-light);
}

from 0.XX to 1.XX

Okay so the main change between 0.XX and 1.XX is that most properties are not using shortcut anymore.
Here the props that have changed:

• radius => borderRadius
• row => gridRow
• templates => gridTemplateAreas
• columnGap => gridColumnGap
• rowGap => gridRowGap
• columns => gridTemplateColumns
• column => gridColumn