Media WebUI

Overview

All container types expand to the size of the content placed within them and have a relative CSS position applied by default. Having relative positioning defines a context for a number of WebUI alignment and positioning classes. See the Alignment and Positioning sections to find out more about alignment and positioning.

Whether you just want to apply styles, a simple background, padding, or some custom behaviour, containers are often very useful. Containers do not have any automatic built-in resizing behaviour controlling margins or padding, but WebUI allows you to implement and adjust gutters using responsive gutter classes described below. There are also many options for controlling row and column padding via the grid system. See the Grid system section to learn more about how to use the WebUI grid.

Containers

Containers are not required by the WebUI grid system, but are purely to provide a styling context.

Container Classes

The following table lists the container classes and their basic characteristics.

Class
Description
container
The most basic container with no padding and allows content to overflow.
body
Similar to container, but has a 0.625rem padding.
box
Has no padding, but any overflow is hidden.
panel
Similar to box, has a 0.625rem padding, and overflow is hidden.
area
Similar to panel, has a 1.875rem padding, and overflow is hidden.

There is no particular requirement to use containers in any specific place, but they each have slightly different behaviours which can be useful. You could easily structure your whole site using only rows and columns, but then it would be more difficult to use the specialised positioning classes. Here are some other reasons why you may wish to use containers:

container - You may want to apply styles to show some separation of content, or apply behaviour. For example showing or hiding content.
body - Good for wrapping areas of content, where it is important that any overflow is not hidden. For example you might want to use it as a container for a menu, since dropdowns could be any size - the container class is equally suitable for this purpose.
box - Good for laying out areas of content, where you don't want any content to go outside the bounds of the container. For example you might want to use it to lay out sections within a modal or Facebook style media block.
panel - Great for an alternative to box with a bit more padding.
area - Great for wrapping user input forms, where more padding may be required.

None of the containers above have a width or height defined, and this means they can be used just about anywhere you like, but there are some things you might want to avoid. For example, it wouldn't make much sense placing a container directly inside a row, since rows are really just containers for columns to start on a new line. But there's nothing stopping you from placing them inside columns or even nesting containers.

Media Container Classes

The following table lists the media container classes.

Class
Description
media-container-21x9
Display media content with a 21x9 aspect ratio.
media-container-16x9
Display media content with a 16x9 aspect ratio.
media-container-4x3
Display media content with a 4x3 aspect ratio.
media-container-3x2
Display media content with a 3x2 aspect ratio.
media-container-1x1
Display media content with a 1x1 aspect ratio.

Media containers provide an easy way to display video and many other kinds of media at a specified aspect ratio. The key to this is to use the class media-content on the element being contained. You can constrain the width of the media element by using WebUI width-* classes. See the following examples:

Example
Media
Markup
<div class="panel gap-vertical-sm">
  <div class="media-container-21x9 width-xl">
    <iframe class="media-content" src="https://www.youtube.com/embed/xtzRxeaf5NQ?autoplay=0"></iframe>
  </div>
  <div class="media-container-4x3 width-two-thirds">
    <img src="/webui/assets/images/fuji.jpg" alt="Media" class="media-content" />
  </div>
</div>

Responsive Gutters

WebUI includes responsive gutters which can be applied to any container type or any row type - they can also be applied to most block level elements and on img tags also. This makes them super useful when you need a margin around elements to automatically increase or reduce depending on the width of the browser window, for example.

Responsive gutter classes are defined as follows.

Classes that add a responsive margin to the left and right of the element:

  • responsive-gutter-xs
  • responsive-gutter-sm
  • responsive-gutter-md
  • responsive-gutter-lg
  • responsive-gutter-xl

Classes that add a responsive margin to the left only or right only:

  • responsive-gutter-left-xs
  • responsive-gutter-right-xs
  • responsive-gutter-left-sm
  • responsive-gutter-right-sm
  • responsive-gutter-left-md
  • responsive-gutter-right-md
  • responsive-gutter-left-lg
  • responsive-gutter-right-lg
  • responsive-gutter-left-xl
  • responsive-gutter-right-xl

Responsive Gutters

Responsive gutters should not be applied directly to columns, but there is no problem with placing containers inside columns and applying responsive gutters to the containers.