Breakpoints Guide in MIZ

Breakpoints in web design refer to the points at which the page layout changes to display correctly on different screen sizes. These are crucial for responsive design, as they allow you to adjust styles and layouts based on screen size. In the MIZ framework, using breakpoints helps you create designs that are compatible with various devices.

Basic Breakpoint Classes #

Sizes

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px

Other Adjustments

All classes can be used at different sizes.

Custom Settings #

To customize breakpoints in the MIZ framework, you can refer to the breakpoints configuration file. This file allows you to set different breakpoints sizes according to your specific needs. For instance, you can change the default sizes to better suit your design.

Using Breakpoints in Design #

Using breakpoints in design allows you to adjust your layout based on different screen sizes, improving user experience and content readability. Some practical examples of using breakpoints in design include:

Example #

Example 1: Changing font size at different breakpoints

                  <p class="txt-normal txt-sm-small txt-md-large txt-lg-big-title">Sample Text</p>
                  

                    
                    
HTML
                    
                  
                

Example 2: Hiding an element at different screen sizes

                  <div class="d-block d-lg-none">Content only for larger screens</div>
                  

                    
                    
HTML
                    
                  
                

Example 3: Adjusting padding at different breakpoints

                  <div class="p-2 p-sm-4 p-md-6 p-lg-8">Content with dynamic padding</div>
                  

                    
                    
HTML
                    
                  
                

Default Breakpoint Settings #

In the MIZ framework, the default breakpoints are defined as follows, and you can change them in the configuration file:

• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px

Customizing Breakpoints #

To customize breakpoints, open the breakpoints configuration file and replace the default values with your desired values. This allows you to adjust your responsive design based on the specific needs of your project.

    

        
SCSS
        
    
    $breakpoints: (
    'es': 300px,
    'sm': 600px,
    'md': 800px,
    'lg': 1200px,
    'xl': 1600px,
    'xxl': 2000px,
);

Customization Process #

Follow these steps to customize your breakpoints:

• Locate the Configuration File: Find the file miz/sass/config/_responsive.scss where the breakpoints are defined.
• Edit the Values: Replace the default pixel values in the $break-points variable with your preferred dimensions. You can also add new values to this variable.