css-in-js-styles-utils v1.6.14
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 breakpointsbreakpointMinWidthMixin
- Responsive web design - min-width mixinbreakpointMaxWidthMixin
- 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
@TODO
Change 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.
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago