Breakpoints

Breakpoints stay at the core of responsive design. These are used to control when the layout layout can be adapted at a particular viewport or device size. Media queries are a feature of CSS that allow you to conditionally apply styles based on a set of browser and operating system parameters.

The grid system can adapt across six default breakpoints, resulting in 7 device sizes. Additional breakpoints can be added as well. The default grid tiers are as follows:

Haze primarily uses the following media querries, although some other ones can be identified within the code. However, we recommend sticking only to these ones when extending Haze.

    // Small devices (landscape phones, 576px and up)
    @media (min-width: 576px) {
        // declarations here
    }
    
    // Medium devices (tablets, 768px and up)
    @media (min-width: 768px) {
        // declarations here
    }
    
    // Large devices (desktops, 992px and up)
    @media (min-width: 992px) {
        // declarations here
    }
    
    // XL devices (large desktops, 1100px and up)
    @media (min-width: 1100px) {
        // declarations here
    }
    
    // XXL devices (larger desktops, 1260px and up)
    @media (min-width: 1260px) {
        // declarations here
    }

In addition, you might encounter max-width media querries, or two bound media querries with both min-width and max-width values.

    // Small devices (landscape phones, 576px and up)
    @media (max-width: 576px) {
        // declarations here
    }

    // Medium devices (tablets, 768px and up until 992px)
    @media (min-width: 768px) and (max-width: 992px) {
        // declarations here
    }