layout.css

/*
    PAGE SETUP
    ----------
/*
    The app container takes the full height of the browser window.
    (100vh = 100% of the viewport's height).
    You can also use the `min-height` property instead
    if you want to ensure the app is at least
    as big as the browser window, but not constrain it beyond that.
*/
/*
    FLEXBOX LAYOUT
    --------------

    We're using the BEM naming methodology (http://getbem.com/naming/).
    Block:
        .layout
    Elements:
        .layout__item
    Modifiers:
        .layout__item--fixed-size
        .layout__item--grow,
        et cetera
*/

/*
    The basic building block is a layout container that will distribute
    its child elements either horizontally or vertically.
*/

.layout {
    display: flex;
}

/*
    The children of a layout container may be laid either horizontally
    or vertically, depending on the `flex-direction` property.
    Here we create two modifiers for the .layout box
*/

.layout--hbox {
    flex-direction: row;
}

.layout--vbox {
    flex-direction: column;
}

/*
    A layout that stretches all child elements to the same size.
    This is useful for things like sidebars for which we might want
    to have a background that stretches all the way down.
    (Even if the sidebar only has a little content)
*/

.layout--stretch {
    align-items: stretch;
}

/*
    The alternative to stretching the child elements is to align
    them in some way. In some situations, such as in headers that
    contain logos and navigation menus, you may want to align all
    children centrally.
*/

.layout--middle {
    align-items: center;
}

/*
    In situation where we need children to 'float' at opposite directions of the layout,
    we can use the `justify-content` property to push them to the edges.
*/

.layout--spread {
    justify-content: space-between;
}

.layout--wrap {
    flex-wrap: wrap;
}

.layout--centered {
    justify-content: space-around;
}

/*
    This is the only element we need in a layout block.
    By default, a `layout__item` does not need to do anything special.
    It has `flex: 0 1 auto` which is a shorthand for:
        - flex-grow: 0
        - flex-shrink: 1
        - flex-basis: auto
    We do however set `overflow: hidden` on it, so that we can enable
    scrolling on items that need it (see modifiers below).
*/

.layout__item {
    flex: 0 1 auto;
    overflow: hidden;
}

/*
    This is a layout item that permits its children to overflow
*/

.layout__item--overflow {
    overflow: visible;
}

/*
    A layout item that grows to fill the available space.
*/

.layout__item--grow  {
    flex-grow: 1;
}

/*
    A layout item that shows a scrollbar in case its content overflows
*/

.layout__item--scroll {
    overflow-y: auto;
    overflow-x: hidden;
}
/*
    A layout item that maintains a fixed size.
    (Either width or height, depending on how the items are laid out)
    This is accomplished by setting both `flex-grow` and `flex-shrink` to 0,
    in effect disabling the flexibility on the item.
*/

.layout__item--fixed-size {
    flex-grow: 0;
    flex-shrink: 0;
    box-sizing: border-box;
}

/*
    For items with a fixed size, we control that size by setting the
    `flex-basis` property rather than the `width` or `height` property.
    Below, we define a couple of sizes that are used throughout the layout.
*/

.layout__item--width-medium {
    flex-basis: 16em;
}
.layout__item--height-small {
    flex-basis: 3.5em;
    max-height: 3.5em;
}

.layout__item--width-10 {
    flex-basis: 10%;
}

.layout__item--width-15 {
    flex-basis: 15%;
}

.layout__item--width-20 {
    flex-basis: 20%;
}

.layout__item--width-25 {
    flex-basis: 25%;
}

.layout__item--width-30 {
    flex-basis: 30%;
}

.layout__item--width-50 {
    flex-basis: 50%;
}

.layout__item--width-60 {
    flex-basis: 60%;
}

.layout__item--width-70 {
    flex-basis: 70%;
}

.layout__item--width-75 {
    flex-basis: 75%;
}

.layout__item--width-80 {
    flex-basis: 80%;
}

.layout__item--width-85 {
    flex-basis: 85%;
}

.layout__item--width-90 {
    flex-basis: 90%;
}
/*
    In general, you'd want to adjust how the app lays out when viewed
    on small devices.
    Below is a minimal example of turning all flex layouts to normal block layouts.
*/
/*@media (max-width: 40em) {
    .layout {
        display: block;
    }

    .layout__item {
        max-height: auto !important;
    }
}*/