picostyled
v0.2.1
Published
Lightweight styled components.
Downloads
13
Maintainers
Readme
Picostyled
Lightweight styled components.
Features
- 🚀 Lightweight CSS in JS library: Only 0.7 KB (bundled & gzipped)
- 💅 Styled components: Returns styled components like styled-components that everyone loves :)
- ❤️ For Picodom: Picodom is just 1 KB Virtual DOM builder and patch algorithm
$ npm install picostyled
How to use
Picostyled works well with Media Queries (@media
), Pseudo-element and Pseudo-classes (:hover
).
const themeColor = '#00897b'
const Text = styled('h1')`
font-size: ${props => props.small ? '32px' : '64px'};
cursor: pointer;
color: white;
margin: .1em 0;
transition: all .2s ease-in-out;
&:hover {
transform: scale(1.3);
}
@media (max-width: 450px) {
font-size: 32px;
}
`
const Wrapper = styled('div')`
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100vw;
height: 100vh;
background-color: ${themeColor};
`
return (
<Wrapper>
<Text>{state.trim() === '' ? ':)' : state}</Text>
<Text small>components</Text>
</Wrapper>
)
Perfect example with Picodom and webpack is here.