https://github.com/rajasegar/styled-web-components
Style property primitives for Web components inspired by styled-system
https://github.com/rajasegar/styled-web-components
customelements webcomponent webcomponents
Last synced: 9 months ago
JSON representation
Style property primitives for Web components inspired by styled-system
- Host: GitHub
- URL: https://github.com/rajasegar/styled-web-components
- Owner: rajasegar
- License: mit
- Created: 2021-10-05T00:14:56.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-10-13T09:52:20.000Z (over 4 years ago)
- Last Synced: 2025-09-28T12:07:44.392Z (9 months ago)
- Topics: customelements, webcomponent, webcomponents
- Language: JavaScript
- Homepage:
- Size: 125 KB
- Stars: 8
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# :art: styled-web-components
[](https://npmjs.org/package/@rajasegar/styled-web-components "View this project on npm")
Style property primitives for Web components inspired by [styled-system](https://styled-system.com)
- Zero dependencies :package:
- Light weight ( just 1.9 KB gzipped ) :leaves:
- Convenient and shorthand property names like (m,p, mx, px, etc.,) :wrench: :hammer:
- No build or compilation required :zap:
## Installation
```
npm install @rajasegar/styled-web-components
```
via CDN:
```
```
## Usage
Create your own Custom element with composing props
```js
import { SpaceProps, ColorProps, TypographyProps } from 'styled-web-components'
class SWBox extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: 'open' })
const template = document.createElement('template')
// This is very important, your template should have a style tag with :host selector
template.innerHTML = `
:host { display: block; }
<style>
<slot></slot>`
this.shadowRoot.appendChild(template.content.cloneNode(true))
}
}
customElements.define('sw-box', TypographyProps(ColorProps(SpaceProps(SWBox))))
```
Use your newly defined custom element in your HTML
```html
<sw-box py="2em" color="red" bg="yellow" font-family="sans-serif">
<h1>Hello world</h1>
</sw-box>
```
### Flex box custom component
```js
import { FlexboxProps } from 'styled-web-components'
class SWFlex extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: 'open' })
const template = document.createElement('template')
template.innerHTML = `<style>
:host { display: flex; }
`
this.shadowRoot.appendChild(template.content.cloneNode(true))
}
}
customElements.define('sw-flex', FlexboxProps(SWFlex))
```
#### Usage
```html
Section 1
Section 2
```
### Grid custom component
```js
import { GridProps } from 'styled-web-components'
class SWGrid extends HTMLElement {
constructor() {
super()
this.attachShadow({ mode: 'open' })
const template = document.createElement('template')
template.innerHTML = `
:host { display: grid; }
`
this.shadowRoot.appendChild(template.content.cloneNode(true))
}
}
customElements.define('sw-grid', GridProps(SWGrid))
```
#### Usage
```html
Grid demo
A
B
C
D
E
F
```
For more examples, see the [demo](demo/) folder.