Table of contents

Media

Metro 4 Components Library is designed for build mobile-first projects.

About

Metro 4 is designed as a mobile-first system. We use min-width property for build media queries.

Metro 4 support seven media breakpoints:

  • default < 576px
  • fs @media screen and (min-width: 0) {...}
  • sm @media screen and (min-width: 576px) {...}
  • md @media screen and (min-width: 768px) {...}
  • lg @media screen and (min-width: 992px) {...}
  • xl @media screen and (min-width: 1200px) {...}
  • xxl @media screen and (min-width: 1452px) {...}

Many classes has media synonyms. You can use them with media suffixes: -fs, -sm, -md, -lg, -xl, -xxl.

Default

Initially defined behavior for screens with a size smaller than 576px. Then the media modifiers redefine the behavior for the desired screen size.

Example

cell-md-4
cell-md-4
cell-md-4

                    <div class="row">
                        <div class="cell-md-4">cell-md-4</div>
                        <div class="cell-md-4">cell-md-4</div>
                        <div class="cell-md-4">cell-md-4</div>
                    </div>

In this example cells defined with width: 100% for screens less then 768px and width: 33.3% for more.