Responsiveness

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

Screens

xs = Extra small < 575.98px
sm = Small ≥ 576px
md = Medium ≥ 768px
lg = Large ≥ 992px
xl = Extra Large ≥ 1200px
xxl = Very Extra Large ≥ 1400px

Media queries

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.
[prefix? property]

HTML

                
    <div :mod="md? container[100%]"></div>

A breakpoint start by "||" if you call it in middle string.
[property] || [prefix2? property]

HTML

                
    <div :box="br[8px] || md? bg[gray]"></div>

If you want to call a another breakpoint after or set another properties, it ends by "||" .
[prefix1? property] || [property] or [prefix1? property] || [prefix2? property]

HTML

                
    <div :box="sm? bg[lightgray] || md? bg[gray]"></div>
    <div :box="md? bg[gray] || br[8px]"></div>

Mod respects order of your breakpoints while properties's generation. So, set them from the smallest to the biggest to avoid errors.
Check Ordering.

Good practice

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 "?"

HTML

                    
    // Good :  
    <div :box="lg? bg[red] w[95%]"></div>

    
    // Bad :  
    <div :box="lg ? bg[red] w[95%]"></div>
    <div :box="lg bg[red] w[95%]"></div>

Ordering

Mod respects order of your breakpoints while properties's generation. So set them from the smallest to the biggest to avoid errors.

HTML

                    
    // Good 
    <div :box="xs? bg[pink] || sm? bg[red] || md? bg[blue]"></div>

    // Bad  
    <div :box="md? bg[blue] || xs? bg[pink] || lg? bg[red]"></div>

When it starts with ||

Breakpoint(s) always starts by double "||" - unless at the beginning of the string.

HTML

                    
    // Good 
    <div :box="xs? bg[pink] || md? bg[blue]"></div>
    <div :box="bg[pink] || md? bg[blue]"></div>

    // Bad  
    <div :box="|| bg[pink] || lg? bg[red]"></div>
    <div :box="|| xs? bg[pink] || lg? bg[red]"></div>

When it ends with ||

Breakpoint(s) always ends by double "||" - unless you have nothing more to put after.

HTML

                    
    // Good 
    <div :box="bg[pink] || md? bg[blue]"></div>
    <div :box="xs? bg[pink] || md? bg[blue]"></div>

    // Bad              
    <div :box="bg[pink] || lg? bg[red] ||"></div>
    <div :box="xs? bg[pink] || lg? bg[red] ||"></div>