https://github.com/johnpolacek/styled-system-html

HTML elements extended as styled components via styled system, ready for theming.
https://github.com/johnpolacek/styled-system-html

Last synced: 3 months ago
JSON representation

HTML elements extended as styled components via styled system, ready for theming.

• Host: GitHub
• URL: https://github.com/johnpolacek/styled-system-html
• Owner: johnpolacek
• License: mit
• Created: 2017-10-06T18:32:35.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2020-09-04T23:03:40.000Z (over 4 years ago)
• Last Synced: 2024-10-11T04:45:13.893Z (3 months ago)
• Language: JavaScript
• Homepage: https://johnpolacek.github.io/styled-system-html/
• Size: 26.8 MB
• Stars: 62
• Watchers: 2
• Forks: 0
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - styled-system-html - HTML elements extended as styled components via styled system, ready for theming. (JavaScript)

README

        
# Styled System HTML

[![Build Status](https://travis-ci.org/johnpolacek/styled-system-html.svg?branch=master)](https://travis-ci.org/johnpolacek/system-html)

HTML elements extended as components, ready for theming via styled system. Built with/for [Styled Components](http://styled-components.com) & [Styled System](http://jxnblk.com/styled-system/)

**UPDATE: I now recommend using theme-ui instead of this library. Check it out at [theme-ui.com](https://theme-ui.com)**

## Usage

```

$ npm i styled-system-html

```

Create a [theme](https://www.styled-components.com/docs/advanced) with [settings](http://jxnblk.com/styled-system/api) for colors, typography and spacing.

```

const theme = {

  colors : {'primary':'#071'},

  space : [0,4,8,16,32,64,128]

}

```

Apply your theme to the element components.

```

// Header with 2 levels (8px) of padding, 

// blue/primary background and white text.

  My Header

```

Try it out at [johnpolacek.github.io/styled-system-html](https://johnpolacek.github.io/styled-system-html/)

For more info, see [Styled System](http://jxnblk.com/styled-system/) by [Brent Jackson](http://jxnblk.com).

--

Created by John Polacek

- [@johnpolacek](https://twitter.com/johnpolacek)

- [johnpolacek.com](http://johnpolacek.com)