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!