{"id":1361,"date":"2020-08-14T14:19:40","date_gmt":"2020-08-14T14:19:40","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=1361"},"modified":"2020-08-14T14:19:40","modified_gmt":"2020-08-14T14:19:40","slug":"css-breakpoints-used-by-popular-css-frameworks","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=1361","title":{"rendered":"CSS breakpoints used by popular CSS frameworks"},"content":{"rendered":"\n<p>When using a CSS framework it often doesn&#8217;t matter what devices people use. These frameworks come with their own set of CSS breakpoints with components that work well with those breakpoints.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Instead of configuring Polypane to show devices, you can configure it to show the breakpoints supported by the frameworks.<\/p>\n\n\n\n<p>Polypane comes with&nbsp;<a href=\"https:\/\/polypane.app\/docs\/workspaces\/\">workspace presets<\/a>&nbsp;for&nbsp;<a href=\"https:\/\/polypane.app\/blog\/css-breakpoints-used-by-popular-css-frameworks\/?fbclid=IwAR2hMQ04pKd4jPiJ-WGNfK_WYn-x6C9YBjIq5vdOUATMV8Brr_8NdtIjI-U#bootstrap-v4\">Bootstrap v4<\/a>,&nbsp;<a href=\"https:\/\/polypane.app\/blog\/css-breakpoints-used-by-popular-css-frameworks\/?fbclid=IwAR2hMQ04pKd4jPiJ-WGNfK_WYn-x6C9YBjIq5vdOUATMV8Brr_8NdtIjI-U#materialize\">Materialize<\/a>,&nbsp;<a href=\"https:\/\/polypane.app\/blog\/css-breakpoints-used-by-popular-css-frameworks\/?fbclid=IwAR2hMQ04pKd4jPiJ-WGNfK_WYn-x6C9YBjIq5vdOUATMV8Brr_8NdtIjI-U#bulma\">Bulma<\/a>&nbsp;and&nbsp;<a href=\"https:\/\/polypane.app\/blog\/css-breakpoints-used-by-popular-css-frameworks\/?fbclid=IwAR2hMQ04pKd4jPiJ-WGNfK_WYn-x6C9YBjIq5vdOUATMV8Brr_8NdtIjI-U#tailwind-css\">Tailwind CSS<\/a>. Adding other ones is as easy as downloading and importing a workspace file.<\/p>\n\n\n\n<h2 id=\"breakpoints-for-each-css-framework\">Breakpoints for each CSS Framework<\/h2>\n\n\n\n<p>If you&#8217;re using Polypane, You can create panes from the exact breakpoints and get the complete overview in a single browser,&nbsp;<strong>something that no other browser can do.<\/strong>&nbsp;Which breakpoints are used by each CSS framework? Find the lists below.<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/polypane.app\/blog\/css-breakpoints-used-by-popular-css-frameworks\/?fbclid=IwAR2hMQ04pKd4jPiJ-WGNfK_WYn-x6C9YBjIq5vdOUATMV8Brr_8NdtIjI-U#bootstrap-v4\">Bootstrap v4<\/a><\/li><li><a href=\"https:\/\/polypane.app\/blog\/css-breakpoints-used-by-popular-css-frameworks\/?fbclid=IwAR2hMQ04pKd4jPiJ-WGNfK_WYn-x6C9YBjIq5vdOUATMV8Brr_8NdtIjI-U#bootstrap-v5\">Bootstrap v5<\/a><\/li><li><a href=\"https:\/\/polypane.app\/blog\/css-breakpoints-used-by-popular-css-frameworks\/?fbclid=IwAR2hMQ04pKd4jPiJ-WGNfK_WYn-x6C9YBjIq5vdOUATMV8Brr_8NdtIjI-U#bulma\">Bulma<\/a><\/li><li><a href=\"https:\/\/polypane.app\/blog\/css-breakpoints-used-by-popular-css-frameworks\/?fbclid=IwAR2hMQ04pKd4jPiJ-WGNfK_WYn-x6C9YBjIq5vdOUATMV8Brr_8NdtIjI-U#foundation\">Foundation<\/a><\/li><li><a href=\"https:\/\/polypane.app\/blog\/css-breakpoints-used-by-popular-css-frameworks\/?fbclid=IwAR2hMQ04pKd4jPiJ-WGNfK_WYn-x6C9YBjIq5vdOUATMV8Brr_8NdtIjI-U#ionic\">Ionic<\/a><\/li><li><a href=\"https:\/\/polypane.app\/blog\/css-breakpoints-used-by-popular-css-frameworks\/?fbclid=IwAR2hMQ04pKd4jPiJ-WGNfK_WYn-x6C9YBjIq5vdOUATMV8Brr_8NdtIjI-U#material-ui\">Material UI<\/a><\/li><li><a href=\"https:\/\/polypane.app\/blog\/css-breakpoints-used-by-popular-css-frameworks\/?fbclid=IwAR2hMQ04pKd4jPiJ-WGNfK_WYn-x6C9YBjIq5vdOUATMV8Brr_8NdtIjI-U#materialize\">Materialize<\/a><\/li><li><a href=\"https:\/\/polypane.app\/blog\/css-breakpoints-used-by-popular-css-frameworks\/?fbclid=IwAR2hMQ04pKd4jPiJ-WGNfK_WYn-x6C9YBjIq5vdOUATMV8Brr_8NdtIjI-U#semantic-ui\">Semantic UI<\/a><\/li><li><a href=\"https:\/\/polypane.app\/blog\/css-breakpoints-used-by-popular-css-frameworks\/?fbclid=IwAR2hMQ04pKd4jPiJ-WGNfK_WYn-x6C9YBjIq5vdOUATMV8Brr_8NdtIjI-U#skeleton\">Skeleton<\/a><\/li><li><a href=\"https:\/\/polypane.app\/blog\/css-breakpoints-used-by-popular-css-frameworks\/?fbclid=IwAR2hMQ04pKd4jPiJ-WGNfK_WYn-x6C9YBjIq5vdOUATMV8Brr_8NdtIjI-U#tailwind-css\">Tailwind CSS<\/a><\/li><li><a href=\"https:\/\/polypane.app\/blog\/css-breakpoints-used-by-popular-css-frameworks\/?fbclid=IwAR2hMQ04pKd4jPiJ-WGNfK_WYn-x6C9YBjIq5vdOUATMV8Brr_8NdtIjI-U#uikit\">UIKit<\/a><\/li><\/ul>\n\n\n\n<h3 id=\"bootstrap-v4\"><img src=\"https:\/\/polypane.app\/blogs\/css-frameworks\/bootstrap-v4.svg\">&nbsp;Bootstrap v4<\/h3>\n\n\n\n<ul><li>xs<\/li><li>sm<em>578px<\/em><\/li><li>md<em>768px<\/em><\/li><li>lg<em>992px<\/em><\/li><li>xl<em>1200px<\/em><\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Built into Polypane<\/p><\/blockquote>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Name<\/th><th>Description<\/th><th>Minimum width<\/th><\/tr><\/thead><tbody><tr><td>xs<\/td><td>Extra small devices (portrait phones)<\/td><td><em>none<\/em><\/td><\/tr><tr><td>sm<\/td><td>Small devices (landscape phones)<\/td><td>576px<\/td><\/tr><tr><td>md<\/td><td>Medium devices (tablet)<\/td><td>768px<\/td><\/tr><tr><td>lg<\/td><td>Large devices (desktops)<\/td><td>992px<\/td><\/tr><tr><td>xl<\/td><td>Extra large devices (large desktops)<\/td><td>1200px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Find more information in the&nbsp;<a href=\"https:\/\/getbootstrap.com\/docs\/4.5\/layout\/overview\/#responsive-breakpoints\">Bootstrap documentation<\/a><\/p>\n\n\n\n<h3 id=\"bootstrap-v5\"><img src=\"https:\/\/polypane.app\/blogs\/css-frameworks\/bootstrap-v5.svg\">&nbsp;Bootstrap v5<\/h3>\n\n\n\n<ul><li>&#8212;<\/li><li>sm<em>576px<\/em><\/li><li>md<em>768px<\/em><\/li><li>lg<em>992px<\/em><\/li><li>xl<em>1200px<\/em><\/li><li>xxl<em>1400px<\/em><\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><a href=\"https:\/\/polypane.app\/workspace-downloads\/Bootstrapv5.ppws\">Download workspace file for Bootstrap v5<\/a><\/p><\/blockquote>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Name<\/th><th>Description<\/th><th>Minimum width<\/th><\/tr><\/thead><tbody><tr><td>&#8212;<\/td><td>X-Small<\/td><td><em>none<\/em><\/td><\/tr><tr><td>sm<\/td><td>Small<\/td><td>576px<\/td><\/tr><tr><td>md<\/td><td>Medium<\/td><td>768px<\/td><\/tr><tr><td>lg<\/td><td>Large<\/td><td>992px<\/td><\/tr><tr><td>xl<\/td><td>Extra large<\/td><td>1200px<\/td><\/tr><tr><td>xxl<\/td><td>Extra extra large<\/td><td>1400px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Find more information in the&nbsp;<a href=\"https:\/\/v5.getbootstrap.com\/docs\/5.0\/layout\/breakpoints\/\">Bootstrap v5 documentation<\/a><\/p>\n\n\n\n<h3 id=\"bulma\"><img src=\"https:\/\/polypane.app\/blogs\/css-frameworks\/bulma.svg\">&nbsp;Bulma<\/h3>\n\n\n\n<ul><li>mobile<\/li><li>tablet<em>769px<\/em><\/li><li>desktop<em>1024px<\/em><\/li><li>widescreen<em>1216px<\/em><\/li><li>fullhd<em>1408px<\/em><\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Built into Polypane<\/p><\/blockquote>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Name<\/th><th>Minimum width<\/th><\/tr><\/thead><tbody><tr><td>mobile<\/td><td><em>none<\/em><\/td><\/tr><tr><td>tablet<\/td><td>769px<\/td><\/tr><tr><td>desktop<\/td><td>1024px<\/td><\/tr><tr><td>widescreen<\/td><td>1216px<\/td><\/tr><tr><td>fullhd<\/td><td>1408px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Find more information in the&nbsp;<a href=\"https:\/\/bulma.io\/documentation\/overview\/responsiveness\/#breakpoints\">Bulma documentation<\/a><\/p>\n\n\n\n<h3 id=\"foundation\"><img src=\"https:\/\/polypane.app\/blogs\/css-frameworks\/foundation.svg\">&nbsp;Foundation<\/h3>\n\n\n\n<ul><li>Small<\/li><li>Medium<em>640px<\/em><\/li><li>Large<em>1024px<\/em><\/li><li>Xlarge<em>1200px<\/em><\/li><li>Xxlarge<em>1440px<\/em><\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><a href=\"https:\/\/polypane.app\/workspace-downloads\/Foundation.ppws\">Download workspace file for Foundation<\/a><\/p><\/blockquote>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Name<\/th><th>Minimum width<\/th><\/tr><\/thead><tbody><tr><td>Small<\/td><td><em>none<\/em><\/td><\/tr><tr><td>Medium<\/td><td>640px<\/td><\/tr><tr><td>Large<\/td><td>1024px<\/td><\/tr><tr><td>Xlarge&nbsp;<em>(optional)<\/em><\/td><td>1200px<\/td><\/tr><tr><td>Xxlarge&nbsp;<em>(optional)<\/em><\/td><td>1440px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Find more information in the&nbsp;<a href=\"https:\/\/get.foundation\/sites\/docs\/media-queries.html#default-media-queries\">Foundation documentation<\/a><\/p>\n\n\n\n<h3 id=\"ionic\"><img src=\"https:\/\/polypane.app\/blogs\/css-frameworks\/ionic.svg\">&nbsp;Ionic<\/h3>\n\n\n\n<ul><li>xs<\/li><li>sm<em>576px<\/em><\/li><li>md<em>768px<\/em><\/li><li>lg<em>992px<\/em><\/li><li>xl<em>1200px<\/em><\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><a href=\"https:\/\/polypane.app\/workspace-downloads\/Ionic.ppws\">Download workspace file for Ionic<\/a><\/p><\/blockquote>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Name<\/th><th>Minimum width<\/th><\/tr><\/thead><tbody><tr><td>xs<\/td><td><em>none<\/em><\/td><\/tr><tr><td>sm<\/td><td>576px<\/td><\/tr><tr><td>md<\/td><td>768px<\/td><\/tr><tr><td>lg<\/td><td>992px<\/td><\/tr><tr><td>xl<\/td><td>1200px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Find more information in the&nbsp;<a href=\"https:\/\/ionicframework.com\/docs\/layout\/css-utilities#ionic-breakpoints\">Ionic documentation<\/a><\/p>\n\n\n\n<h3 id=\"material-ui\"><img src=\"https:\/\/polypane.app\/blogs\/css-frameworks\/materialui.svg\">&nbsp;Material UI<\/h3>\n\n\n\n<ul><li>xs<\/li><li>sm<em>600px<\/em><\/li><li>md<em>960px<\/em><\/li><li>lg<em>1280px<\/em><\/li><li>xl<em>1920px<\/em><\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Built into Polypane<\/p><\/blockquote>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Name<\/th><th>Minimum width<\/th><\/tr><\/thead><tbody><tr><td>xs<\/td><td><em>none<\/em><\/td><\/tr><tr><td>sm<\/td><td>600px<\/td><\/tr><tr><td>md<\/td><td>960px<\/td><\/tr><tr><td>lg<\/td><td>1280px<\/td><\/tr><tr><td>xl<\/td><td>1920px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Find more information in the&nbsp;<a href=\"https:\/\/material-ui.com\/customization\/breakpoints\/#default-breakpoints\">Material UI documentation<\/a><\/p>\n\n\n\n<h3 id=\"materialize\"><img src=\"https:\/\/polypane.app\/blogs\/css-frameworks\/materialize.svg\">&nbsp;Materialize<\/h3>\n\n\n\n<ul><li>s<\/li><li>m<em>600px<\/em><\/li><li>l<em>992px<\/em><\/li><li>xl<em>1200px<\/em><\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><a href=\"https:\/\/polypane.app\/workspace-downloads\/Materialize.ppws\">Download workspace file for Materialize<\/a><\/p><\/blockquote>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Name<\/th><th>Minimum width<\/th><\/tr><\/thead><tbody><tr><td>s<\/td><td><em>none<\/em><\/td><\/tr><tr><td>m<\/td><td>600px<\/td><\/tr><tr><td>l<\/td><td>992px<\/td><\/tr><tr><td>xl<\/td><td>1200px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Find more information in the&nbsp;<a href=\"https:\/\/materializecss.com\/grid.html#grid-responsive\">Materialize documentation<\/a><\/p>\n\n\n\n<h3 id=\"semantic-ui\"><img src=\"https:\/\/polypane.app\/blogs\/css-frameworks\/semantic.png\">&nbsp;Semantic UI<\/h3>\n\n\n\n<ul><li>mobile<\/li><li>tablet<em>768px<\/em><\/li><li>small monitor<em>992px<\/em><\/li><li>large monitor<em>1200px<\/em><\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><a href=\"https:\/\/polypane.app\/workspace-downloads\/SemanticUI.ppws\">Download workspace file for Semantic UI<\/a><\/p><\/blockquote>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Name<\/th><th>Minimum width<\/th><\/tr><\/thead><tbody><tr><td>mobile<\/td><td><em>none<\/em><\/td><\/tr><tr><td>tablet<\/td><td>768px<\/td><\/tr><tr><td>small monitor<\/td><td>992px<\/td><\/tr><tr><td>large monitor<\/td><td>1200px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Find more information in the&nbsp;<a href=\"https:\/\/semantic-ui.com\/elements\/container.html\">Semantic UI documentation<\/a><\/p>\n\n\n\n<h3 id=\"skeleton\"><img src=\"https:\/\/polypane.app\/blogs\/css-frameworks\/skeleton.png\">&nbsp;Skeleton<\/h3>\n\n\n\n<ul><li>Mobile<em>440px<\/em><\/li><li>Phablet<em>550px<\/em><\/li><li>Tablet<em>750px<\/em><\/li><li>Desktop<em>1000px<\/em><\/li><li>Desktop HD<em>1200px<\/em><\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><a href=\"https:\/\/polypane.app\/workspace-downloads\/Skeleton.ppws\">Download workspace file for Skeleton<\/a><\/p><\/blockquote>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Name<\/th><th>Minimum width<\/th><\/tr><\/thead><tbody><tr><td>Mobile<\/td><td>440px<\/td><\/tr><tr><td>Phablet<\/td><td>550px<\/td><\/tr><tr><td>Tablet<\/td><td>750px<\/td><\/tr><tr><td>Desktop<\/td><td>1000px<\/td><\/tr><tr><td>Desktop HD<\/td><td>1200px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Find more information in the&nbsp;<a href=\"http:\/\/getskeleton.com\/#queries\">Skeleton documentation<\/a><\/p>\n\n\n\n<h3 id=\"tailwind-css\"><img src=\"https:\/\/polypane.app\/blogs\/css-frameworks\/tailwind.svg\">&nbsp;Tailwind CSS<\/h3>\n\n\n\n<ul><li>sm<em>640px<\/em><\/li><li>md<em>768px<\/em><\/li><li>lg<em>1024px<\/em><\/li><li>xl<em>1280px<\/em><\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote\"><p>Built into Polypane<\/p><\/blockquote>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Name<\/th><th>Minimum width<\/th><\/tr><\/thead><tbody><tr><td>sm<\/td><td>640px<\/td><\/tr><tr><td>md<\/td><td>768px<\/td><\/tr><tr><td>lg<\/td><td>1024px<\/td><\/tr><tr><td>xl<\/td><td>1280px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Find more information in the&nbsp;<a href=\"https:\/\/tailwindcss.com\/docs\/breakpoints\/\">Tailwind CSS documentation<\/a><\/p>\n\n\n\n<h3 id=\"uikit\"><img src=\"https:\/\/polypane.app\/blogs\/css-frameworks\/uikit.svg\">&nbsp;UIKit<\/h3>\n\n\n\n<ul><li>s<em>640px<\/em><\/li><li>m<em>960px<\/em><\/li><li>l<em>1200px<\/em><\/li><li>xl<em>1600px<\/em><\/li><\/ul>\n\n\n\n<blockquote class=\"wp-block-quote\"><p><a href=\"https:\/\/polypane.app\/workspace-downloads\/UIKit.ppws\">Download workspace file for UIKit<\/a><\/p><\/blockquote>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Name<\/th><th>Minimum width<\/th><\/tr><\/thead><tbody><tr><td>s<\/td><td>640px<\/td><\/tr><tr><td>m<\/td><td>960px<\/td><\/tr><tr><td>l<\/td><td>1200px<\/td><\/tr><tr><td>xl<\/td><td>1600px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Find more information in the&nbsp;<a href=\"https:\/\/getuikit.com\/docs\/visibility#responsive\">UIKit documentation<\/a><\/p>\n\n\n\n<h3 id=\"increasing-your-productivity-as-a-web-developer\">Increasing your productivity as a web developer<\/h3>\n\n\n\n<p>Using a CSS framework is one of the&nbsp;<a href=\"https:\/\/polypane.app\/blog\/ways-to-increase-your-productivity-as-a-web-developer\/\">8 ways to increase your productivity as a web developer<\/a>. Check out the other 7 ways to improve your productivity!<\/p>\n\n\n\n<h3 id=\"ground-rules-for-responsive-design\">Ground rules for responsive design<\/h3>\n\n\n\n<p>Though CSS frameworks help you with a lot of choices, building a solid responsive design still requires you to pay attention to other parts of your page and design. Read about the&nbsp;<a href=\"https:\/\/polypane.app\/blog\/responsive-design-ground-rules\/\">ground rules for responsive design<\/a>&nbsp;to created solid responsive websites.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>When using a CSS framework it often doesn&#8217;t matter what devices people use. These frameworks come with their own set of CSS breakpoints with components that work well with those breakpoints.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[105],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1361"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1361"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1361\/revisions"}],"predecessor-version":[{"id":1362,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1361\/revisions\/1362"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}