styled-bento v0.0.28
styled-bento
Layout atoms based on styled-system and rebass
Install
npm install --save styled-bento
Usage
Theese components are builded in top of rebass and styled-system, so if you don't know about theese libraries, you should visit their documentation:\ Rebass page\ Styled System
import { Flex } from 'styled-bento'
const App = () => {
return (
<Flex
width={[1, 2, 5]}
justifyContent={['column', 'row']}>
<p>Responsive<p>
<p>Props<p>
</Flex>
)
}
import { Flex } from 'styled-bento'
const App = () => {
return (
<Flex
width={[1, 2, 5]}
justifyContent={['column', 'row']}>
<p>Responsive<p>
<p>Props<p>
</Flex>
)
}
Styled bento exports the following components:
Basic props: | Prop | Type | Required | Default | | ------ | ---------------- | -------- | ------- | | mark | Bool || String | false | false | | center | Bool || String | false | false |
- mark: display a dashed border in the component.
- mark='color' changes the color of the border.
- center: centers horizontally and vertically the content, equivalent to justify-content: center and align-items: center.
- center='v || h' applies only one orientation to center.
Mark and Center
Passing booleans
// centers horizontally and vertically and it's marked with black border
const markAndCentered = () => {
return (
<Flex mark center>
<p>Marked<p>
<p>And Centered<p>
</Flex>
)
}
Passing strings
// centers vertically and it's marked with yellow border
const markYellowAndVerticallyCentered = () => {
return (
<Flex mark='yellow' center='v'>
<p>Vertically,<p>
<p>yellow marks<p>
</Flex>
)
}
Bento
Bento is a conceptual way to understand grid with template areas, designed to maintain clear semantics for a good code readability, and easy responsive flexibility and composability. Bento is inspired by atomic-layout package but with rebass in mind.
Why use this pattern?
import { Bento } from 'styled-bento'
const App = () => {
return (
<Bento
mark='pink'
gap={['10px', '50px', '100px']}
areas={[
`'header' 'content'`,
`'header header'
'sidebar content'`,
`'header header'
'content sidebar'`
]}
>
{({ Header, Content, Sidebar }) => (
<>
<Header as={AutoColumns} center mark='blue'>
<Text>Header</Text>
<Text>Header</Text>
</Header>
<Content>Content</Content>
<Sidebar mark center as={Row}>
Sidebar
</Sidebar>
</>
)}
</Bento>
)
}
Column
import { Column } from 'styled-bento'
const App = () => {
return (
<Column>
<p>We<p>
<p>are<p>
<p>in<p>
<p>a<p>
<p>column<p>
</Column>
)
}
Row
import { Row } from 'styled-bento'
const App = () => {
return (
<Row>
<p>side<p>
<p>by<p>
<p>side<p>
<p>paragraph<p>
</Row>
)
}
AutoColumns
import { AutoColumns } from 'styled-bento'
const App = () => {
return (
<AutoColumns>
<p>side<p>
<p>by<p>
<p>side<p>
<p>paragraph<p>
</AutoColumns>
)
}
Masonry
Masonry layout.
Basic props: | Prop | Type | Required | Default | | ------ | ---------------- | -------- | ------- | | cols | int array | false | 3 | | gap | int | false | 0 |
import { Masonry } from 'styled-bento'
const App = () => {
<Masonry cols={[4, 5, 6, 7]} mark='violet'>
<Box mark='white' height='50px'>1</Box>
<Box mark='white' height='150px'>2</Box>
<Box mark='white' height='80px'>3</Box>
<Box mark='white' height='50px'>4</Box>
<Box mark='white' height='100px'>5</Box>
</Masonry>
}
Text
ResizableText
Text that autoresizes to take one line in every screen size.
Basic props: | Prop | Type | Required | Default | | ------ | ---------------- | -------- | ------- | | maxSize| int | false | null | | center | Bool || String | false | false |
License
MIT © MigueloAtla
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago