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 |
Print visibility classes
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.