Skip to main content
Experimental This website is used for testing – your feedback will help us to improve it.

Layout

Overview

The BAS Style Kit inherits, and expands, the layout features provided by Bootstrap.

Containers

Containers are the fundamental layout element and typically contains most of a page. Containers are required when using the grid system, or can be used independently for compatibility with other layout designs.

Two containers are available, which can be mixed and nested if needed.

Use the fixed-width container if you are unsure which to use.

Fixed-width container

Use the .bsk-container class for a responsive and fixed-width container. This means its max-width changes at each responsive breakpoint.

The container in the example will appear broken, this is because it is already placed within a container as part of this site’s layout.

<div class="bsk-container">
  <div class="bsk-docs-content-block"></div>
</div>

Fluid container

Use the .bsk-container-fluid class for a full-width container, meaning it spans the entire width of the viewport.

You might need to use this container where you are integrating the Style Kit with existing or third party code, or for certain types of content, such as mapping.

<div class="bsk-container-fluid">
  <div class="bsk-docs-content-block"></div>
</div>

Responsive breakpoints

The Style Kit is mobile first, meaning it is assumed pages will be viewed at the smallest possible size (i.e. on mobile phones) and then scales up, progressively, to larger sizes based on common devices classes such as phones, tablets, small and large monitors, TVs etc.

Media breakpoints are used to implement this design. They check if the current browser width is greater than the min-width of each breakpoint. These queries are reapplied whenever the browser size changes, for example when switching from landscape to portrait orientation on a phone.

These queries are based on the browser width only. We don’t use query string sniffing, or other related techniques, to identify the type of device being used. If this information is needed consider using an analytics service.

No media-query is used for the extra small size, therefore devices smaller than the extra small minimum will still be considered extra small. This slightly strange situation is resolved in the next Bootstrap version (v4) and will be included in future versions of the Style Kit when this is released.

The extra large size is custom to the BAS Style Kit, and is used to target larger displays to improve the use of space for internal, data rich, applications. It is not recommended for use in general websites.

The full HD size is custom to the BAS Style Kit, and is used to target displays such as Televisions for digital signage applications. It is not recommended for use in general websites.

Size Class Name Example Device Orientation Minimum Width (px) Min Width Variable Core Bootstrap
Extra Small xs Phone portrait 480 (see note) $screen-xs-min Yes
Small sm Phone landscape 768 $screen-sm-min Yes
Medium md Tablets 992 $screen-md-min Yes
Large lg Computers 1200 $screen-lg-min Yes
Extra Large xl Large desktop computers 1800 $screen-xl-min No
Full HD fhd Televisions 1920 $screen-fhd-min No

Maximum width

In some cases it is necessary to use the max-width as well to better target some devices. The maximum width is calculated as the next minimum width size minus 1px. There is no maximum width for the largest grid size.

Size Maximum Width (px) Max Width Variable
Extra Small 767 $screen-xs-max
Small 991 $screen-sm-max
Medium 1199 $screen-md-max
Large 1799 $screen-lg-max
Extra Large 1919 $screen-xl-max
Full HD N/A N/A

Using responsive breakpoints

Typically these breakpoints are used indirectly, through the grid system and other components, however they can also be used manually. This is useful where you aren’t using the grid system, or, in cases where you are integrating with existing code or a third party system.

// Styles for extra-small devices, or above
.foo {
  padding: 10px;
}

// Additional styles for medium devices, or above
@media (min-width: $screen-md-min) {
  .foo {
    padding: 20px;
  }
}

Floated blocks

Use the .bsk-pull-left and .bsk-pull-right classes to float content. The !important modifier is used to prevent specificity issues.

Do not use these classes in navbars, .bsk-navbar-left and .bsk-navbar-right classes should be used instead.

...
<div class="bsk-pull-left bsk-docs-content-block">...</div>

<!-- This class is used to make this example look correct -->
<div class="bsk-clearfix"></div>
...
<div class="bsk-pull-right bsk-docs-content-block">...</div>

<!-- This class is used to make this example look correct -->
<div class="bsk-clearfix"></div>

Alternatively, mixins can be used:

.element-one {
  .pull-left();
}
.element-two {
  .pull-right();
}

Centred blocks

Use the .bsk-center-block class to align a block using CSS margins.

...
<div class="bsk-center-block bsk-docs-content-block">...</div>

Alternatively, a mixin can be used:

.element {
  .center-block();
}

Clearfix

Use the .bsk-clearfix class on the parent element to clear floats. This uses the the micro clearfix by Nicolas Gallagher.

<div class="bsk-clearfix"></div>

Alternatively, a mixin can be used:

.element {
  .clearfix();
}

Visibility

The BAS Style Kit supports four states of visibility for block level elements. The !important modifier is used to prevent specificity issues.

Shown (visible)
An element which can be seen by everyone, and which affects page layout
Hidden
An element which cannot be seen by anyone, and which does not affect the page layout
Invisible
An element which cannot be seen by anyone, but which still affects page layout
Screen readers only
An element which can only be seen by assistive technologies such as screen readers, and which does not affect the page layout

General visibility classes

Both classes and mixins are available for setting these states generally (i.e. under any circumstances).

State Class Mixin
Shown .bsk-show .show();
Hidden .bsk-hidden .hidden();
Invisible .bsk-invisible .invisible();
Screen reader only .bsk-sr-only .sr-only();

Responsive visibility classes

As an alternative to the general classes, it’s possible to control an elements visibility at each responsive breakpoint. Any of these classes can be mixed and matched for each size.

These classes should not be used to display completely different content at different breakpoints. Rather these classes should be targeted to specific areas or features, generally to hide non-essential information on smaller devices.

The Invisible and Screen Reader only states doesn’t depend on the screen size and so have no per-breakpoint classes.

Unlike grid columns for example, visibility does not flow upwards grid sizes. If you hide an element at the extra small grid size, it will become visible again at the small size.

Size Visible Classes Hidden Class
Extra Small .bsk-visible-xs-block
.bsk-visible-xs-inline
.bsk-visible-xs-inline-block		 .bsk-hidden-xs
Small .bsk-visible-sm-block
.bsk-visible-sm-inline
.bsk-visible-sm-inline-block		 .bsk-hidden-sm
Medium .bsk-visible-md-block
.bsk-visible-md-inline
.bsk-visible-md-inline-block		 .bsk-hidden-md
Large .bsk-visible-lg-block
.bsk-visible-lg-inline
.bsk-visible-lg-inline-block		 .bsk-hidden-lg
Extra Large .bsk-visible-xl-block
.bsk-visible-xl-inline
.bsk-visible-xl-inline-block		 .bsk-hidden-xl
Full HD .bsk-visible-fhd-block
.bsk-visible-fhd-inline
.bsk-visible-fhd-inline-block		 .bsk-hidden-fhd

The .bsk-visible-print-block, .bsk-visible-print-inline and .bsk-visible-print-inline-block classes can be used to show content when printing.

Conversely, the .bsk-hidden-print class can be used to hide content.

Test cases

See the visibility examples for testing which classes are visible under different circumstances.