When using a CSS framework it often doesn't matter what devices people use. These frameworks come with their own set of CSS breakpoints with components that work well with those breakpoints.
Instead of configuring Polypane to show devices, you can configure it to show the breakpoints supported by the frameworks.
Polypane comes with workspace presets for Bootstrap v5, Materialize, Bulma and Tailwind CSS. Adding other ones is as easy as downloading and importing a workspace file.
Breakpoints for each CSS Framework
If you're using Polypane, You can create panes from the exact breakpoints and get the complete overview in a single browser, something that no other browser can do. Which breakpoints are used by each CSS framework? Find the lists below.
Bootstrap v5
- --
- sm576px
- md768px
- lg992px
- xl1200px
- xxl1400px
Name | Description | Minimum width |
---|---|---|
-- | X-Small | none |
sm | Small | 576px |
md | Medium | 768px |
lg | Large | 992px |
xl | Extra large | 1200px |
xxl | Extra extra large | 1400px |
Find more information in the Bootstrap v5 documentation
Bulma
- mobile
- tablet769px
- desktop1024px
- widescreen1216px
- fullhd1408px
Name | Minimum width |
---|---|
mobile | none |
tablet | 769px |
desktop | 1024px |
widescreen | 1216px |
fullhd | 1408px |
Find more information in the Bulma documentation
- below sm
- sm480px
- md768px
- lg992px
- xl1280px
- 2xl1472px
Name | Minimum width |
---|---|
below sm | none |
sm | 30em |
md | 48em |
lg | 62em |
xl | 80em |
2xl | 96em |
Find more information in the Chakra UI documentation
Foundation
- Small
- Medium640px
- Large1024px
- Xlarge1200px
- Xxlarge1440px
Name | Minimum width |
---|---|
Small | none |
Medium | 640px |
Large | 1024px |
Xlarge (optional) | 1200px |
Xxlarge (optional) | 1440px |
Find more information in the Foundation documentation
Halfmoon
- sm540px
- md720px
- lg960px
- xl1140px
Name | Minimum width |
---|---|
sm | 540px |
md | 720px |
lg | 960px |
xl | 1140px |
Find more information in the Halfmoon documentation
Ionic
- xs
- sm576px
- md768px
- lg992px
- xl1200px
Name | Minimum width |
---|---|
xs | none |
sm | 576px |
md | 768px |
lg | 992px |
xl | 1200px |
Find more information in the Ionic documentation
Mantine
- xs500px
- sm800px
- md1000px
- lg1200px
- xl1400px
Name | Minimum width |
---|---|
xs | 500px |
sm | 800px |
md | 1000px |
lg | 1200px |
xl | 1400px |
Find more information in the Mantine documentation
Material UI
- xs
- sm600px
- md960px
- lg1280px
- xl1920px
Name | Minimum width |
---|---|
xs | none |
sm | 600px |
md | 960px |
lg | 1280px |
xl | 1920px |
Find more information in the Material UI documentation
Materialize
- s
- m600px
- l992px
- xl1200px
Name | Minimum width |
---|---|
s | none |
m | 600px |
l | 992px |
xl | 1200px |
Find more information in the Materialize documentation
Open Props
- xxs
- xs360px
- sm480px
- md768px
- lg1024px
- xl1400px
- xxl1920px
Name | Minimum width |
---|---|
xxs | 240px |
xs | 360px |
sm | 480px |
md | 768px |
lg | 1024px |
xl | 1400px |
xxl | 1920px |
Find more information in the Open Props documentation
Semantic UI
- mobile
- tablet768px
- small monitor992px
- large monitor1200px
Name | Minimum width |
---|---|
mobile | none |
tablet | 768px |
small monitor | 992px |
large monitor | 1200px |
Find more information in the Semantic UI documentation
Skeleton
- Mobile440px
- Phablet550px
- Tablet750px
- Desktop1000px
- Desktop HD1200px
Name | Minimum width |
---|---|
Mobile | 440px |
Phablet | 550px |
Tablet | 750px |
Desktop | 1000px |
Desktop HD | 1200px |
Find more information in the Skeleton documentation
Tailwind CSS (3.0)
- sm640px
- md768px
- lg1024px
- xl1280px
- 2xl1536px
Name | Minimum width |
---|---|
sm | 640px |
md | 768px |
lg | 1024px |
xl | 1280px |
2xl | 1536px |
Find more information in the Tailwind CSS documentation
UIKit
- s640px
- m960px
- l1200px
- xl1600px
Name | Minimum width |
---|---|
s | 640px |
m | 960px |
l | 1200px |
xl | 1600px |
Find more information in the UIKit documentation
Webflow
- Mobile portrait and below478px
- Mobile landscape and below767px
- Tablet and below991px
- Desktop (base)1024px
- 1280px and above1280px
- 1280px and above1440px
- 1280px and above1920px
Name | Minimum width |
---|---|
Mobile portrait and below | 478px |
Mobile landscape and below | 767px |
Tablet and below | 991px |
Desktop (base) | 1024px |
1280px and above | 1280px |
1280px and above | 1440px |
1280px and above | 1920px |
Find more information in the Webflow documentation
Increasing your productivity as a web developer
Using a CSS framework is one of the 8 ways to increase your productivity as a web developer. Check out the other 7 ways to improve your productivity!
Ground rules for responsive design
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 ground rules for responsive design to created solid responsive websites.
Missing a CSS framework?
Are we missing your favorite CSS framework? Reach out and we'll add it to the list!