Spartan Breakpoints!

#responsive #css #breakpoints #ux

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