@ou-imdt/css/src/utility/layouts.css

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

/* Grid */

.grid {
    --min: 200px;
    --gap: 0.5rem;
    --side-width: minmax(10%, 30vw);
    --grid-template: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));
    display: grid;
    grid-gap: var(--gap);
    /* min() with 100% prevents overflow in extra narrow spaces */
    grid-template-columns: var(--grid-template)
}


@media (min-width: 480px) {
    .grid.sidebar-left {
        grid-template-columns: var(--side-width) minmax(min(50vw, 30ch), 1fr);
    }

    .grid.sidebar-right {
        grid-template-columns: minmax(min(50vw, 30ch), 1fr) var(--side-width);
    }
}

/* Flex */

.flex {
    --min: 200px;
    --gap: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
}

.flex>* {
    flex: 1 1 var(--min);
}




/* Other */

.card {
    border: var(--card-border);
    border-radius: var(--card-radius, var(--radius));
    padding: var(--card-padding, 0.5ch 1ch 1ch);
    margin: var(--card-margin);
    box-shadow: var(--card-shadow);
    overflow: var(--overflow, auto);
}

.center-child {
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
}

.resize {
    --resize: both;
    resize: var(--resize);
    overflow: auto;
    max-width: 100%;
}