DEV Community

Samuel R. Sheldon
Samuel R. Sheldon

Posted on

Spartan Breakpoints!

res

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)

Collapse
 
khalil profile image
khalil Chermiti

thanks man, i found this useful 🌹