Scopes

Responsive

Append the responsive scope to the front of any utlity to make that utility apply to that size and larger (with the exception of sm which makes that utility only apply to sm size).

Responsive Container

A class is also generated to allow the responsive nature to be defined by the container. To simulate the size of the browser on a container add [size]-container (ex. sm-container).

<div class="sm-container bg-blue bg-opacity-10 pad">
    <code>.sm-container</code>
    <div class="width-full sm:width-1/2 height-50-px bg-green bg-opacity-50">
        <code>sm:width-1/2</code>
    </div>
</div>

Default Responsive Breakpoints

Psuedo Classes

Append a psuedo class to confine utility to that scope.

active:[utility]:active {
    /* [utility-attributes] */
}

focus:[utility]:focus {
    /* [utility-attributes] */
}

hover:[utility]:hover {
    /* [utility-attributes] */
}

checked:[utility]:checked {
    /* [utility-attributes] */
}

focus-within:[utility]:focus-within {
    /* [utility-attributes] */
}

first-child:[utility]:first-child {
    /* [utility-attributes] */
}

last-child:[utility]:last-child {
    /* [utility-attributes] */
}

Hover Group

Set a utility based on a the hovering of a parent element (group)

.group:hover group-hover:[utility]{
    /* [utility-attributes] */
}