stylingutilities/stylingutilities/display.styl

lightweight css utilities library for the front-end web

display-media-breakpoint = 900px
display-class-prefix = ""

.{display-class-prefix}inline-block {
    display inline-block
}

.{display-class-prefix}inline {
    display inline
}

.{display-class-prefix}block {
    display block
}

.{display-class-prefix}flex {
    display flex
}

.{display-class-prefix}inline-flex {
    display inline-flex
}

.{display-class-prefix}inline-grid {
    display inline-grid
}

.{display-class-prefix}grid {
    display grid
}

.{display-class-prefix}table {
    display table
}

.{display-class-prefix}no-display {
    display: none
}

.{display-class-prefix}container {
    width 70%

    @media screen and (max-width display-media-breakpoint) {
        width 100%
    }
}

.{display-class-prefix}half-viewport-height {
    height 50vh
}

.{display-class-prefix}viewport-height {
    height 100vh
}

.{display-class-prefix}half-viewport-width {
    width 50vw
}

.{display-class-prefix}viewport-width {
    width 100vw
}

.{display-class-prefix}half-fill-width {
    width 50%
}

.{display-class-prefix}fill-width {
    width 100%
}