Wednesday, 19 August, 2020 UTC
Summary
In this lesson we’ll create the base layout primitive component — Box, that will allow us (together with other layout primitives) to create almost any complex layout without writing custom CSS. We’ll use [Styled System](https://styled-system.com/) to create this component. Styled System allows us to create React components, where we can control styles using component props. Fox example, a simplified Box component: ```jsx import styled from 'styled-components'; import { space, color, layout } from 'styled-system'; export const Box = styled.div(space, color, layout); ``` By default, it renders a `
` element without any styles, and we can control typography, spacing and color using props. Here we’re defining width, padding, bottom margin, and background color: ```jsx I’m a primary box, with responsive width, some padding, and bottom margin ``` Each of these props can accept an array to make it responsive: we can pass up to three value for mobile, tablet and desktop breakpoints. For example, above we have a smaller width on wide screens. Also, all these values will be taken from the site theme, which makes our UI consistent. In the example above, it will take the value of the primary color from the theme for the background color, and the fifth item in the spacing scale for padding. Prop names are camel cased CSS property names, with a few shortcuts like `p`, `px`, `py` for padding, `m`, `mx`, `my` for margins, and `bg` for background color. **We’ll use following libraries:** * [styled-components](https://styled-components.com/) * [Styled System](https://styled-system.com/) * [@styled-system/prop-types](https://github.com/styled-system/styled-system/tree/master/packages/prop-types) You can either use this lesson’s [Git repository](https://github.com/sapegin/cddcourse) or install them manually in your project: ``` npm install styled-components styled-system @styled-system/prop-types ``` **Useful links and documentation:** * [Styled System docs](https://styled-system.com/getting-started/) * [Build a Box](https://styled-system.com/guides/build-a-box)