Display

properties

Class

Class	Attribute
`display--none`	`display: none`
`display--block`	`display: block`
`display--inline-block`	`display: inline-block`
`display--inline`	`display: inline`
`display--flex`	`display: flex`
`display--inline-flex`	`display: inline-flex`

Our responsive classes take a mobile-first approach by either showing or hiding elements at specified viewports. The classes are broken down by using show or hide and applying a viewport suffix such as :tablet or :desktop.

For example, if you wanted to start displaying an element at the laptop screen size, you would add hide show:laptop. The hide class adds display: none which affects all screen sizes. Whereas the show:laptop class adds display: block at the respected media query. On the flip side, if you wanted to hide an element at the laptop resolution, you owuld simply add hide:laptop. It might help to think of these classes from the “mobile-first” approach.

Class

Class	Result
`show-print`	Show on printed media.
`hide-print`	Hide on printed media.
`show`	Show at all screen sizes.
`show:tablet`	Show at our tablet breakpoint and up.
`show:lg-tablet`	Show at our large tablet breakpoint and up.
`show:laptop`	Show Show at our laptop breakpoint and up.
`show:desktop`	Show at our desktop breakpoint and up.
`hide`	Hide on all screen sizes.
`hide:tablet`	Hide on our tablet breakpoint and up.
`hide:lg-tablet`	Hide on our large tablet breakpoint and up.
`hide:laptop`	Hide on our laptop breakpoint and up.
`hide:desktop`	Hide on our desktop breakpoint and up.