css-in-js-styles-utils
Utils for Styled Components (packages: styled-components, @emotion, linaria etc.).
Table of content
Installation and usage
Step 1:
npm i css-in-js-styles-utils
Step 2:
Import whatever function you need. See description below.
css-in-js normalize and reset
Normalize
This normalizes styles for styled components packages, to use it you need to install one of the styled-components packages like: @emotion.
This is a function witch has some default arguments. You can change it.
| Name | Default value | Description |
|---|---|---|
| fontSize | '1.4rem' | font on body |
| lineHeight | 1.5 | line-height on body |
| baseFontSize | '62.5%' | font on html (this do 1rem to be 10px) |
import { css } from '@emotion/react';
import { NormalizeStyles } from 'css-in-js-styles-utils';
// @emotion
const GlobalStyles = css`
${NormalizeStyles(
fontSize,
lineHeight,
baseFontSize
)};
`;
export {
GlobalStyles
};Reset [WIP]
import { css } from '@emotion/react';
import { ResetStyles } from 'css-in-js-styles-utils';
// @emotion
const GlobalStyles = css`
${ResetStyles(
fontSize,
lineHeight,
baseFontSize
)};
`;
export {
GlobalStyles
};
css-in-js mixins
List of mixins
breakpoint's mixins and default breakpoints
-
breakpoints- list of default breakpoints -
breakpointMinWidthMixin- Responsive web design - min-width mixin -
breakpointMaxWidthMixin- Responsive web design - max-width mixin
import { breakpoints } from 'css-in-js-styles-utils';Default breakpoints values:
| Breakpoint name | Value |
|---|---|
| smallPhone | 320px |
| portraitPhone | 360px |
| landscapePhone | 480px |
| smallTablet | 600px |
| portraitTablet | 768px |
| landscapeTablet | 840px |
| smallLaptop | 1024px |
| laptop | 1280px |
| desktop | 1366px |
| hdDesktop | 1440px |
| fhdDesktop | 1920px |
Default breakpoints height values:
| Breakpoint name | Value |
|---|---|
| smallPhone | 320px |
| landscapePhone | 360px |
| portraitPhone | 480px |
| smallLaptop | 600px |
| laptop | 768px |
| desktop | 840px |
| hdDesktop | 920px |
| fhdDesktop | 1280px |
Use with mixins
-
Create style mixin:
// styles/breakpointMixin.js import { breakpoints, breakpointMinWidthMixin } from 'css-in-js-styles-utils'; export const breakpointMixin = Object .keys(breakpoints) .reduce( (acc, current) => breakpointMinWidthMixin(acc, current, breakpoints), {} );
And then you can use it like this:
// some component e.g.: Button.styles.js // import breakpointMixin from previesly created file const ButtonWrapper = styled.div` color: yellow; // mobile styles ${breakpointMixin.smallTablet(css` color: red; // style for 600px width or more `)}; `;
* with other breakpoint's mixins do the same.
-
Import every time
@TODO
OPTIONS:
- You can use your own breakpoint's object:
// 1. Create style mixin
// styles/breakpointMixin.js
import { breakpointMinWidthMixin } from 'css-in-js-styles-utils';
const breakpoints = {
phone: '360px',
tablet: '600px',
laptop: '1280px',
desktop: '1366px'
};
export const breakpointMixin = Object
.keys(breakpoints)
.reduce(
(acc, current) => breakpointMinWidthMixin(acc, current, breakpoints), {}
);
// some component e.g.: Button.styles.js
// import breakpointMixin from previesly created file
const ButtonWrapper = styled.div`
color: yellow; // mobile styles
// Use names that exist in yor own breakpoints variable
${breakpointMixin.phone(css`
color: red; // style for 600px width or more
`)};
`;
// 2. Import every time
@TODOChange HEX color to RGB (with transparency)
Arguments:
-
hex - is required, e.g.
#000000(you need to provide a 6 digit hex color) - alpha - is optional - use if you want to have hex color with opacity
import { hexToRgbMixin } from 'css-in-js-styles-utils';
const ButtonWrapper = styled.div`
color: hexToRgbMixin('#000000', .3);
`;FontFace mixin
Arguments:
- familyName
- src - object with woff, ttf and svg paths
- weight - default: 'normal'
- fontStyle - default: 'normal'
import { fontFaceMixin } from 'css-in-js-styles-utils';
import myFontWoff from './assets/fonts/myFont.woff';
import myFontTtf from './assets/fonts/myFont.ttf';
import myFontSvg from './assets/fonts/myFont.svg';
const src = {
woff: myFontWoff,
ttf: myFontTtf,
svg: myFontSvg,
};
const GlobalStyles = css`
// Normal
${fontFaceMixin('myFontName', src)};
// Bold
${fontFaceMixin('myFontName', src, 400)};
// Italic
${fontFaceMixin('myFontName', src, 'normal', 'italic')};
body {
font-family: 'myFontName';
}
`;React components utils
Breakpoint hooks for React
If you don't want to render some component when in mobile use useBreakpoint (checking window's innerWidth) or useBreakpointHeight (checking window's innerHeight) hook.
import { useBreakpoint, breakpoints } from 'css-in-js-styles-utils';
const SomeComponent = (props) => {
// return true if window inner width is smaller or equle of provided breakpoint
const isMobile = useBreakpoint(breakpoints.phone);
return (
<React.Fragment>
<div>This I want to show alway.</div>
{
isMobile ? (
<div>But this ony on mobile.</div>
) : null
}
</React.Fragment>
);
};Licence
This project uses MIT Licence
Contributing
If you want to contribute read the contributing guidelines before opening an issue or pull request [WIP].
Style guide
This project uses Kamisama style guidelines: IF.Kamisama.