Breakpoints

Our breakpoints are based on screen widths where our content starts to break. Since most of GitHub is currently a fixed-width with we use pixel widths to make it easy for us to match page widths for responsive and non-responsive pages. Our breakpoints may change as we move more of the product into responsive layouts.

We use abbreviations for each breakpoint to keep the class names concise. This abbreviated syntax is used consistently across responsive styles. Responsive styles allow you to change the style properties at each breakpoint. For example, when using column widths for grid layouts, you can change specifies that the width is 12 columns wide at the small breakpoint, and 6 columns wide from the large breakpoint:

            
...
        
        

Some Related CSS Classes:

.jds-row, .no-gutters, .order-3, .order-s-2, .order-m-first, 
        .column, .column-1, .column-auto, .column-s-auto, .column-s-1, .column-m-1, .column-l-1, .column-xl-1, 
        .jds-row-cols-1, .offset-1

• Breakpoint variables
• Media query mixins
• Responsive variants

Media size and Breakpoints