@pixelherz/styled-jsx-utils v1.0.1
styled-jsx-utils
Some utilities we frequently use for projects built with styled-jsx.
Getting Started
Installing
Install using npm:
npm install --save @pixelherz/styled-jsx-utils
For usage examples see section Utilities below.
Utilities
Convert
hexToRgba
Convert hex to rgba
import css from 'styled-jsx/css'
import { hexToRgba } from '@pixelherz/styled-jsx-utils/convert'
css`.foo {
color: ${hexToRgba('#000', 0.75)};
background-color: ${hexToRgba('#000000', 0.25)};
}`
pxToEm
Convert px to em
import css from 'styled-jsx/css'
import { pxToEm } from '@pixelherz/styled-jsx-utils/convert'
css`.foo {
font-size: ${pxToEm(24)}em;
}`
Layout
gridCols
Returns the relative width for a given grid (grid configuration object) and number of cols as relative value (in percent, unitless)
import css from 'styled-jsx/css'
import { gridCols } from '@pixelherz/styled-jsx-utils/layout'
const grid = {
layoutWidth: 1094,
gutterWidth: 22,
colWidth: 71,
}
css`.foo {
width: ${gridCols(grid, 8)}%;
}`
gridGutters
Returns the relative width for a given grid (grid configuration object) and number of gutters as relative value (in percent, unitless)
import css from 'styled-jsx/css'
import { gridGutters } from '@pixelherz/styled-jsx-utils/layout'
const grid = {
layoutWidth: 1094,
gutterWidth: 22,
colWidth: 71,
}
css`.foo {
margin-left: ${gridGutters(grid, 1)}%;
}`
mq
Returns media query values in em (ie. 'min-width: 36em')
import css from 'styled-jsx/css'
import { mq } from '@pixelherz/styled-jsx-utils/layout'
css`@media (${mq(576)}) {
.foo {
/* some definitions */
}
}`
offsetText
Hide inner html, ie. when using a background image (icon, logo etc)
import css from 'styled-jsx/css'
import { offsetText } from '@pixelherz/styled-jsx-utils/layout'
css`.foo {
${offsetText()};
}`
Reset
unButton
Remove the browser-default button styles from button elements
import css from 'styled-jsx/css'
import { unButton } from '@pixelherz/styled-jsx-utils/reset'
css`.foo {
${unButton()};
}`
Typography
fontFamily
Returns the font-family
declaration based on a given list of font names.
import css from 'styled-jsx/css'
import { fontFamily } from '@pixelherz/styled-jsx-utils/type'
css`.foo {
${fontFamily(['Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'])};
}`
fontSize
Returns font-size
declaration and (optional) line-height
declaration for a given scale of a given type configuration object
NOTE: Values in type configuration object are in px, unitless
TODO: Implement support for responsive sizes (fluid type sizes)
import css from 'styled-jsx/css'
import { fontFamily } from '@pixelherz/styled-jsx-utils/type'
const type = {
fontSizes: {
m: 18,
l: 24,
},
lineHeights: {
m: 27,
l: 36,
},
}
css`.foo {
${fontSize(type, 'm')};
}`
fontSmoothing
Mixin to set font-smoothing for optimized font rendering on OS X
Defaults to 'sharp' rendering (anti aliased), options are 'none' (crisp) and 'strong' (browser default)
import css from 'styled-jsx/css'
import { fontSmoothing } from '@pixelherz/styled-jsx-utils/type'
css`.foo {
${fontSmoothing('none')};
}`
Versioning
We use SemVer for versioning. For the versions available, see the tags on this repository.
License
This project is licensed under the ISC License - see the LICENSE.md file for details.