Skip to content

Instantly share code, notes, and snippets.

@tlvenn
Forked from mnelson/App.js
Last active Sep 12, 2015
Embed
What would you like to do?
CSS Reset for a React App using Radium
import React from 'react'
import Reset from './styles/Reset'
let styles = React.renderToStaticMarkup(<Reset />);
document.head.insertAdjacentHTML('beforeEnd', styles);
// start the app
import Router from './components/Router'
export default {
'html' : {
fontFamily: 'sans-serif',
msTextSizeAdjust: '100%',
webkitTextSizeAdjust: '100%'
},
'body' : {
margin: 0
},
'article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary': {
display: 'block'
},
'audio, canvas, progress, video': {
display: 'inline-block',
verticalAlign: 'baseline'
},
'audio:not([controls])': {
display: 'none',
height: 0
},
'[hidden], template': {
display: 'none'
},
'a' : {
backgroundColor: 'transparent'
},
'a:active, a:hover': {
outline: 0
},
'abbr[title]': {
borderBottom: '1px dotted'
},
'b, strong': {
fontWeight: 'bold'
},
'dfn' : {
fontStyle: 'italic'
},
'h1' : {
fontSize: '2em',
margin: '0.67em 0'
},
'mark' : {
background: '#ff0',
color: '#000'
},
'small' : {
fontSize: '80%'
},
'sub, sup': {
fontSize: '75%',
lineHeight: 0,
position: 'relative',
verticalAlign: 'baseline'
},
'sup' : {
top: '-0.5em'
},
'sub' : {
bottom: '-0.25em'
},
'img' : {
border: 0
},
'svg:not(:root)': {
overflow: 'hidden'
},
'figure' : {
margin: '1em 40px'
},
'hr' : {
boxSizing: 'content-box',
height: 0
},
'pre' : {
overflow: 'auto'
},
'code, kbd, pre, samp': {
fontFamily: 'monospace, monospace',
fontSize: '1em'
},
'button, input, optgroup, select, textarea': {
color: 'inherit',
font: 'inherit',
margin: 0
},
'button' : {
overflow: 'visible'
},
'button, select': {
textTransform: 'none'
},
'button, html input[type="button"], input[type="reset"], input[type="submit"]': {
webkitAppearance: 'button',
cursor: 'pointer'
},
'button[disabled], html input[disabled]': {
cursor: 'default'
},
'button::-moz-focus-inner, input::-moz-focus-inner': {
border: 0,
padding: 0
},
'input' : {
lineHeight: 'normal'
},
'input[type="checkbox"], input[type="radio"]': {
boxSizing: 'border-box',
padding: 0
},
'input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button': {
height: 'auto'
},
'input[type="search"]': {
webkitAppearance: 'textfield',
boxSizing: 'content-box'
},
'input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration': {
webkitAppearance: 'none'
},
'fieldset' : {
border: '1px solid #c0c0c0',
margin: '0 2px',
padding: '0.35em 0.625em 0.75em'
},
'legend' : {
border: 0,
padding: 0
},
'textarea' : {
overflow: 'auto'
},
'optgroup' : {
fontWeight: 'bold'
},
'table' : {
borderCollapse: 'collapse',
borderSpacing: 0
},
'td, th': {
padding: 0
}
};
import { Style } from 'radium'
import Normalize from './Normalize'
import _ from 'lodash'
class Reset extends Style {};
Reset.defaultProps = {
rules: _.assign({}, Normalize, {
body: {
boxSizing: 'border-box'
}
})
};
export default Reset
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment