Media / responsives modifiers

Atomic Design System architecture with SCSS, ITCSS

Search…

When you want a class to apply to a specific media querie, instead of the '--' delimiter, use a '@' delimiter.
Exemple :
<button class="
    ga-button
    ga-button--small
    [email protected]
    [email protected]
    ">
    button text
<button>
here we instantiated a class that tell us that the button will be a large one from medium screen and a utility telling us that the button should be hidden for print. 
in css, we need to escape the @ : 
.ga-button {
    &--large {
        /* large option styles */    
    }
    
    @media screen and (min-width = 720px) {
        &--large\@from-medium {
            /* large option styles */    
        }
    }
}
.gu-hide {
    @media screen and (max-width = 720px) {
        &\@to-medium {
            display: none !important;    
        }
    }
​
    @media screen and (min-width = 720px) {
        &\@from-medium {
            display: none !important;    
        }
    }
}

Conventions - Previous

How to use the Element entity

Next - Conventions

General formatting

Last modified 3yr ago

Copy link