No media queries are used Since tablets and mobiles are now displaying huge resolutions, if we think its mobile, the body gets a class of .m
, if we think its a tablet, it gets a class of .t
.
if its neither mobile nor tablet,it gets .d
unless the screen is wider than 1920px, then it gets .hd
- Columns must use class
.col
- Mobile use class
.m-{desired size}
eg.m-12
- Tablet use class
.t-{desired size}
eg.t-6
- Desktop use class
.d-{desired size}
eg.d-4
- Huge Desktop use class
.hd-{desired size}
eg.hd-2
- 12 columns (
.col
). extras.row
,.container
,.container.fluid
- use
.{size}-hide
to hide eg.m-hide
would hide for mobile.
eg: .col.m-12.t-6.d-4.hd-2
would be 100% width on mobile, 50% width tablet, 33.3% width desktop, 16.6% width huge desktop.
examples:
<div class="col m-12 t-6 d-4 hd-hide">
I'm responsive, but hidden on huge desktops (screens > 1920px)
</div>
<div class="row">
<div class="container">
My max width is 1200px
</div>
</div>
<div class="col m-hide">
I'm hidden on mobile.
</div>