Populates selectors that target all buttons. You can pass optional states to append to the selectors.
+ + +(...Array<State>)
+
+ // Styles as object usage
+const styles = {
+ [buttons('active')]: {
+ 'border': 'none'
+ }
+}
+
+// styled-components usage
+const div = styled.div`
+ > ${buttons('active')} {
+ border: none;
+ }
+`
+
+// CSS in JS Output
+
+ 'button:active,
+ 'input[type="button"]:active,
+ 'input[type=\"reset\"]:active,
+ 'input[type=\"submit\"]:active: {
+ 'border': 'none'
+}
+
+
+
+
+
+
+
+
+Populates selectors that target all text inputs. You can pass optional states to append to the selectors.
+ + +(...Array<State>)
+
+ // Styles as object usage
+const styles = {
+ [textInputs('active')]: {
+ 'border': 'none'
+ }
+}
+
+// styled-components usage
+const div = styled.div`
+ > ${textInputs('active')} {
+ border: none;
+ }
+`
+
+// CSS in JS Output
+
+ ''input[type="color"]:active,
+ 'input[type="date"]:active,
+ 'input[type="datetime"]:active,
+ 'input[type="datetime-local"]:active,
+ 'input[type="email"]:active,
+ 'input[type="month"]:active,
+ 'input[type="number"]:active,
+ 'input[type="password"]:active,
+ 'input[type="search"]:active,
+ 'input[type="tel"]:active,
+ 'input[type="text"]:active,
+ 'input[type="time"]:active,
+ 'input[type="url"]:active,
+ 'input[type="week"]:active,
+ input:not([type]):active,
+ textarea:active': {
+ 'border': 'none'
+}
+
+
+
+
+
+
+
+
These are reusable chunks of styles. By extracting common ones into small utilities you avoid repetition and mistakes.
+ + +CSS to contain a float (credit to CSSMojo).
+ + +([string]
+ = '&')
+
+ // Styles as object usage
+const styles = {
+ ...clearFix(),
+}
+
+// styled-components usage
+const div = styled.div`
+ ${clearFix()}
+`
+
+// CSS as JS Output
+
+'&::after': {
+ 'clear': 'both',
+ 'content': '',
+ 'display': 'table'
+}
+
+
+
+
+
+
+
+
+CSS to represent truncated text with an ellipsis.
+ + +([string]
+ = '100%')
+
+ // Styles as object usage
+const styles = {
+ ...ellipsis(250px)
+}
+
+// styled-components usage
+const div = styled.div`
+ ${ellipsis(250px)}
+
+
+// CSS as JS Output
+
+div: {
+ 'display': 'inline-block',
+ 'max-width': '250px',
+ 'overflow': 'hidden',
+ 'text-overflow': 'ellipsis',
+ 'white-space': 'nowrap',
+ 'word-wrap': 'normal'
+}
+
+
+
+
+
+
+
+
+Generates a media query to target HiDPI devices.
+ + +([number]
+ = 1.3)
+
+ // Styles as object usage
+const styles = {
+ [hiDPI(1.5)]: {
+ width: 200px;
+ }
+}
+
+// styled-components usage
+const div = styled.div`
+ ${hiDPI(1.5)} {
+ width: 200px;
+ }
+`
+
+// CSS as JS Output
+
+'@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+ only screen and (min--moz-device-pixel-ratio: 1.5),
+ only screen and (-o-min-device-pixel-ratio: 1.5/1),
+ only screen and (min-resolution: 144dpi),
+ only screen and (min-resolution: 1.5dppx)': {
+ 'width': '200px',
+}
+
+
+
+
+
+
+
+
+CSS to hide text to show a background image in a SEO-Friendly.
+ + +// Styles as object usage
+const styles = {
+ 'background-image': 'url(logo.png)',
+ ...hideText(),
+}
+
+// styled-components usage
+const div = styled.div`
+ background-image: url(logo.png);
+ ${hideText()};
+`
+
+// CSS as JS Output
+
+'div': {
+ 'background-image': 'url(logo.png)',
+ 'text-indent': '101%',
+ 'overflow': 'hidden',
+ 'white-space': 'nowrap',
+}
+
+
+
+
+
+
+
+
+CSS to style the selection psuedo-element.
+ + + + + + + + + + + + + +// Styles as object usage
+const styles = {
+ ...placeholder(styles)
+}
+
+// styled-components usage
+const div = styled.input`
+ ${placeholder(css`styles`)}
+`
+
+// CSS as JS Output
+
+'input': {
+ '&:-moz-placeholder': {
+ 'color': 'blue',
+ },
+ '&:-ms-input-placeholder': {
+ 'color': 'blue',
+ },
+ '&::-moz-placeholder': {
+ 'color': 'blue',
+ },
+ '&::-webkit-input-placeholder': {
+ 'color': 'blue',
+ },
+},
+
+
+
+
+
+
+
+
+The retina-image mixin is a helper to generate a retina background image and non-retina +background image. The retina background image will output to a HiDPI media query. The mixin uses +a _2x.png filename suffix by default.
+ + +(string)
+
+ (string)
+
+ ([string]
+ = 'png')
+
+ (string)
+
+ ([string]
+ = '_2x')
+
+ // Styles as object usage
+const styles = {
+ ...retinaImage('my-img')
+}
+
+// styled-components usage
+const div = styled.div`
+ ${retinaImage('my-img')}
+`
+
+// CSS as JS Output
+div {
+ backgroundImage: 'url(my-img.png)',
+ '@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
+ only screen and (min--moz-device-pixel-ratio: 1.3),
+ only screen and (-o-min-device-pixel-ratio: 1.3/1),
+ only screen and (min-resolution: 144dpi),
+ only screen and (min-resolution: 1.5dppx)': {
+ backgroundImage: 'url(my-img_2x.png)',
+ }
+}
+
+
+
+
+
+
+
+
+CSS to style the selection psuedo-element.
+ + + + + + + + + + + + + +// Styles as object usage
+const styles = {
+ ...selection({
+ 'background': 'blue'
+ }, 'section')
+}
+
+// styled-components usage
+const div = styled.div`
+ ${selection({'background': 'blue'}, 'section')}
+`
+
+// CSS as JS Output
+
+'div': {
+ 'section::-moz-selection': {
+ 'background-color':'blue',
+ },
+ 'section::selection': {
+ 'background-color': 'blue',
+ }
+}
+
+
+
+
+
+
+
+
+Mixin to set the height and width properties in a single statement.
+ + + + + + + + + + + + + +// Styles as object usage
+const styles = {
+ ...size('300px', '250px')
+}
+
+// styled-components usage
+const div = styled.div`
+ ${size('300px', '250px')}
+`
+
+// CSS as JS Output
+
+div {
+ 'height': '300px',
+ 'width': '250px',
+}
+
+
+
+
+
+
+
+
+String to represent commong easing functions as demonstrated here: (github.com/jaukia/easie).
+ + +(TimingFunctions)
+
+ // Styles as object usage
+const styles = {
+ 'transition-timing-function': timingFunctions('easeInQuad')
+}
+
+// styled-components usage
+ const div = styled.div`
+ transition-timing-function: ${timingFunctions('easeInQuad')};
+`
+
+// CSS as JS Output
+
+'div': {
+ 'transition-timing-function': 'cubic-bezier(0.550, 0.085, 0.680, 0.530)',
+}
+
+
+
+
+
+
+
+
+Provides an easy way to change the word-wrap property
([string]
+ = 'break-word')
+
+ // Styles as object usage
+const styles = {
+ ...wordWrap('break-all')
+}
+
+// styled-components usage
+const div = styled.div`
+ ${wordWrap('break-all')}
+
+
+// CSS as JS Output
+
+const styles = {
+ overflow-wrap: 'break-all',
+ word-wrap: 'break-all',
+ word-break: 'break-all',
+}
+
+
+
+
+
+
+
+
+Functions that help write nicer code. They're shorter, of course, but they also make it easy to pass in multiple variables without resorting to string concatenation.
+ + +Shorthand for easily setting the animation property. Allows either multiple arrays with animations +or a single animation spread over the arguments.
+ + + + + + + + + + + + + +// Styles as object usage
+const styles = {
+ ...animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])
+}
+
+// styled-components usage
+const div = styled.div`
+ ${animation(['rotate', '1s', 'ease-in-out'], ['colorchange', '2s'])}
+`
+
+// CSS as JS Output
+
+div {
+ 'animation': 'rotate 1s ease-in-out, colorchange 2s'
+}
+
+
+ // Styles as object usage
+const styles = {
+ ...animation('rotate', '1s', 'ease-in-out')
+}
+
+// styled-components usage
+const div = styled.div`
+ ${animation('rotate', '1s', 'ease-in-out')}
+`
+
+// CSS as JS Output
+
+div {
+ 'animation': 'rotate 1s ease-in-out'
+}
+
+
+
+
+
+
+
+
+Populates selectors that target all buttons. You can pass optional states to append to the selectors.
+ + +(...Array<State>)
+
+ // Styles as object usage
+const styles = {
+ [buttons('active')]: {
+ 'border': 'none'
+ }
+}
+
+// styled-components usage
+const div = styled.div`
+ > ${buttons('active')} {
+ border: none;
+ }
+`
+
+// CSS in JS Output
+
+ 'button:active,
+ 'input[type="button"]:active,
+ 'input[type=\"reset\"]:active,
+ 'input[type=\"submit\"]:active: {
+ 'border': 'none'
+}
+
+
+
+
+
+
+
+
+Populates selectors that target all text inputs. You can pass optional states to append to the selectors.
+ + +(...Array<State>)
+
+ // Styles as object usage
+const styles = {
+ [textInputs('active')]: {
+ 'border': 'none'
+ }
+}
+
+// styled-components usage
+const div = styled.div`
+ > ${textInputs('active')} {
+ border: none;
+ }
+`
+
+// CSS in JS Output
+
+ ''input[type="color"]:active,
+ 'input[type="date"]:active,
+ 'input[type="datetime"]:active,
+ 'input[type="datetime-local"]:active,
+ 'input[type="email"]:active,
+ 'input[type="month"]:active,
+ 'input[type="number"]:active,
+ 'input[type="password"]:active,
+ 'input[type="search"]:active,
+ 'input[type="tel"]:active,
+ 'input[type="text"]:active,
+ 'input[type="time"]:active,
+ 'input[type="url"]:active,
+ 'input[type="week"]:active,
+ input:not([type]):active,
+ textarea:active': {
+ 'border': 'none'
+}
+
+
+
+
+
+
+
+
+Tiny helper functions that make your life easier.
+ + +Convert pixel value to ems. The default base value is 16px, but can be changed by passing a +second argument to the function.
+ + + + + + + + + + + + + +// Styles as object usage
+const styles = {
+ 'height': em('16px')
+}
+
+// styled-components usage
+const div = styled.div`
+ height: ${em('16px')}
+`
+
+// CSS in JS Output
+
+element {
+ 'height': '1em'
+}
+
+
+
+
+
+
+
+
+Establish consistent measurements and spacial relationships throughout your projects by incrementing up or down a defined scale. We provide a list of commonly used scales as pre-defined variables, see below.
+ + + + + + + + + + + + + +(number)
+
+ ([Ratio]
+ = 'perfectFourth')
+
+ // Styles as object usage
+const styles = {
+ // Increment two steps up the default scale
+ 'font-size': modularScale(2)
+}
+
+// styled-components usage
+const div = styled.div`
+ // Increment two steps up the default scale
+ font-size: ${modularScale(2)}
+`
+
+// CSS in JS Output
+
+element {
+ 'font-size': '1.77689em'
+}
+
+
+
+
+
+
+
+
+Convert pixel value to rems. The default base value is 16px, but can be changed by passing a +second argument to the function.
+ + + + + + + + + + + + + +// Styles as object usage
+const styles = {
+ 'height': rem('16px')
+}
+
+// styled-components usage
+const div = styled.div`
+ height: ${rem('16px')}
+`
+
+// CSS in JS Output
+
+element {
+ 'height': '1rem'
+}
+
+
+
+
+
+
+
+
+Strip the unit from a given CSS value, returning just the number. (or the original value if an invalid string was passed)
+ + + + + + + + + + + + + +(string)
+
+ (number | string)
+
+
+
+
+
+
+ // Styles as object usage
+const styles = {
+ '--dimension': stripUnit(100px)
+}
+
+// styled-components usage
+const div = styled.div`
+ --dimension: ${stripUnit(100px)}
+`
+
+// CSS in JS Output
+
+element {
+ '--dimension': 100
+}
+
+
+
+
+
+
+
+
+