MOD-CSS supports CSS breakpoints based on media queries like most popular CSS frameworks.
We have six(6) breakpoints from small screen to very large.
Our breakpoints can be use with all MOD properties and all MOD attributes.
See below for examples.
Handling our CSS breakpoints
- xs = Extra small < 575.98px
- sm = Small ≥ 576px
- md = Medium ≥ 768px
- lg = Large ≥ 992px
- xl = Extra Large ≥ 1200px
- xxl = Very Extra Large ≥ 1400px
|Prefixes||Media query||CSS Breakpoints||Usage|
|xs||@media only screen and (max-width: 575.98px)||Screen Width below 575.98px||Portrait mobile|
|sm||@media (min-width: 576px)||Screen Width above or equal 576px||Landscape mobile|
|md||@media (min-width: 768px)||Screen Width above or equal 768px||Portrait tablet|
|lg||@media (min-width: 992px)||Screen Width above or equal 992px||Landscape tablet & Laptop|
|xl||@media (min-width: 1200px)||Screen Width above or equal 1200px||Desktop & Tvs|
|xxl||@media (min-width: 1400px)||Screen Width above or equal 1400px||4k and more|
How to use it
You call breakpoint with corresponding prefix follows by "?". You put space before to write your mod property.
A breakpoint start by "||" if you call it in middle string.
[property] || [prefix2? property]
If you want to call a another breakpoint after or set another properties, it ends by "||" .
[prefix1? property] || [property] or [prefix1? property] || [prefix2? property]
Mod respects order of your breakpoints while properties's generation. So, set them from the smallest to the biggest to avoid errors.
To improve your understanding of how to work our media query system, with have list some examples with good syntax and bad syntax.
MOD-CSS is very intuitive once you understand functionning, please compare carefully good and bad practice .
Ever put "?"
Don’t forget "?"
Don’t put space between prefix and "?"
Mod respects order of your breakpoints while properties's generation. So set them from the smallest to the biggest to avoid errors.
When it starts with ||
Breakpoint(s) always starts by double "||" - unless at the beginning of the string.
When it ends with ||
Breakpoint(s) always ends by double "||" - unless you have nothing more to put after.