Introducing glamorous 💄 - Hacker Noon

April 04, 2017 0 Comments

Introducing glamorous 💄 - Hacker Noon

 

 


A
styled-components 💅 and inspired solution for styling ⚛ React Components from PayPal

I was building something for my product at PayPal (blog post maybe forthcoming) and got tired of writing components like this:

So I decided to try out styled-components because the hype-train was strong 🚂. I REALLY liked it:

It allowed me to write that same component like this:

const MyStyledDiv = styled.div`
font-size: 20px;
text-align: center;
`
Making composable components that carry their styling with them was just super awesome.

Unfortunately, I hit a wall when I realized that there isn't currently a solution for right-to-left conversion (like CSSJanus or rtl-css-js) and that's a hard requirement for what I'm building. I also had some issues with the size of styled-components at the time (note that you can transpile away a lot of the size if you're willing to give up some dynamic capabilities, which I was unwilling to do).

So after evaluating a bunch of other solutions and trying to enhance existing solutions to be what I wanted them to be, I decided to create my own.

glamorous is React component styling solved with an elegant ( inspired) API, small footprint (<5kb gzipped), and great performance (via ). It has a very similar API to styled-components and uses similar tools under the hood ( glamor). The benefits being:

(thanks to styled-components for the example inspiration).

Let's get a quick look at what a glamorous component looks like:

// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = glamorous.h1({
fontSize: '1.5em',
textAlign: 'center',
color: 'palevioletred',
})
// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = glamorous.section({
padding: '4em',
background: 'papayawhip',
})

The beauty of glamorous is that all of the cool things you can do with glamor, you can do with glamorous. Here are a few examples:

child-selectors (the escape hatch you should rarely use, but is nice to have)

const MyDiv = glamorous.div({
display: 'block',
'& .bold': { fontWeight: 'bold' },
'& .one': { color: 'blue' },
':hover .two': { color: 'red' }
})
const MyResponsiveDiv = glamorous.div({
width: '100%',
padding: 20,
'@media(min-width: 400px)': {
width: '85%',
padding: 0
}
})

theming

import {css} from 'glamor' // or require or whatever...
const bounce = css.keyframes({
'0%': { transform: 'scale(1)', opacity: 0.3 },
'55%': { transform: 'scale(1.2)', opacity: 1 },
'100%': { transform: 'scale(1)', opacity: 0.3 }
})
const MyBouncyDiv = glamorous.div({
animation: `${bounce} 1s infinite`,
width: 50,
height: 50,
backgroundColor: 'red',
})

With the new ThemeProvider (recently added by Alessandro Arnodo), glamorous also supports theming:

And if you need global styles, you can just use glamor to do that (you can do this with styled-components as well). And there many other cool things you can do with glamor (including Server Side Rendering)!

Another great feature of glamorous is it will merge glamor class names together automatically for you. Learn more about that here.


Tag cloud