{"componentChunkName":"component---src-templates-post-jsx","path":"/blog/css-breakpoints-used-by-popular-css-frameworks/","result":{"data":{"mdx":{"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nconst _frontmatter = {\n  \"title\": \"CSS breakpoints used by popular CSS frameworks\",\n  \"cover\": \"/blogs/css-frameworks/user_interface__isometric.svg\",\n  \"date\": \"2020-07-15\",\n  \"updated\": \"2026-07-17\",\n  \"type\": [\"reference\"]\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n    components\n  } = _ref,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, `When using a CSS framework it often doesn't matter what devices people use. These frameworks come with their own set of\nCSS breakpoints with components that work well with those breakpoints.`), mdx(\"p\", null, `Instead of configuring Polypane to show devices, you can configure it to show the breakpoints supported by the frameworks.`), mdx(\"p\", null, `Polypane comes with `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/docs/workspaces/\"\n  }), `workspace presets`), ` for `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"#bootstrap-v5\"\n  }), `Bootstrap v5`), `, `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"#materialize\"\n  }), `Materialize`), `, `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"#bulma\"\n  }), `Bulma`), ` and `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"#tailwind-css\"\n  }), `Tailwind CSS`), `.\nAdding other ones is as easy as downloading and importing a workspace file.`), mdx(\"h2\", {\n    \"id\": \"breakpoints-for-each-css-framework\"\n  }, `Breakpoints for each CSS Framework`), mdx(\"p\", null, `If you're using Polypane, You can create panes from the exact breakpoints and get the complete overview in a single browser,\n`, mdx(\"strong\", {\n    parentName: \"p\"\n  }, `something that no other browser can do.`), ` Which breakpoints are used by each CSS framework? Find the lists below.`), mdx(\"div\", {\n    className: \"css-frameworks-blog\"\n  }, mdx(\"h3\", {\n    \"id\": \"bootstrap-v5\"\n  }, mdx(\"img\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"src\": \"/blogs/css-frameworks/bootstrap-v5.svg\",\n    \"alt\": null\n  })), ` Bootstrap v5`), mdx(WorkspacePreview, {\n    sizes: [{\n      name: '--',\n      width: 320,\n      hideWidth: true\n    }, {\n      name: 'sm',\n      width: 576\n    }, {\n      name: 'md',\n      width: 768\n    }, {\n      name: 'lg',\n      width: 992\n    }, {\n      name: 'xl',\n      width: 1200\n    }, {\n      name: 'xxl',\n      width: 1400\n    }],\n    mdxType: \"WorkspacePreview\"\n  }), mdx(\"div\", {\n    className: \"centered\"\n  }, mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Name`), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Description`), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `Minimum width`))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `--`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `X-Small`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), mdx(\"em\", {\n    parentName: \"td\"\n  }, `none`))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `sm`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Small`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `576px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `md`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Medium`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `768px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `lg`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Large`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `992px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `xl`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Extra large`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1200px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `xxl`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Extra extra large`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1400px`)))), mdx(\"p\", null, `Find more information in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://v5.getbootstrap.com/docs/5.0/layout/breakpoints/\"\n  }), `Bootstrap v5 documentation`))), mdx(\"h3\", {\n    \"id\": \"bulma\"\n  }, mdx(\"img\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"src\": \"/blogs/css-frameworks/bulma.svg\",\n    \"alt\": null\n  })), ` Bulma`), mdx(WorkspacePreview, {\n    sizes: [{\n      name: 'mobile',\n      width: 414,\n      hideWidth: true\n    }, {\n      name: 'tablet',\n      width: 769\n    }, {\n      name: 'desktop',\n      width: 1024\n    }, {\n      name: 'widescreen',\n      width: 1216\n    }, {\n      name: 'fullhd',\n      width: 1408\n    }],\n    mdxType: \"WorkspacePreview\"\n  }), mdx(\"div\", {\n    className: \"centered\"\n  }, mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Name`), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `Minimum width`))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `mobile`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), mdx(\"em\", {\n    parentName: \"td\"\n  }, `none`))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `tablet`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `769px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `desktop`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1024px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `widescreen`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1216px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `fullhd`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1408px`)))), mdx(\"p\", null, `Find more information in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://bulma.io/documentation/overview/responsiveness/#breakpoints\"\n  }), `Bulma documentation`))), mdx(\"h3\", {\n    \"id\": \"chakra-ui\"\n  }, mdx(\"img\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"src\": \"/blogs/css-frameworks/chakra.svg\",\n    \"alt\": \"Chakra UI\"\n  }))), mdx(WorkspacePreview, {\n    sizes: [{\n      name: 'below sm',\n      width: 375,\n      hideWidth: true\n    }, {\n      name: 'sm',\n      width: 480\n    }, {\n      name: 'md',\n      width: 768\n    }, {\n      name: 'lg',\n      width: 992\n    }, {\n      name: 'xl',\n      width: 1280\n    }, {\n      name: '2xl',\n      width: 1472\n    }],\n    name: \"Chakra UI\",\n    download: \"/workspace-downloads/ChakraUI.ppws\",\n    mdxType: \"WorkspacePreview\"\n  }), mdx(\"div\", {\n    className: \"centered\"\n  }, mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Name`), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `Minimum width`))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), mdx(\"em\", {\n    parentName: \"td\"\n  }, `below sm`)), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), mdx(\"em\", {\n    parentName: \"td\"\n  }, `none`))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `sm`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `30em`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `md`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `48em`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `lg`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `62em`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `xl`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `80em`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `2xl`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `96em`)))), mdx(\"p\", null, `Find more information in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://chakra-ui.com/docs/styled-system/features/responsive-styles\"\n  }), `Chakra UI documentation`))), mdx(\"h3\", {\n    \"id\": \"foundation\"\n  }, mdx(\"img\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"src\": \"/blogs/css-frameworks/foundation.svg\",\n    \"alt\": null\n  })), ` Foundation`), mdx(WorkspacePreview, {\n    sizes: [{\n      name: 'Small',\n      width: 414,\n      hideWidth: true\n    }, {\n      name: 'Medium',\n      width: 640\n    }, {\n      name: 'Large',\n      width: 1024\n    }, {\n      name: 'Xlarge',\n      width: 1200\n    }, {\n      name: 'Xxlarge',\n      width: 1440\n    }],\n    name: \"Foundation\",\n    download: \"/workspace-downloads/Foundation.ppws\",\n    mdxType: \"WorkspacePreview\"\n  }), mdx(\"div\", {\n    className: \"centered\"\n  }, mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Name`), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `Minimum width`))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Small`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), mdx(\"em\", {\n    parentName: \"td\"\n  }, `none`))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Medium`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `640px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Large`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1024px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Xlarge `, mdx(\"em\", {\n    parentName: \"td\"\n  }, `(optional)`)), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1200px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Xxlarge `, mdx(\"em\", {\n    parentName: \"td\"\n  }, `(optional)`)), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1440px`)))), mdx(\"p\", null, `Find more information in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://get.foundation/sites/docs/media-queries.html#default-media-queries\"\n  }), `Foundation documentation`))), mdx(\"h3\", {\n    \"id\": \"halfmoon\"\n  }, mdx(\"img\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"src\": \"/blogs/css-frameworks/halfmoon.svg\",\n    \"alt\": null\n  })), ` Halfmoon`), mdx(WorkspacePreview, {\n    sizes: [{\n      name: 'sm',\n      width: 540\n    }, {\n      name: 'md',\n      width: 720\n    }, {\n      name: 'lg',\n      width: 960\n    }, {\n      name: 'xl',\n      width: 1140\n    }],\n    name: \"Halfmoon\",\n    download: \"/workspace-downloads/Halfmoon.ppws\",\n    mdxType: \"WorkspacePreview\"\n  }), mdx(\"div\", {\n    className: \"centered\"\n  }, mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Name`), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `Minimum width`))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `sm`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `540px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `md`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `720px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `lg`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `960px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `xl`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1140px`)))), mdx(\"p\", null, `Find more information in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://www.gethalfmoon.com/docs/containers/\"\n  }), `Halfmoon documentation`))), mdx(\"h3\", {\n    \"id\": \"ionic\"\n  }, mdx(\"img\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"src\": \"/blogs/css-frameworks/ionic.svg\",\n    \"alt\": null\n  })), ` Ionic`), mdx(WorkspacePreview, {\n    sizes: [{\n      name: 'xs',\n      width: 424,\n      hideWidth: true\n    }, {\n      name: 'sm',\n      width: 576\n    }, {\n      name: 'md',\n      width: 768\n    }, {\n      name: 'lg',\n      width: 992\n    }, {\n      name: 'xl',\n      width: 1200\n    }],\n    name: \"Ionic\",\n    download: \"/workspace-downloads/Ionic.ppws\",\n    mdxType: \"WorkspacePreview\"\n  }), mdx(\"div\", {\n    className: \"centered\"\n  }, mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Name`), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `Minimum width`))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `xs`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), mdx(\"em\", {\n    parentName: \"td\"\n  }, `none`))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `sm`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `576px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `md`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `768px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `lg`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `992px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `xl`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1200px`)))), mdx(\"p\", null, `Find more information in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://ionicframework.com/docs/layout/css-utilities#ionic-breakpoints\"\n  }), `Ionic documentation`))), mdx(\"h3\", {\n    \"id\": \"mantine\"\n  }, mdx(\"img\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"src\": \"/blogs/css-frameworks/mantine.svg\",\n    \"alt\": null\n  })), ` Mantine`), mdx(WorkspacePreview, {\n    sizes: [{\n      name: 'xs',\n      width: 500\n    }, {\n      name: 'sm',\n      width: 800\n    }, {\n      name: 'md',\n      width: 1000\n    }, {\n      name: 'lg',\n      width: 1200\n    }, {\n      name: 'xl',\n      width: 1400\n    }],\n    download: \"/workspace-downloads/Mantine.ppws\",\n    name: \"Mantine\",\n    mdxType: \"WorkspacePreview\"\n  }), mdx(\"div\", {\n    className: \"centered\"\n  }, mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Name`), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `Minimum width`))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `xs`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `500px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `sm`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `800px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `md`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1000px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `lg`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1200px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `xl`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1400px`)))), mdx(\"p\", null, `Find more information in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://mantine.dev/styles/responsive/\"\n  }), `Mantine documentation`))), mdx(\"h3\", {\n    \"id\": \"material-ui\"\n  }, mdx(\"img\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"src\": \"/blogs/css-frameworks/materialui.svg\",\n    \"alt\": null\n  })), ` Material UI`), mdx(WorkspacePreview, {\n    sizes: [{\n      name: 'xs',\n      width: 320,\n      hideWidth: true\n    }, {\n      name: 'sm',\n      width: 600\n    }, {\n      name: 'md',\n      width: 960\n    }, {\n      name: 'lg',\n      width: 1280\n    }, {\n      name: 'xl',\n      width: 1920\n    }],\n    name: \"Material UI\",\n    mdxType: \"WorkspacePreview\"\n  }), mdx(\"div\", {\n    className: \"centered\"\n  }, mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Name`), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `Minimum width`))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `xs`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), mdx(\"em\", {\n    parentName: \"td\"\n  }, `none`))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `sm`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `600px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `md`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `960px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `lg`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1280px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `xl`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1920px`)))), mdx(\"p\", null, `Find more information in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://material-ui.com/customization/breakpoints/#default-breakpoints\"\n  }), `Material UI documentation`))), mdx(\"h3\", {\n    \"id\": \"materialize\"\n  }, mdx(\"img\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"src\": \"/blogs/css-frameworks/materialize.svg\",\n    \"alt\": null\n  })), ` Materialize`), mdx(WorkspacePreview, {\n    sizes: [{\n      name: 's',\n      width: 320,\n      hideWidth: true\n    }, {\n      name: 'm',\n      width: 600\n    }, {\n      name: 'l',\n      width: 992\n    }, {\n      name: 'xl',\n      width: 1200\n    }],\n    name: \"Materialize\",\n    download: \"/workspace-downloads/Materialize.ppws\",\n    mdxType: \"WorkspacePreview\"\n  }), mdx(\"div\", {\n    className: \"centered\"\n  }, mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Name`), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `Minimum width`))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `s`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), mdx(\"em\", {\n    parentName: \"td\"\n  }, `none`))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `m`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `600px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `l`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `992px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `xl`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1200px`)))), mdx(\"p\", null, `Find more information in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://materializecss.com/grid.html#grid-responsive\"\n  }), `Materialize documentation`))), mdx(\"h3\", {\n    \"id\": \"open-props\"\n  }, mdx(\"img\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"src\": \"/blogs/css-frameworks/openprops.svg\",\n    \"alt\": null\n  })), ` Open Props`), mdx(WorkspacePreview, {\n    sizes: [{\n      name: 'xxs',\n      width: 240,\n      hideWidth: true\n    }, {\n      name: 'xs',\n      width: 360\n    }, {\n      name: 'sm',\n      width: 480\n    }, {\n      name: 'md',\n      width: 768\n    }, {\n      name: 'lg',\n      width: 1024\n    }, {\n      name: 'xl',\n      width: 1400\n    }, {\n      name: 'xxl',\n      width: 1920\n    }],\n    name: \"Open Props\",\n    download: \"/workspace-downloads/Open-props.ppws\",\n    mdxType: \"WorkspacePreview\"\n  }), mdx(\"div\", {\n    className: \"centered\"\n  }, mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Name`), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `Minimum width`))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `xxs`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `240px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `xs`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `360px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `sm`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `480px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `md`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `768px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `lg`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1024px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `xl`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1400px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `xxl`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1920px`)))), mdx(\"p\", null, `Find more information in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://open-props.style/#media-queries\"\n  }), `Open Props documentation`))), mdx(\"h3\", {\n    \"id\": \"semantic-ui\"\n  }, mdx(\"img\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"src\": \"/blogs/css-frameworks/semantic.png\",\n    \"alt\": null\n  })), ` Semantic UI`), mdx(WorkspacePreview, {\n    sizes: [{\n      name: 'mobile',\n      width: 414,\n      hideWidth: true\n    }, {\n      name: 'tablet',\n      width: 768\n    }, {\n      name: 'small monitor',\n      width: 992\n    }, {\n      name: 'large monitor',\n      width: 1200\n    }],\n    name: \"Semantic UI\",\n    download: \"/workspace-downloads/SemanticUI.ppws\",\n    mdxType: \"WorkspacePreview\"\n  }), mdx(\"div\", {\n    className: \"centered\"\n  }, mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Name`), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `Minimum width`))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `mobile`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), mdx(\"em\", {\n    parentName: \"td\"\n  }, `none`))), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `tablet`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `768px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `small monitor`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `992px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `large monitor`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1200px`)))), mdx(\"p\", null, `Find more information in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://semantic-ui.com/elements/container.html\"\n  }), `Semantic UI documentation`))), mdx(\"h3\", {\n    \"id\": \"skeleton\"\n  }, mdx(\"img\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"src\": \"/blogs/css-frameworks/skeleton.png\",\n    \"alt\": null\n  })), ` Skeleton`), mdx(WorkspacePreview, {\n    sizes: [{\n      name: 'Mobile',\n      width: 440\n    }, {\n      name: 'Phablet',\n      width: 550\n    }, {\n      name: 'Tablet',\n      width: 750\n    }, {\n      name: 'Desktop',\n      width: 1000\n    }, {\n      name: 'Desktop HD',\n      width: 1200\n    }],\n    name: \"Skeleton\",\n    download: \"/workspace-downloads/Skeleton.ppws\",\n    mdxType: \"WorkspacePreview\"\n  }), mdx(\"div\", {\n    className: \"centered\"\n  }, mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Name`), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `Minimum width`))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Mobile`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `440px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Phablet`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `550px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Tablet`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `750px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Desktop`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1000px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Desktop HD`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1200px`)))), mdx(\"p\", null, `Find more information in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"http://getskeleton.com/#queries\"\n  }), `Skeleton documentation`))), mdx(\"h3\", {\n    \"id\": \"tailwind-css-30\"\n  }, mdx(\"img\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"src\": \"/blogs/css-frameworks/tailwind.svg\",\n    \"alt\": null\n  })), ` Tailwind CSS (3.0)`), mdx(WorkspacePreview, {\n    sizes: [{\n      name: 'sm',\n      width: 640\n    }, {\n      name: 'md',\n      width: 768\n    }, {\n      name: 'lg',\n      width: 1024\n    }, {\n      name: 'xl',\n      width: 1280\n    }, {\n      name: '2xl',\n      width: 1536\n    }],\n    name: \"Tailwind CSS\",\n    mdxType: \"WorkspacePreview\"\n  }), mdx(\"div\", {\n    className: \"centered\"\n  }, mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Name`), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `Minimum width`))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `sm`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `640px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `md`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `768px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `lg`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1024px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `xl`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1280px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `2xl`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1536px`)))), mdx(\"p\", null, `Find more information in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://tailwindcss.com/docs/breakpoints/\"\n  }), `Tailwind CSS documentation`))), mdx(\"h3\", {\n    \"id\": \"uikit\"\n  }, mdx(\"img\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"src\": \"/blogs/css-frameworks/uikit.svg\",\n    \"alt\": null\n  })), ` UIKit`), mdx(WorkspacePreview, {\n    sizes: [{\n      name: 's',\n      width: 640\n    }, {\n      name: 'm',\n      width: 960\n    }, {\n      name: 'l',\n      width: 1200\n    }, {\n      name: 'xl',\n      width: 1600\n    }],\n    name: \"UIKit\",\n    download: \"/workspace-downloads/UIKit.ppws\",\n    mdxType: \"WorkspacePreview\"\n  }), mdx(\"div\", {\n    className: \"centered\"\n  }, mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Name`), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `Minimum width`))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `s`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `640px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `m`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `960px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `l`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1200px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `xl`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1600px`)))), mdx(\"p\", null, `Find more information in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://getuikit.com/docs/visibility#responsive\"\n  }), `UIKit documentation`))), mdx(\"h3\", {\n    \"id\": \"webflow\"\n  }, mdx(\"img\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"src\": \"/blogs/css-frameworks/webflow.svg\",\n    \"alt\": null\n  })), ` Webflow`), mdx(WorkspacePreview, {\n    sizes: [{\n      name: 'Mobile portrait and below',\n      width: 478\n    }, {\n      name: 'Mobile landscape and below',\n      width: 767\n    }, {\n      name: 'Tablet and below',\n      width: 991\n    }, {\n      name: 'Desktop (base)',\n      width: 1024\n    }, {\n      name: '1280px and above',\n      width: 1280\n    }, {\n      name: '1280px and above',\n      width: 1440\n    }, {\n      name: '1280px and above',\n      width: 1920\n    }],\n    name: \"UIKit\",\n    download: \"/workspace-downloads/webflow.ppws\",\n    mdxType: \"WorkspacePreview\"\n  }), mdx(\"div\", {\n    className: \"centered\"\n  }, mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Name`), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `Minimum width`))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Mobile portrait and below`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `478px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Mobile landscape and below`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `767px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Tablet and below`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `991px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Desktop (base)`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1024px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `1280px and above`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1280px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `1280px and above`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1440px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `1280px and above`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1920px`)))), mdx(\"p\", null, `Find more information in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://university.webflow.com/lesson/intro-to-breakpoints\"\n  }), `Webflow documentation`))), mdx(\"h3\", {\n    \"id\": \"angular-material\"\n  }, mdx(\"img\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"src\": \"/blogs/css-frameworks/angularmaterial.svg\",\n    \"alt\": null\n  })), ` Angular Material`), mdx(WorkspacePreview, {\n    sizes: [{\n      name: 'XSmall',\n      width: 600\n    }, {\n      name: 'Small',\n      width: 960\n    }, {\n      name: 'Medium',\n      width: 1280\n    }, {\n      name: 'Large',\n      width: 1920\n    }, {\n      name: 'XLarge',\n      width: 2560\n    }],\n    name: \"Angular Material\",\n    download: \"/workspace-downloads/Angular-Material.ppws\",\n    mdxType: \"WorkspacePreview\"\n  }), mdx(\"div\", {\n    className: \"centered\"\n  }, mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Name`), mdx(\"th\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `Minimum width`))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `XSmall`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `600px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Small`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `960px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Medium`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1280px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `Large`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `1920px`)), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"left\"\n  }), `XLarge`), mdx(\"td\", _extends({\n    parentName: \"tr\"\n  }, {\n    \"align\": \"right\"\n  }), `2560px`)))), mdx(\"p\", null, `Find more information in the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://material.angular.dev/cdk/layout/overview#predefined-breakpoints\"\n  }), `Angular Material documentation`)))), mdx(\"h2\", {\n    \"id\": \"increasing-your-productivity-as-a-web-developer\"\n  }, `Increasing your productivity as a web developer`), mdx(\"p\", null, `Using a CSS framework is one of the\n`, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/blog/ways-to-increase-your-productivity-as-a-web-developer/\"\n  }), `8 ways to increase your productivity as a web developer`), `.\nCheck out the other 7 ways to improve your productivity!`), mdx(\"h2\", {\n    \"id\": \"ground-rules-for-responsive-design\"\n  }, `Ground rules for responsive design`), mdx(\"p\", null, `Though CSS frameworks help you with a lot of choices, building a solid responsive design still requires you to pay attention\nto other parts of your page and design. Read about the `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/blog/responsive-design-ground-rules/\"\n  }), `ground rules for responsive design`), ` to created solid responsive websites.`), mdx(\"h2\", {\n    \"id\": \"missing-a-css-framework\"\n  }, `Missing a CSS framework?`), mdx(\"p\", null, `Are we missing your favorite CSS framework? `, mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"/support/\"\n  }), `Reach out`), ` and we'll add it to the list!`));\n}\n;\nMDXContent.isMDXComponent = true;","timeToRead":1,"tableOfContents":{"items":[{"url":"#breakpoints-for-each-css-framework","title":"Breakpoints for each CSS Framework","items":[{"url":"#bootstrap-v5","title":" Bootstrap v5"},{"url":"#bulma","title":" Bulma"},{"url":"#chakra-ui","title":"Chakra UI"},{"url":"#foundation","title":" Foundation"},{"url":"#halfmoon","title":" Halfmoon"},{"url":"#ionic","title":" Ionic"},{"url":"#mantine","title":" Mantine"},{"url":"#material-ui","title":" Material UI"},{"url":"#materialize","title":" Materialize"},{"url":"#open-props","title":" Open Props"},{"url":"#semantic-ui","title":" Semantic UI"},{"url":"#skeleton","title":" Skeleton"},{"url":"#tailwind-css-30","title":" Tailwind CSS (3.0)"},{"url":"#uikit","title":" UIKit"},{"url":"#webflow","title":" Webflow"},{"url":"#angular-material","title":" Angular Material"}]},{"url":"#increasing-your-productivity-as-a-web-developer","title":"Increasing your productivity as a web developer"},{"url":"#ground-rules-for-responsive-design","title":"Ground rules for responsive design"},{"url":"#missing-a-css-framework","title":"Missing a CSS framework?"}]},"excerpt":"When using a CSS framework it often doesn't matter what devices people use. These frameworks come with their own set of\nCSS breakpoints with components that…","frontmatter":{"title":"CSS breakpoints used by popular CSS frameworks","cover":"/blogs/css-frameworks/user_interface__isometric.svg","date":"2020-07-15","updated":"2026-07-17"},"fields":{"slug":"/blog/css-breakpoints-used-by-popular-css-frameworks/","date":"2020-07-14T22:00:00.000Z","ogFileName":"css-breakpoints-used-by-popular-css-frameworks"}}},"pageContext":{"slug":"/blog/css-breakpoints-used-by-popular-css-frameworks/"}},"staticQueryHashes":["4164364741","425175329"]}