hypothetical/resources/assets/sass/app.scss

// Core
@import "_var";
@import "_fonts";

// Libraries
@import "bootstrap-sass/assets/stylesheets/_bootstrap.scss";

// Supplementary
@import "elements/**/*.scss";
@import "pages/**/*.scss";

//
// Main Website Styles
//

[data-whatinput="initial"], [data-whatinput="keyboard"] {
    :focus {
        outline: 1px dotted $c-base;
    }
}

[data-whatinput="mouse"], [data-whatinput="touch"] {
    :focus {
        outline: none !important;
    }
}

html {
    width: 100%;
    &.no-scroll { overflow-y: hidden; }
}

body {
    @include font-sans;
    width: 100%;
    color: $c-text;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-overflow-scrolling: touch;
    @media (max-width: $grid-float-breakpoint-max) { padding-top: $nav-height-mobile; }
}

#page-container {
    display: flex;
    min-height: 100vh;
    padding-top: $nav-height;
    flex-direction: column;

    #main-content {
        flex: 1;
    }
}