Media Queries

CSSkel uses media queries to provide responsive behavior, adjusting layouts, typography, and visibility based on screen size. The main breakpoints are defined as follows:

Breakpoints

Breakpoint	Description
max-width: 768px	Used for mobile-specific styles, such as collapsing autocols to a single column and toggling visibility classes.
min-width: 600px	Used for larger-than-mobile layouts, including grid column counts, typography scaling, and removing mobile padding.
min-width: 900px	Used for larger-than-phablet layouts, including adjusting grid container widths and displaying navbar menus inline.
min-width: 1200px	Used for tablet and larger layouts, including increasing column spans and adjusting grid container widths.
min-width: 1800px	Used for large desktop monitors, increasing the maximum width of the grid container.

Grid Container Widths

The .grid-container class adjusts its maximum width based on screen size:

Breakpoint	Max Width
min-width: 600px	750px
min-width: 900px	970px
min-width: 1200px	1068px
min-width: 1800px	1420px

Visibility Classes

Visibility classes (.only-on-desktop, .hide-on-mobile, etc.) are toggled at the 768px breakpoint. See the Utilities section for details.

Custom Media Queries

To add custom responsive behavior, include media queries in your CSS, ideally near the relevant styles. For example, to change button styles on small devices:

.button {
    padding: 10px 20px;
}
@media (max-width: 600px) {
    .button {
        padding: 8px 16px;
    }
}