https://github.com/moarwick/react-super-styled
Responsive JSX layouts with Styled Components
https://github.com/moarwick/react-super-styled
css grid layout library react react-component responsive styled-components
Last synced: about 8 hours ago
JSON representation
Responsive JSX layouts with Styled Components
- Host: GitHub
- URL: https://github.com/moarwick/react-super-styled
- Owner: moarwick
- Created: 2017-11-07T17:13:15.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-12-02T01:01:36.000Z (over 7 years ago)
- Last Synced: 2025-06-05T11:31:31.429Z (about 1 year ago)
- Topics: css, grid, layout, library, react, react-component, responsive, styled-components
- Language: JavaScript
- Homepage: https://moarwick.github.io/react-super-styled/
- Size: 3.44 MB
- Stars: 79
- Watchers: 4
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
React Super Styled
==================
[](https://github.com/styled-components/styled-components)
[](http://https://prettier.io/)
### Responsive JSX layouts with [Styled Components](https://www.styled-components.com/)
> Try the [DEMO](https://moarwick.github.io/react-super-styled/)
RSS is a small React component library which aims to accelerate authoring of JSX layouts and improve their readability:
* Semantic component and prop naming
* Handy boolean props for common styling rules
* Media breakpoint support for styles, grid, and display (show/hide)
* Flexbox and flex-based grid (arbitrary columns)
* Spacing "shorthands" for margin, padding
* Customizable theme, breakpoints
* Plus: A highly-configurable SVG icon wrapper, utilities
> Some breaking "improvements" in 0.5.0, 0.7.0 -- see [Releases](https://github.com/moarwick/react-super-styled/releases)
### Installation
```
npm install react-super-styled --save
```
or
```
yarn add react-super-styled
```
Your React project should be using Styled Components v4.0+ as a dependency. If not, [install it](https://www.styled-components.com/docs/basics#installation).
### Usage Example
```
import { css } from 'styled-components';
import { Article, Heading, Text } from 'react-super-styled'
function MyArticle({ text, title }) {
return (
{title}
{text}
)
}
```
### Interactive Docs
Try out *React Super Styled* "live" in the [DEMO](https://moarwick.github.io/react-super-styled/). The intent behind *RSS* is to be intuitive and readable. Experiment with all listed props and inspect the results! :)
> RSS is intended for building layouts, prioritizing dev speed and code readability. Dynamic prop parsing adds some "overhead", so RSS may be inappropriate for complex components requiring lots of custom styling, ultra dense layouts, tables, recursive or iterative applications, or whenever maximum performance is critical. Don't build Reddit with it! :)
### Responsive
Nearly all *RSS* components accept a `styles` prop, with responsive support. Styles can be passed in as a basic string of CSS, e.g. `"color: red; font-size: 2rem"` or an array of CSS interpolations from Styled Components' `css` helper. To specify styles per breakpoint, pass in an object with any of the following supported breakpoint keys:
```styles = {{ xs: "...", sm: "...", md: "...", lg: "...", xl: "..." }}```
### Grid
The `Flex` (container) and `FlexItem` components support all valid Flexbox props, plus an arbitrary-sized grid implementation.
`FlexItem` supports `col` and an optional `offset`, expecting width values as decimal percentages `0 - 1`. For instance, a third of a 12-column grid, offset to the center:
```
Column Content
```
`Flex` accepts an optional `gutter`, which is passed down to any direct `FlexItem` children. Gutters are specified in `rems` (default) or other valid units, e.g. `px`. If specified, negative margins are applied to the `Flex` container to ensure flush alignment of the outer `FlexItem` columns with the container.
As with styles, the grid props will also accept object values, per breakpoint:
```
Column Content
```
### Spacing Shorthands
Web layouts involve frequent tweaking of margins and padding, so most *RSS* components accept "shorthand" `margin` and `padding` props. Passing in numbers defaults to `rem` units.
### Typography
The *RSS* theme does not come with any predefined font sizing. You can specify browser-interpreted sizing, e.g. `small`, `medium` (matches 100%), `large`, `xLarge`, `xxLarge`, as well as relative sizing & weights, e.g. `smaller`, `larger`, `lighter`, `bolder`. Explicit sizing can be set via the `size` prop, which accepts numbers (`rem`) or strings with any valid units.
Per "best practices", it's recommended to use `rems`. Setting the following resets on your document tends to work well, establishing `1rem` as `10px`:
```
html { font-size: 62.5%; } // 1rem
body { font-size: 1.4rem; } // ~14px
```
### Theme
*RSS* components rely on a built-in [default theme](https://github.com/moarwick/react-super-styled/blob/master/src/lib/THEME.js). Being a layout-oriented library, the theme is "design neutral" and contains primarily (Bootstrap compatible) breakpoint values.
Should you want to override any of those values, you can pass in your own theme (or a subset thereof) to any *RSS* component directly via the `theme` prop. Using Styled Components' `ThemeProvider` [wrapper](https://www.styled-components.com/docs/advanced#theming) should also work. The passed-in theme will be "extended over" the defaults, so it can be used to override existing values or to add more variables in case you decide to [extend](#extending-styling) any *RSS* components further.
### Extending Styling
Majority of *RSS* components are functional native Styled Components, so their styling can be extended further using the [styled(Component)](https://www.styled-components.com/docs/basics#extending-styles) constructor. As of SC v4, you can also pass in a tag name via the "as" prop.
### Changelog
* [Releases](https://github.com/moarwick/react-super-styled/releases)