So I know this topic has probably been talked about more than enough, there is even a really awesome article about it on Dev.to but I wanted to get some feedback on a slightly new set of breakpoints.
I was hoping to make them even more generic and get some feedback and thoughts from the incredible developer community here on Dev.to.
I was going to call this new set of breakpoints "the spartan breakpoint system" because the media queries are approximately every 300 pixels.
I was planing on using it in a component library I am building for fun to teach myself some of the various custome element APIs and enhance my web accessibility skills.
Here's a table comparing a few different CSS Framework breakpoints:
| Size | Devices | Spartan Breakpoints | Bootstrap | Bulma | Tailwind | Foundation | Semantic UI |
|---|---|---|---|---|---|---|---|
| Extra Small (xs) | small phone | 0 - 300px | 0 - 575px | 0 - 768px | 0 - 639px | 0 - 640px | 320 - 767px |
| Small (sm) | phone | 301 - 600px | 576 - 767px | 769 - 1023px | 640 - 767px | 641 - 1,024px | 768 - 991px |
| Medium (md) | large phone/small tablet | 601 - 900px | 768 - 991px | 1024 - 1,215px | 768 - 1,023px | 1,025 - 1,440px | 992 - 1,199x |
| Large (lg) | tablet | 901 - 1,200px | 992 - 1,200px | 1,216 - 1,407px | 1,024- 1,279px | 1,441 - 1,920px | 1,200 - 1,919px |
| Extra Large (xl) | desktop/large tablet | 1,201 - 1,500px | > 1,200px | > 1,408px | > 1,280px | > 1,921px | > 1,920px |
Thanks in advance everyone for your feedback!
Top comments (1)
thanks man, i found this useful 🌹