Print styles

This provides some classes to help show and hide content when printing.

Each print base class has a class to go with each of the media query viewport sizes. For example:

print-hide-3xs
print-hide-2xs
print-hide-xs
print-hide-sm
print-hide-md
print-hide-lg
print-hide-xl
print-hide-1xl
print-hide-3xl
print-hide-4xl
print-hide-5xl

How to import into your CSS

Import this into your CSS with:

@import 'cacao-css/dist/display/print.css';

Imports are available for all media query viewport sizes.

@import 'cacao-css/dist/display/3xs/print.css';
@import 'cacao-css/dist/display/2xs/print.css';
@import 'cacao-css/dist/display/xs/print.css';
@import 'cacao-css/dist/display/sm/print.css';
@import 'cacao-css/dist/display/md/print.css';
@import 'cacao-css/dist/display/lg/print.css';
@import 'cacao-css/dist/display/xl/print.css';
@import 'cacao-css/dist/display/2xl/print.css';
@import 'cacao-css/dist/display/3xl/print.css';
@import 'cacao-css/dist/display/4xl/print.css';
@import 'cacao-css/dist/display/5xl/print.css';

See Import Cacao CSS for more information.

Source CSS

Default styles

display/print.css

/* ===========================================================================
    Print styles - show or hide content when printing
=========================================================================== */

/* Hide content when not printing */
.print-show {
    display: none;
}

@media print {
    /* Hide content when printing */
    .print-hide {
        display: none m !important;
    }

    /* Show content only when printing */
    .print-show {
        display: block !important;
    }
}

3xs styles

display/3xs/print.css

/* ===========================================================================
    Print styles - show or hide content when printing
=========================================================================== */
@media (--m-3xs) {
    /* Hide content when not printing     */
    .print-show-3xs {
        display: none;
    }

    @media print {
        /* Hide content when printing */
        .print-hide-3xs {
            display: none m !important;
        }

        /* Show content only when printing */
        .print-show-3xs {
            display: block !important;
        }
    }
}

2xs styles

display/2xs/print.css

/* ===========================================================================
    Print styles - show or hide content when printing
=========================================================================== */
@media (--m-2xs) {
    /* Hide content when not printing     */
    .print-show-2xs {
        display: none;
    }

    @media print {
        /* Hide content when printing */
        .print-hide-2xs {
            display: none m !important;
        }

        /* Show content only when printing */
        .print-show-2xs {
            display: block !important;
        }
    }
}

xs styles

display/xs/print.css

/* ===========================================================================
    Print styles - show or hide content when printing
=========================================================================== */
@media (--m-xs) {
    /* Hide content when not printing     */
    .print-show-xs {
        display: none;
    }

    @media print {
        /* Hide content when printing */
        .print-hide-xs {
            display: none m !important;
        }

        /* Show content only when printing */
        .print-show-xs {
            display: block !important;
        }
    }
}

sm styles

display/sm/print.css

/* ===========================================================================
    Print styles - show or hide content when printing
=========================================================================== */
@media (--m-sm) {
    /* Hide content when not printing     */
    .print-show-sm {
        display: none;
    }

    @media print {
        /* Hide content when printing */
        .print-hide-sm {
            display: none m !important;
        }

        /* Show content only when printing */
        .print-show-sm {
            display: block !important;
        }
    }
}

md styles

display/md/print.css

/* ===========================================================================
    Print styles - show or hide content when printing
=========================================================================== */
@media (--m-md) {
    /* Hide content when not printing     */
    .print-show-md {
        display: none;
    }

    @media print {
        /* Hide content when printing */
        .print-hide-md {
            display: none m !important;
        }

        /* Show content only when printing */
        .print-show-md {
            display: block !important;
        }
    }
}

lg styles

display/lg/print.css

/* ===========================================================================
    Print styles - show or hide content when printing
=========================================================================== */
@media (--m-lg) {
    /* Hide content when not printing     */
    .print-show-lg {
        display: none;
    }

    @media print {
        /* Hide content when printing */
        .print-hide-lg {
            display: none m !important;
        }

        /* Show content only when printing */
        .print-show-lg {
            display: block !important;
        }
    }
}

xl styles

display/xl/print.css

/* ===========================================================================
    Print styles - show or hide content when printing
=========================================================================== */
@media (--m-xl) {
    /* Hide content when not printing     */
    .print-show-xl {
        display: none;
    }

    @media print {
        /* Hide content when printing */
        .print-hide-xl {
            display: none m !important;
        }

        /* Show content only when printing */
        .print-show-xl {
            display: block !important;
        }
    }
}

2xl styles

display/2xl/print.css

/* ===========================================================================
    Print styles - show or hide content when printing
=========================================================================== */
@media (--m-2xl) {
    /* Hide content when not printing     */
    .print-show-2xl {
        display: none;
    }

    @media print {
        /* Hide content when printing */
        .print-hide-2xl {
            display: none m !important;
        }

        /* Show content only when printing */
        .print-show-2xl {
            display: block !important;
        }
    }
}

3xl styles

display/3xl/print.css

/* ===========================================================================
    Print styles - show or hide content when printing
=========================================================================== */
@media (--m-3xl) {
    /* Hide content when not printing     */
    .print-show-3xl {
        display: none;
    }

    @media print {
        /* Hide content when printing */
        .print-hide-3xl {
            display: none m !important;
        }

        /* Show content only when printing */
        .print-show-3xl {
            display: block !important;
        }
    }
}

4xl styles

display/4xl/print.css

/* ===========================================================================
    Print styles - show or hide content when printing
=========================================================================== */
@media (--m-4xl) {
    /* Hide content when not printing     */
    .print-show-4xl {
        display: none;
    }

    @media print {
        /* Hide content when printing */
        .print-hide-4xl {
            display: none m !important;
        }

        /* Show content only when printing */
        .print-show-4xl {
            display: block !important;
        }
    }
}

5xl styles

display/5xl/print.css

/* ===========================================================================
    Print styles - show or hide content when printing
=========================================================================== */
@media (--m-5xl) {
    /* Hide content when not printing     */
    .print-show-5xl {
        display: none;
    }

    @media print {
        /* Hide content when printing */
        .print-hide-5xl {
            display: none m !important;
        }

        /* Show content only when printing */
        .print-show-5xl {
            display: block !important;
        }
    }
}