Skip to content

Implementation of styled sytem by jxnblk with a grid and typescript

License

Notifications You must be signed in to change notification settings

tpdewolf/styled-primitives

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

81 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Styled Primitives

This library is basicly a implementation of jxnblk's styled-system and very similar to rebassjs, but with typescript types built in, an added grid system and without the Img, Link and Button components.

Configuration

Your styled components theme needs a breakpoints and a grid property:

export const theme: DefaultTheme = {
  breakpoints: ['40em', '52em', '64em', '80em'],
  grid: {
    gutter: [15, null, 30], // responsive styles based on your breakpoints
    container: {
      maxWidth: 1280,
      padding: [15, null, 30],
    },
  },
}

Usage

Read the documentation from rebass for more information about the Box, Flex, Card, Text and Heading component.

The grid has 3 components: Contain, Row and Column. Example of grid:

<Contain>
  <Row>
    <Column col={4}>First column</Column>
    <Column col={4}>Second column</Column>
    <Column col={4}>Third column</Column>
  </Row>

  <Row gutter={40}>
    <Column col={[12, null, 6]}>
      With gutter overwrite and responsive styles
    </Column>
    <Column col={[12, null, 6]}>
      I'm 12 columns on mobile and 6 columns on laptop
    </Column>
  </Row>
</Contain>

About

Implementation of styled sytem by jxnblk with a grid and typescript

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •