Skip to content

Instantly share code, notes, and snippets.

@thevangelist
Last active December 2, 2017 12:22
Show Gist options
  • Save thevangelist/95a04266e4e8f9b789c0a3bf36a1a86b to your computer and use it in GitHub Desktop.
Save thevangelist/95a04266e4e8f9b789c0a3bf36a1a86b to your computer and use it in GitHub Desktop.
Styled Components (styled-components)
import React, { Component } from 'react';
import styled, { ThemeProvider } from 'styled-components';
import { modularScale } from 'polished';
const BASE = '#DBECF3';
const BRAND = '#062E40';
const BRAND_ALT = '#34A5B6';
const ATTENTION = '#F94253';
const UNIT = 1;
const HALF = `${UNIT / 2}rem`;
const ONE = `${UNIT}rem`;
const TWO = `${UNIT * 2}rem`;
const FOUR = `${UNIT * 4}rem`;
const color = (props) => {
if (props.primary) return BRAND;
if (props.secondary) return BRAND_ALT;
if (props.danger) return ATTENTION;
return BASE
}
const Button = styled.button`
background: ${props => color(props)};
padding: ${ONE};
font-size: ${TWO};
filter: invert(${props => props.invert ? '100' : '0'}%);
border: 0;
border-radius: ${HALF};
font-family: ${props => props.theme.font};
&:hover {
background: currentColor;
}
`;
const Link = Button.withComponent('a');
const Logo = styled(({className}) => (
<img className={className} src="http://www.esajuhana.com/img/logo.png" alt="Esa Juhana" />
))`
width: ${FOUR};
display: block
`;
const Header = styled(({className, children}) => (
<header className={className}>
<a href="/" title="Home">
<Logo />
</a>
{children}
</header>
))`
display: flex;
align-items: center;
justify-content: space-between;
background: ${BRAND};
color: ${BASE};
padding: ${ONE};
`;
const Footer = styled(({className, children}) => (
<footer className={className}>
{children}
</footer>
))`
justify-content: space-between;
background: ${BRAND};
color: ${BASE};
padding: ${ONE};
text-align: center;
margin-top: auto;
`;
const PageContent = styled(({className, children}) => (
<section className={className}>
{children}
</section>
))`
margin: 1rem
`;
const AppContent = styled(({className, children}) => (
<div className={className}>
<Header>@Thevangelist</Header>
<PageContent>
{children}
</PageContent>
<Footer>
<p>Copyright 2017 &copy; - @thevangelist</p>
</Footer>
</div>
))`
height: 100vh;
display: flex;
flex-direction: column;
color: ${BRAND}
`;
const H1 = styled.h1`font-size: ${modularScale(6, 0.5)}`;
const H2 = styled.h2`font-size: ${modularScale(5, 0.5)}`;
const H3 = styled.h3`font-size: ${modularScale(4, 0.5)}`;
const H4 = styled.h4`font-size: ${modularScale(3, 0.5)}`;
const H5 = styled.h5`font-size: ${modularScale(2, 0.5)}`;
const H6 = styled.h6`font-size: ${modularScale(1, 0.5)}`;
// We're passing a default theme for Buttons that aren't wrapped in the ThemeProvider
Button.defaultProps = {
theme: {
font: 'sans-serif'
}
}
// Define what props.theme will look like
const theme = {
font: 'serif'
};
class App extends Component {
render() {
return (
<AppContent>
<H1>Trying out Styled-Components</H1>
<H2>Inventing new ways to style everything</H2>
<Button>Normal</Button>
<Button invert>Invert</Button>
<Button primary>Primary</Button>
<Button primary invert>Primary</Button>
<Button secondary>Secondary</Button>
<Button secondary invert>Secondary</Button>
<Button danger>Danger</Button>
<Button danger invert>Danger</Button>
<ThemeProvider theme={theme}>
<Button>Normal</Button>
</ThemeProvider>
<Link>Link Button</Link>
<Link invert>Link Button</Link>
</AppContent>
);
}
}
export default App;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment