Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
styled-system
Advanced tools
Styled System is a utility for creating consistent, responsive, and theme-based design systems in React. It provides a set of functions and utilities to style components using a system of design tokens, such as spacing, colors, and typography, making it easier to build UI components that adhere to a design system.
Responsive Styles
Styled System allows you to define responsive styles using arrays. The `p` prop sets padding, `bg` sets background color, and `width` sets the width of the component. The values in the arrays correspond to different breakpoints.
const Box = styled.div`
${space}
${color}
${layout}
`;
<Box p={[1, 2, 3]} bg={['red', 'green', 'blue']} width={[1, 1/2, 1/4]} />
Theme-based Design
Styled System integrates with a theme object to provide consistent styling across your application. The `color` and `space` utilities use the theme to apply styles.
const theme = {
colors: {
primary: 'blue',
secondary: 'green',
},
space: [0, 4, 8, 16, 32],
};
const Box = styled.div`
${color}
${space}
`;
<Box color='primary' p={2} />
Utility Functions
Styled System provides utility functions like `space`, `color`, and `layout` that can be used to style components. These functions map props to CSS properties based on the theme.
import { space, color, layout } from 'styled-system';
const Box = styled.div`
${space}
${color}
${layout}
`;
<Box m={2} p={3} bg='primary' width={1/2} />
Emotion is a library designed for writing CSS styles with JavaScript. It provides powerful and flexible styling capabilities, including support for theming and responsive styles. Compared to Styled System, Emotion offers more granular control over CSS but requires more manual setup for design systems.
Styled-components is a library for styling React components using tagged template literals. It allows for writing actual CSS to style components and supports theming and dynamic styling. While it doesn't provide the same utility functions as Styled System, it can be used in conjunction with Styled System for a more comprehensive solution.
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes for building custom designs. It offers a different approach compared to Styled System by using predefined classes instead of JavaScript functions. Tailwind CSS is highly customizable and can be used to create responsive and theme-based designs.
Design system utilities for styled-components
npm i styled-system
import styled from 'styled-components'
import { space, width, fontSize } from 'styled-system'
const Box = styled.div`
${space}
${width}
${fontSize}
`
// width: 50%
<Box width={1/2} />
// font-size: 20px
<Box fontSize={4} />
// margin: 16px
<Box m={2} />
// padding: 32px
<Box p={3} />
// responsive width
<Box width={[ 1, 1/2, 1/4 ]} />
// responsive font-size
<Box fontSize={[ 2, 3, 4 ]} />
// responsive margin
<Box m={[ 1, 2, 3 ]} />
// responsive padding
<Box p={[ 1, 2, 3 ]} />
import { width } from 'styled-system'
The width utility parses a component's width
prop and converts it into a CSS width declaration.
Numbers from 0-1 are converted to percentage widths. Numbers greater than 1 are converted to pixel values. String values are passed as raw CSS values. And arrays are converted to responsive width styles.
The fontSize utility parses a component's fontSize
prop and converts it into a CSS font-size declaration.
Numbers from 0-8 are converted to values on the fontSizes scale.
Numbers greater than x are converted to raw pixel values.
String values are passed as raw CSS values.
And array values are converted into responsive values.
The space utility converts shorthand margin and padding props to margin and padding CSS declarations.
T/K
import { hoc } from 'styled-system'
const Box = hoc('div')
<Box p={2} />
[ '40em', '52em', '64em' ]
[ 12, 14, 16, 20, 24, 32, 48, 64, 72 ]
[ 0, 8, 16, 32, 64 ]
styled-system can be configured with styled-components' ThemeProvider
import { ThemeProvider } from 'styled-components'
import MyComponent from './MyComponent'
const theme = {
breakpoints: [
32, 48, 64
],
space: [
0, 6, 12, 18, 24
],
fontSizes: [
12, 16, 18, 24, 36, 72
]
}
const App = props => (
<ThemeProvider theme={theme}>
<MyComponent
fontSize={4}
my={[ 2, 3 ]}
/>
</ThemeProvider>
)
MIT License
FAQs
Responsive, theme-based style props for building design systems with React
The npm package styled-system receives a total of 533,907 weekly downloads. As such, styled-system popularity was classified as popular.
We found that styled-system demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.