![\"Responsively](\"http://www.danijelgrabez.com/public-links/github/responsively/responsively-logo.gif\"){kind=logo}
\n\n# Responsively\nResponsively 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`).\n\nThis library plays nicely with libraries such 👩🎤 [Emotion](https://emotion.sh/) and 💅 [Styled Components](https://www.styled-components.com/) since the code output is string.\n\n## Table of contents\n\nSection Heading
\n\n ```\n\n #### Option 2: Call the function with desired property and its responsive values in style declaration\n```javascript\nimport React from 'react';\nimport { css } from '@emotion/core';\nimport Responsively from 'responsively';\n\nconst baseStyles = css`${Responsively.responsive('margin-top')([10, 20, 30, 40, 50])};`;\n\n// or, add responsively directly to the component\n\nSection Heading
\n\nIf a unitless value is passed, it will automatically be converted to `px`. CSS properties with unitless values are processed as is (e.g. `line-height: 1.5;` or `flex: 1;`).\n```javascript\nResponsively.responsive('margin-top')([10, 20, 30, '4em', '5rem']);\n```\nwill yield:\n```css\nmargin-top: 10px;\n@media screen and (min-width: 480px) {\n margin-top: 20px;\n}\n@media screen and (min-width: 768px) {\n margin-top: 30px;\n}\n@media screen and (min-width: 990px) {\n margin-top: 4em;\n}\n@media screen and (min-width: 1170px) {\n margin-top: 5rem;\n}\n```\n\n* Clean output
\nThe number of generated breakpoints depends on the number of passed property values.\n```javascript\nconst { responsive } = Responsively;\n\nresponsive('margin')([10]);\nresponsive('padding')([10, 20]);\n```\nwill yield:\n```css\nmargin: 10px;\npadding: 10px;\n@media screen and (min-width: 480px) {\n margin-top: 20px;\n}\n```\n\n* Shorthand values per breakpoint\n```javascript\nResponsively.responsive('margin')(['10px 20px']);\n```\nwill yield:\n```css\nmargin: 10px 20px;\n```\n\n* Correction for common typos\n```javascript\nconst { responsive } = Responsively;\n\nResponsively.responsive('margin')(['10 20']);\nResponsively.responsive('padding')(['10px']);\n```\nwill yield:\n```css\nmargin: 10px 20px;\npadding: 10px;\n```\n\n### Warning message\nIn case one passed more property values then there are breakpoint values, responsively provides the warning in the browser's console.\n```javascript\nResponsively.configureBreakpoints([480, 768, 990, 1170]);\n\nResponsively.responsive('padding')([10, 20, 30, 40, 50, 60]); // first argument is `default value`\n```\nwill compile the code, but the last value will be nested in undefined breakpoint:\n```css\n...\n\n@media screen and (max-width: undefined) {\n padding: 60px;\n}\n```\n\nConsole warning message:\n\n![responsively-warning](http://www.danijelgrabez.com/public-links/github/responsively/responsively-warning-message.png \"Image of responsively warning message\")\n\n### Skipping breakpoints\nIf particular breakpoint needs to be skipped, `undefined` value should be passed:\n```javascript\nResponsively.configureBreakpoints([480, 768, 990, 1170]);\nResponsively.responsive('padding')([undefined, 20, undefined, undefined, 60]);\n```\nwill yield:\n```css\n...\n\n@media screen and (max-width: 480px) {\n padding: 20px;\n}\n@media screen and (max-width: 1170px) {\n padding: 60px;\n}\n```\n\n## TODO\n- [ ] Merge exact shorthand values, e.g. `'10 10' → 10px`\n- [ ] Add shorthand properties, e.g. `m → margin`, or `p → padding`\n- [ ]
![\"Animated](\"http://www.danijelgrabez.com/public-links/github/responsively/shrug.gif\")
\n\n\n## Suggestions?\n[Shoot me an email](mailto:danijel.grabez@gmail.com), or [submit an issue](https://github.com/danijelgrabez/responsively/issues) 🚀\n","readmeFilename":"README.md"}