The latest articles on DEV Community by Samuel R. Sheldon (@srsheldon). https://dev.to/srsheldon https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F85210%2F0eac45ea-27fd-4425-8559-bcfa6b654c68.jpeg https://dev.to/srsheldon en Samuel R. Sheldon Fri, 08 Nov 2019 22:57:39 +0000 https://dev.to/srsheldon/spartan-breakpoints-59a1 https://dev.to/srsheldon/spartan-breakpoints-59a1 <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--v5FbMdMa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/kgzm8zqnlfi3k1gy5dri.jpg" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--v5FbMdMa--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/kgzm8zqnlfi3k1gy5dri.jpg" alt="res"></a></p> <p>So I know this topic has probably been talked about more than enough, there is even a <a href="https://dev.to/rstacruz/what-media-query-breakpoints-should-i-use-292c">really awesome article about it</a> on Dev.to but I wanted to get some feedback on a slightly new set of breakpoints. </p> <p>I was hoping to make them even more generic and get some feedback and thoughts from the incredible developer community here on Dev.to.</p> <p>I was going to call this new set of breakpoints "the spartan breakpoint system" because the media queries are approximately every 300 pixels.</p> <p>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.</p> <p>Here's a table comparing a few different CSS Framework breakpoints: </p> <div class="table-wrapper-paragraph"><table> <thead> <tr> <th>Size</th> <th>Devices</th> <th>Spartan Breakpoints</th> <th><a href="https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints">Bootstrap</a></th> <th><a href="https://bulma.io/documentation/overview/responsiveness/#breakpoints">Bulma</a></th> <th><a href="https://tailwindcss.com/docs/breakpoints/">Tailwind</a></th> <th><a href="https://foundation.zurb.com/sites/docs/v/5.5.3/media-queries.html">Foundation</a></th> <th><a href="https://github.com/Semantic-Org/Semantic-UI/blob/383871090cda527df916e1751279b3de79b07480/src/themes/default/globals/site.variables#L208-L216">Semantic UI</a></th> </tr> </thead> <tbody> <tr> <td>Extra Small (xs)</td> <td>small phone</td> <td>0 - 300px</td> <td>0 - 575px</td> <td>0 - 768px</td> <td>0 - 639px</td> <td>0 - 640px</td> <td>320 - 767px</td> </tr> <tr> <td>Small (sm)</td> <td>phone</td> <td>301 - 600px</td> <td>576 - 767px</td> <td>769 - 1023px</td> <td>640 - 767px</td> <td>641 - 1,024px</td> <td>768 - 991px</td> </tr> <tr> <td>Medium (md)</td> <td>large phone/small tablet</td> <td>601 - 900px</td> <td>768 - 991px</td> <td>1024 - 1,215px</td> <td>768 - 1,023px</td> <td>1,025 - 1,440px</td> <td>992 - 1,199x</td> </tr> <tr> <td>Large (lg)</td> <td>tablet</td> <td>901 - 1,200px</td> <td>992 - 1,200px</td> <td>1,216 - 1,407px</td> <td>1,024- 1,279px</td> <td>1,441 - 1,920px</td> <td>1,200 - 1,919px</td> </tr> <tr> <td>Extra Large (xl)</td> <td>desktop/large tablet</td> <td>1,201 - 1,500px</td> <td>&gt; 1,200px</td> <td>&gt; 1,408px</td> <td>&gt; 1,280px</td> <td>&gt; 1,921px</td> <td>&gt; 1,920px</td> </tr> </tbody> </table></div> <p>Thanks in advance everyone for your feedback!</p> responsive css breakpoints ux