Responsively
Responsively is created with the intention to easily adjust components with a responsive, mobile-first approach in mind; it may resemble single purpose classes (e.g. .mt-0
, or .mt-0--mobile
).
This library plays nicely with libraries such 👩🎤 Emotion and 💅 Styled Components since the code output is string.
Table of contents
Usage
This library adjust the value
of the passed property according to passed breakpoints
. Breakpoints can be defined on a component/page basis, but it can also be defined across the whole app, depending on one's needs.
Simple flow
- Configure breakpoints
- Implement responsively in one of the following ways:
- Pass props to component with supported functions
- Call the function with desired property and its responsive values via styles, or
- Pass
property
andvalues
props to the component for single purpose usage
- Done 😇
1. Configure breakpoints
/** * Configure breakpoints in any file which is being called * on the top aplication level (e.g. App.js, utils.js, etc.) */; Responsively;
2. Implementation
Option 1: Pass props to component with supported functions
With this handy approach we can integrate responsively functions which would provide an option to pass multiple responsive props to component. Check the documentation for all available functions.
;;;; const SectionStyles = ...background ...text; /** * Section component */const Section = <SectionStyles ...props />; ;
then, define as many properties as you need:
; ... <Section background='#f9eeef' '#f5cbce' '#f2afb4' '#ef717c' '#f74b59' color='black' 'white' textTransform='uppercase'> <h1>Section Heading</h1></Section>
#### Option 2: Call the function with desired property and its responsive values in style declaration
;;; const baseStyles = css`;`; // or, add responsively directly to the component <Component className=css`;` />
property
and values
props to the component for single purpose usage
Option 3: Pass ;;;;; const baseStyles = css` ; `; const SectionStyles = baseStyles; /** * Section component */const Section = <SectionStyles property=property values=values ...props />; SectionpropTypes = property: PropTypesstringisRequired values: PropTypesarrayisRequired; ;
then, define its property and values as props:
; ... <Section property="margin" values=10 20 30 40 50> <h1>Section Heading</h1></Section>
## Try It Out Try the examples on CodeSandbox:
- Option 1: 👩🎤 Emotion
- Option 2: 👩🎤 Emotion | 💅 Styled Components
- Option 3: 👩🎤 Emotion | 💅 Styled Components
Install
npm i responsively -S
or,
yarn add responsively
API
ResponsivelypropertyNamepropertyArrayValues;
Arguments
breakpointsArray
— An array of breakpoint valuespropertyName
— CSS property namepropertyArrayValues
— An array of values which maps to provided breakpoints. By default, the first value is applied without a media query, while the rest of the values are applied as children of media query selectors.
breakpointsArray
and propertyArrayValues
values
- Support all unit kinds (px, em, rem, vw, vh, %, etc.).
If a unitless value is passed, it will automatically be converted topx
. CSS properties with unitless values are processed as is (e.g.line-height: 1.5;
orflex: 1;
).
Responsively10 20 30 '4em' '5rem';
will yield:
{{{{
- Clean output
The number of generated breakpoints depends on the number of passed property values.
const responsive = Responsively; 10;10 20;
will yield:
{
- Shorthand values per breakpoint
Responsively'10px 20px';
will yield:
- Correction for common typos
const responsive = Responsively; Responsively'10 20';Responsively'10px';
will yield:
Warning message
In case one passed more property values then there are breakpoint values, responsively provides the warning in the browser's console.
Responsively; Responsively10 20 30 40 50 60; // first argument is `default value`
will compile the code, but the last value will be nested in undefined breakpoint:
{
Console warning message:
Skipping breakpoints
If particular breakpoint needs to be skipped, undefined
value should be passed:
Responsively;Responsivelyundefined 20 undefined undefined 60;
will yield:
{{
TODO
- Merge exact shorthand values, e.g.
'10 10' → 10px
- Add shorthand properties, e.g.
m → margin
, orp → padding