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.

Resolved now?: 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

Bootstrap 5 float breaking changes: https://getbootstrap.com/docs/5.2/migration/#utilities

Use the .bsk-float-start and .bsk-float-end classes to float content. The !important modifier is used to prevent specificity issues.

Do not use these classes in navbars, Alternative classes such as .bsk-ms-auto should be used instead.

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

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

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

Centred blocks

Use the .bsk-position-absolute .bsk-start-50 .bsk-translate-middle classes to align a block using CSS margins.

...
<div class="bsk-position-absolute bsk-start-50 bsk-translate-middle bsk-docs-content-block">...</div>

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 are available for setting these states generally (i.e. under any circumstances).

State Class
Shown .bsk-show
Hidden .bsk-d-none
Invisible .bsk-invisible
Screen reader only .bsk-visually-hidden

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-d-none .bsk-d-sm-table-cell .bsk-d-none .bsk-d-sm-none
Small .bsk-d-sm-none .bsk-d-md-table-cell .bsk-d-none .bsk-d-sm-block bsk-d-md-none
Medium .bsk-d-md-none .bsk-d-lg-table-cell .bsk-d-none .bsk-d-md-none .bsk-d-lg-block
Large .bsk-d-lg-none .bsk-d-xl-table-cell .bsk-d-none .bsk-d-lg-block .bsk-d-xl-none
Extra Large .bsk-d-xl-none .bsk-d-fhd-table-cell .bsk-d-none .bsk-d-xl-block .bsk-d-fhd-none
Full HD .bsk-d-fhd-none .bsk-d-none .bsk-d-fhd-block

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

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

Test cases

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