{"id":13394051,"url":"https://github.com/mg901/styled-breakpoints","last_synced_at":"2025-05-14T11:08:56.814Z","repository":{"id":32128900,"uuid":"131664710","full_name":"mg901/styled-breakpoints","owner":"mg901","description":"Simple and powerful breakpoints for styled components and emotion.","archived":false,"fork":false,"pushed_at":"2025-05-11T13:12:24.000Z","size":11282,"stargazers_count":555,"open_issues_count":1,"forks_count":23,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-11T13:18:52.601Z","etag":null,"topics":["breakpoint","breakpoints","css-in-js","css-in-react","emotion","media","media-queries","media-query","preact","react","responsive-design","responsive-layout","styled-components","styled-media-query","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/styled-breakpoints","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mg901.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-05-01T01:32:31.000Z","updated_at":"2025-05-11T13:11:06.000Z","dependencies_parsed_at":"2023-11-20T08:30:34.891Z","dependency_job_id":"19c53c80-3c42-4698-9c0f-19d51324645a","html_url":"https://github.com/mg901/styled-breakpoints","commit_stats":{"total_commits":2169,"total_committers":21,"mean_commits":"103.28571428571429","dds":0.6104195481788843,"last_synced_commit":"ef82fcc04d114f4766f5d5afae15f4b8e3bb988e"},"previous_names":[],"tags_count":125,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mg901%2Fstyled-breakpoints","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mg901%2Fstyled-breakpoints/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mg901%2Fstyled-breakpoints/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mg901%2Fstyled-breakpoints/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mg901","download_url":"https://codeload.github.com/mg901/styled-breakpoints/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254129484,"owners_count":22019628,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["breakpoint","breakpoints","css-in-js","css-in-react","emotion","media","media-queries","media-query","preact","react","responsive-design","responsive-layout","styled-components","styled-media-query","typescript"],"created_at":"2024-07-30T17:01:07.240Z","updated_at":"2025-05-14T11:08:56.776Z","avatar_url":"https://github.com/mg901.png","language":"JavaScript","readme":"\u003cdiv align=\"center\"\u003e\n\u003ch1\u003e\n\n\u003cbr\u003e\nstyled-breakpoints \u003cbr\u003e\n\n\u003ca href=\"https://github.com/mg901/styled-breakpoints/actions?query=workflow%3Arelease\"\u003e\n\u003cimg alt=\"GitHub Workflow Status\" src=\"https://img.shields.io/github/actions/workflow/status/mg901/styled-breakpoints/ci-release.yml?branch=master\u0026style=flat-square\"\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://coveralls.io/github/mg901/styled-breakpoints?branch=master\"\u003e\n\u003cimg alt=\"coverage status\" src=\"https://img.shields.io/coverallsCoverage/github/mg901/styled-breakpoints?style=flat-square\"\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://bundlephobia.com/package/styled-breakpoints\"\u003e\n\u003cimg alt=\"npm bundle size\" src=\"https://img.shields.io/bundlephobia/minzip/styled-breakpoints?style=flat-square\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://img.shields.io/npm/dm/styled-breakpoints?style=flat-square\"\u003e\n\u003cimg alt=\"npm downloads\" src=\"https://img.shields.io/npm/dm/styled-breakpoints?style=flat-square\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.npmjs.com/package/styled-breakpoints\"\u003e\n\u003cimg alt=\"npm version\" src=\"https://img.shields.io/npm/v/styled-breakpoints.svg?style=flat-square\"\u003e\n\u003c/a\u003e\n\n\u003c/h1\u003e\n\n\u003cp\u003eSimple and powerful tool for creating media queries with SSR support.\u003c/p\u003e\n\n\u003cp\u003e\n\u003ca href=\"https://www.styled-components.com\" rel=\"nofollow\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/styled-components/brand/master/styled-components.png\" alt=\"Styled Components Logo\" width=\"80\"\u003e\n  \u003c/a\u003e\n  \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003cstrong\u003eOR\u003c/strong\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\n\u003ca href=\"https://emotion.sh/docs/introduction\" rel=\"nofollow\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/emotion-js/emotion/main/emotion.png\" alt=\"Emotion logo\" width=\"80\"\u003e\u003c/a\u003e\n\n\u003cp\u003e\n\n\u003c/div\u003e\n\u003cbr \u003e\n\u003cbr \u003e\n\n## 🌼 Preview\n\n**Inside** components.\n\n```tsx\nconst Box = styled.div`\n  background-color: pink;\n\n  ${({ theme }) =\u003e theme.breakpoints.up('sm')} {\n    background-color: hotpink;\n  }\n\n  ${({ theme }) =\u003e theme.breakpoints.up('md')} {\n    background-color: red;\n  }\n`;\n```\n\n\u003cbr\u003e\n\n**Outside** components.\n\n```tsx\nimport { useTheme } from 'styled-components'; // or '@emotion/react'\n\nconst Layout = () =\u003e {\n  const { up } = useTheme().breakpoints;\n  const isMd = useMediaQuery(up('md'));\n\n  return \u003c\u003e{isMd \u0026\u0026 \u003cBox /\u003e}\u003c/\u003e;\n};\n```\n\n\u003cbr\u003e\n\n## Examples\n\n### 👉🏻 Mobile First\n\nFrom smallest to largest\n\n\u003cdiv\u003e\n  \u003ca href=\"https://codesandbox.io/s/rough-wave-u0uuu?fontsize=14\u0026hidenavigation=1\u0026module=%2Fsrc%2Fapp.tsx\u0026theme=dark\"\u003e\n  \u003cimg alt=\"Edit mobile-first\" src=\"https://codesandbox.io/static/img/play-codesandbox.svg\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n### 👉🏻 Desktop First\n\nFrom largest to smallest\n\n\u003cdiv\u003e\n  \u003ca href=\"https://codesandbox.io/s/desktop-first-example-0plsg?fontsize=14\u0026hidenavigation=1\u0026module=%2Fsrc%2Fapp.tsx\u0026theme=dark\"\u003e\n    \u003cimg alt=\"Edit desktop first example\" src=\"https://codesandbox.io/static/img/play-codesandbox.svg\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n### 👉🏻 Hooks API\n\n\u003cdiv\u003e\n  \u003ca href=\"https://codesandbox.io/s/styled-components-hooks-api-6q6w8?fontsize=14\u0026hidenavigation=1\u0026module=%2Fsrc%2Fapp.tsx\u0026theme=dark\"\u003e\n    \u003cimg alt=\"Hooks api (styled-components)\" src=\"https://codesandbox.io/static/img/play-codesandbox.svg\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003cbr\u003e\n\n## 📖 Documentation\n\n- [core concepts](#core-concepts)\n- 🚩 [getting started](#getting-started)\n- [Media Queries API](#media-queries-api)\n\n  - [min-width - up](#min-width---up)\n  - [max-width - down](#max-width---down)\n  - [single breakpoint - only](#single-breakpoint---only)\n  - [breakpoints range - between](#breakpoints-range---between)\n  - [customization](#customization)\n\n- [useMediaQuery hook](#usemediaquery-hook)\n\n\u003cbr\u003e\n\n## 🧐 Core concepts\n\n- **Breakpoints act as the fundamental elements of responsive design**. They enable you to control when your layout can adapt to a specific viewport or device size.\n\n- **Utilize media queries to structure your CSS based on breakpoints**. Media queries are CSS features that allow you to selectively apply styles depending on a defined set of browser and operating system parameters. The most commonly used media query property is \u003ccode\u003emin-width\u003c/code\u003e.\n\n- **The objective is mobile-first, responsive design**. Styled Breakpoints aims to apply the essential styles required for a layout to function at the smallest breakpoint. Additional styles are then added to adjust the design for larger devices. This approach optimizes your CSS, enhances rendering speed, and delivers an excellent user experience.\n\n\u003cbr\u003e\n\n## Getting Started\n\n### 🚩 Installation\n\n```sh\nnpm install styled-breakpoints@latest\n\n# or\n\nyarn add styled-breakpoints@latest\n```\n\n\u003cbr \u003e\n\n### Configuration\n\n#### 🚩 File Structure\n\n```js\n theme/\n ├── index.ts\n └── styled.d.ts // or emotion.d.ts\n app.tsx\n```\n\n\u003cbr\u003e\n\n#### 🚩 Available breakpoints\n\nStyled Breakpoints includes six default breakpoints, often referred to as grid tiers, for building responsive designs. These breakpoints can be [customized](#customization).\n\n```tsx\nconst breakpoints = {\n  xs: '0px',\n  sm: '576px',\n  md: '768px',\n  lg: '992px',\n  xl: '1200px',\n  xxl: '1400px',\n};\n```\n\nEach breakpoint has been carefully selected to accommodate containers with widths that are multiples of 12. The breakpoints also represent a subset of common device sizes and viewport dimensions, although they do not specifically target every use case or device. Instead, they provide a robust and consistent foundation for building designs that cater to nearly any device.\n\n\u003cbr\u003e\n\n#### 🚩 Default Configuration\n\n`theme/index.ts`\n\n```tsx\nimport { createStyledBreakpointsTheme } from 'styled-breakpoints';\n\nexport const theme = createStyledBreakpointsTheme();\n```\n\n\u003chr/\u003e\n\u003cbr\u003e\n\n#### Customization\n\n##### 🚩 Breakpoints\n\n`theme/index.ts`\n\n```tsx\nimport { createStyledBreakpointsTheme } from 'styled-breakpoints';\n\nexport const theme = createStyledBreakpointsTheme({\n  breakpoints: {\n    small: '100px',\n    medium: '200px',\n    large: '300px',\n    xLarge: '400px',\n    xxLarge: '500px',\n  },\n});\n```\n\n\u003cbr\u003e\n\n##### 🎨 Merge with Another Theme\n\n`theme/index.ts`\n\n```tsx\nimport { createStyledBreakpointsTheme } from 'styled-breakpoints';\n\nexport const primaryTheme = {\n  fonts: ['sans-serif', 'Roboto'],\n  fontSizes: {\n    small: '1em',\n    medium: '2em',\n    large: '3em',\n  },\n} as const;\n\nexport const theme = {\n  ...primaryTheme,\n  ...createStyledBreakpointsTheme(),\n};\n```\n\n\u003chr\u003e\n\u003cbr\u003e\n\n\u003ch4\u003e💅 Using with Styled Components\u003c/h4\u003e\n\n##### 🚩 Installation\n\n```sh\nnpm install styled-components\n\n# or\n\nyarn add styled-components\n```\n\n\u003cbr\u003e\n\n`theme/styled.d.ts`\n\n```ts\nimport 'styled-components';\nimport { theme } from './index';\n\ntype ThemeConfig = typeof theme;\n\ndeclare module 'styled-components' {\n  export interface DefaultTheme extends ThemeConfig {}\n}\n```\n\n\u003c/details\u003e\n\n\u003chr\u003e\n\u003cbr\u003e\n\n\u003ch4\u003e\n\u003cg-emoji class=\"g-emoji\" alias=\"woman_singer\" fallback-src=\"https://github.githubassets.com/images/icons/emoji/unicode/1f469-1f3a4.png\"\u003e👩\u0026zwj;🎤\u003c/g-emoji\u003e\nUsing with Emotion\u003c/h4\u003e\n\n##### 🚩 Installation\n\n```sh\nnpm install @emotion/{styled,react}\n\n# or\n\nyarn add @emotion/{styled,react}\n```\n\n\u003cbr \u003e\n\n`theme/emotion.d.ts`\n\n```ts\nimport '@emotion/react';\nimport { theme } from './index';\n\ntype ThemeConfig = typeof theme;\n\ndeclare module '@emotion/react' {\n  export interface Theme extends ThemeConfig {}\n}\n```\n\n\u003chr/\u003e\n\u003cbr\u003e\n\n### 🚀 Integration to Your App\n\n\u003cbr\u003e\n\n`app.tsx`\n\n```tsx\nimport styled { ThemeProvider } from 'styled-components'; // or '@emotion/react'\nimport { theme } from './theme';\n\nconst Box = styled.div`\n  display: none;\n\n  ${({ theme }) =\u003e theme.breakpoints.up('sm')} {\n    display: block;\n  }\n`;\n\nconst App = () =\u003e (\n  \u003cThemeProvider theme={theme}\u003e\n    \u003cBox /\u003e\n  \u003c/ThemeProvider\u003e\n);\n```\n\n\u003cbr\u003e\n\n## Media queries API\n\n🚀 Caching is implemented in all functions to optimize performance.\n\n\u003cbr\u003e\n\n### 👉🏻 Min-width - `up`\n\n```tsx\nconst Box = styled.div`\n  display: none;\n\n  ${({ theme }) =\u003e theme.breakpoints.up('sm')} {\n    display: block;\n  }\n`;\n```\n\n\u003cbr\u003e\n\u003cstrong\u003eWill convert to vanilla css:  \u003c/strong\u003e\n\n```css\n@media (min-width: 768px) {\n  display: block;\n}\n```\n\n\u003chr/\u003e\n\u003cbr\u003e\n\n### 👉🏻 Max-width - `down`\n\nWe occasionally use media queries that go in the other direction (the given screen size or smaller):\n\n\u003cbr\u003e\n\n```tsx\nconst Box = styled.div`\n  display: block;\n\n  ${({ theme }) =\u003e theme.breakpoints.down('md')} {\n    display: none;\n  }\n`;\n```\n\n\u003cbr\u003e\n\u003cstrong\u003eWill convert to vanilla css: \u003c/strong\u003e\n\n```css\n@media (max-width: 767.98px) {\n  display: none;\n}\n```\n\n\u003cbr\u003e\n\n\u003e \u003cstrong\u003eWhy subtract .02px?\u003c/strong\u003e Browsers don’t currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), so we work around the limitations of [min- and max- prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.\n\n\u003chr/\u003e\n\u003cbr\u003e\n\n### 👉🏻 Single breakpoint - `only`\n\nThere are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.\n\n\u003cbr\u003e\n\n```tsx\nconst Box = styled.div`\n  background-color: pink;\n\n  ${({ theme }) =\u003e theme.breakpoints.only('md')} {\n    background-color: rebeccapurple;\n  }\n`;\n```\n\n\u003cbr\u003e\n\u003cstrong\u003eWill convert to vanilla css: \u003c/strong\u003e\n\n```css\n@media (min-width: 768px) and (max-width: 991.98px) {\n  background-color: rebeccapurple;\n}\n```\n\n\u003chr/\u003e\n\u003cbr\u003e\n\n### 👉🏻 Breakpoints range - `between`\n\nSimilarly, media queries may span multiple breakpoint widths.\n\n\u003cbr\u003e\n\n```tsx\nconst Box = styled.div`\n  background-color: gold;\n\n  ${({ theme }) =\u003e theme.breakpoints.between('md', 'xl')} {\n    background-color: rebeccapurple;\n  }\n`;\n```\n\n\u003cbr\u003e\n\u003cstrong\u003eWill convert to vanilla css: \u003c/strong\u003e\n\n```css\n@media (min-width: 768px) and (max-width: 1199.98px) {\n  background-color: rebeccapurple;\n}\n```\n\n\u003chr/\u003e\n\u003cbr\u003e\n\n## 👉🏻 `useMediaQuery` hook\n\nfeatures:\n\n- 🧐 optimal performance by dynamically monitoring document changes in media queries.\n- 💪🏻 It supports SSR (server-side rendering).\n- 📦 Minified and gzipped size 284b.\n\n\u003cbr\u003e\n\n\u003cdetails\u003e\u003csummary\u003e\u003cstrong\u003eType declaration\u003c/strong\u003e\u003c/summary\u003e\n\n```ts\n declare function useMediaQuery(query: string) =\u003e boolean\n```\n\n\u003c/details\u003e\n\n```tsx\nimport { useTheme } from 'styled-components'; // or from '@emotion/react'\nimport { useMediaQuery } from 'styled-breakpoints/use-media-query';\nimport { Box } from 'third-party-library';\n\nconst SomeComponent = () =\u003e {\n  const { only } = useTheme().breakpoints;\n  const isMd = useMediaQuery(only('md'));\n\n  return \u003cAnotherComponent\u003e{isMd \u0026\u0026 \u003cBox /\u003e}\u003c/AnotherComponent\u003e;\n};\n```\n\n\u003chr/\u003e\n\u003cbr\u003e\n\n## License\n\nMIT License\n\nCopyright (c) 2018-2024 [Maxim Alyoshin](https://github.com/mg901).\n\nThis project is licensed under the MIT License - see the [LICENSE](https://github.com/mg901/styled-breakpoints/blob/master/LICENCE) file for details.\n\n\u003chr\u003e\n\u003cbr\u003e\n\n## Contributors\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/mg901\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/7874664?v=4?s=100\" width=\"100px;\" alt=\"mg901\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003emg901\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#question-mg901\" title=\"Answering Questions\"\u003e💬\u003c/a\u003e \u003ca href=\"https://github.com/mg901/styled-breakpoints/commits?author=mg901\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#design-mg901\" title=\"Design\"\u003e🎨\u003c/a\u003e \u003ca href=\"https://github.com/mg901/styled-breakpoints/commits?author=mg901\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#example-mg901\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"#infra-mg901\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"#maintenance-mg901\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"#projectManagement-mg901\" title=\"Project Management\"\u003e📆\u003c/a\u003e \u003ca href=\"#promotion-mg901\" title=\"Promotion\"\u003e📣\u003c/a\u003e \u003ca href=\"#research-mg901\" title=\"Research\"\u003e🔬\u003c/a\u003e \u003ca href=\"https://github.com/mg901/styled-breakpoints/pulls?q=is%3Apr+reviewed-by%3Amg901\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e \u003ca href=\"https://github.com/mg901/styled-breakpoints/commits?author=mg901\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"#tool-mg901\" title=\"Tools\"\u003e🔧\u003c/a\u003e \u003ca href=\"#tutorial-mg901\" title=\"Tutorials\"\u003e✅\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"http://t.me/stuneak\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/22033385?v=4?s=100\" width=\"100px;\" alt=\"Abu Shamsutdinov\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAbu Shamsutdinov\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/mg901/styled-breakpoints/issues?q=author%3Astuneak\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/mg901/styled-breakpoints/commits?author=stuneak\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#example-stuneak\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"#ideas-stuneak\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/mg901/styled-breakpoints/pulls?q=is%3Apr+reviewed-by%3Astuneak\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e \u003ca href=\"#talk-stuneak\" title=\"Talks\"\u003e📢\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://sergeysova.com/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/5620073?v=4?s=100\" width=\"100px;\" alt=\"Sova\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSova\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/mg901/styled-breakpoints/commits?author=sergeysova\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#example-sergeysova\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"#ideas-sergeysova\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/mg901/styled-breakpoints/pulls?q=is%3Apr+reviewed-by%3Asergeysova\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e \u003ca href=\"#talk-sergeysova\" title=\"Talks\"\u003e📢\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://jussikinnula.com/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/7287118?v=4?s=100\" width=\"100px;\" alt=\"Jussi Kinnula\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJussi Kinnula\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/mg901/styled-breakpoints/issues?q=author%3Ajussikinnula\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/mg901/styled-breakpoints/commits?author=jussikinnula\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/rafauke\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/9576167?v=4?s=100\" width=\"100px;\" alt=\"Rafał Wyszomirski\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRafał Wyszomirski\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/mg901/styled-breakpoints/commits?author=rafauke\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://afflite.com/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/35396312?v=4?s=100\" width=\"100px;\" alt=\"Adrian Celczyński\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAdrian Celczyński\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/mg901/styled-breakpoints/issues?q=author%3AGR34SE\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/mg901/styled-breakpoints/commits?author=GR34SE\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/samholmes\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/517469?v=4?s=100\" width=\"100px;\" alt=\"Sam Holmes\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSam Holmes\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/mg901/styled-breakpoints/commits?author=samholmes\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#ideas-samholmes\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/Ontopic\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1599991?v=4?s=100\" width=\"100px;\" alt=\"Ontopic\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eOntopic\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-Ontopic\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/iRyanBell\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/25379378?v=4?s=100\" width=\"100px;\" alt=\"Ryan Bell\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eRyan Bell\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-iRyanBell\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://bartnagel.ca/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/199635?v=4?s=100\" width=\"100px;\" alt=\"Bart Nagel\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBart Nagel\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/mg901/styled-breakpoints/issues?q=author%3Atremby\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/mg901/styled-breakpoints/commits?author=tremby\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#example-tremby\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"#ideas-tremby\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://mckelveygreg.github.io/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/16110122?v=4?s=100\" width=\"100px;\" alt=\"Greg McKelvey\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eGreg McKelvey\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/mg901/styled-breakpoints/commits?author=mckelveygreg\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/bdefore\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/142472?v=4?s=100\" width=\"100px;\" alt=\"Buck DeFore\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBuck DeFore\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-bdefore\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://www.pierreburel.com/\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/37228?v=4?s=100\" width=\"100px;\" alt=\"Pierre Burel\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePierre Burel\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/mg901/styled-breakpoints/issues?q=author%3Apierreburel\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/flagoon\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/20648154?v=4?s=100\" width=\"100px;\" alt=\"Pawel Kochanek\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ePawel Kochanek\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/mg901/styled-breakpoints/issues?q=author%3Aflagoon\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/mg901/styled-breakpoints/commits?author=flagoon\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/iandjx\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/3683356?v=4?s=100\" width=\"100px;\" alt=\"Ian Christopher B. de Jesus\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eIan Christopher B. de Jesus\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/mg901/styled-breakpoints/issues?q=author%3Aiandjx\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/daviddelusenet\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1398418?v=4?s=100\" width=\"100px;\" alt=\"David de Lusenet\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDavid de Lusenet\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/mg901/styled-breakpoints/issues?q=author%3Adaviddelusenet\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#ideas-daviddelusenet\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/AdlerJS\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/82471930?v=4?s=100\" width=\"100px;\" alt=\"Dan Adler\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDan Adler\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/mg901/styled-breakpoints/issues?q=author%3AAdlerJS\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmg901%2Fstyled-breakpoints","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmg901%2Fstyled-breakpoints","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmg901%2Fstyled-breakpoints/lists"}