We are working on something new! Check it out here!

The website's main footer

Container

A container with a maximum width of $screen-lg-max

Example

<div class="container"></div>
Source file: ~/source/sass/objects/layout/_container.scss

Pull left

Floats an element to the left edge of the container.

Example

Floating to the left
<div class="pull-left">Floating to the left</div>
<div class="clearfix"></div>
Source file: ~/source/sass/objects/layout/_float.scss

Pull right

Floats an element to the right edge of the container.

Example

Floating to the right
<div class="pull-right">Floating to the right</div>
<div class="clearfix"></div>
Source file: ~/source/sass/objects/layout/_float.scss

Clearfix

Used to clear floats. Can be used either on a div after a floated element or directly on the container.

Example

<div class="clearfix"></div>
Source file: ~/source/sass/objects/layout/_float.scss

Grid

HbgPrime's grid system is a 12 column responsive grid.
ATTENTION: Remove the .grid-example class before using.

Modifiers

  • .grid-md-fit-content -
  • .grid-md-auto -

Example

grid-md-3
grid-md-9
ett
två
tre
fyra
fem
sex
sju
åtta
<div class="container-fluid">
<div class="grid grid-example">
    <div class="grid-md-3">grid-md-3</div>
    <div class="grid-md-9">grid-md-9</div>
</div>
<div class="grid grid-example">
    <div class="grid-md-4">ett</div>
    <div class="grid-md-4">två<br>tre</div>
    <div class="grid-md-4">fyra</div>
    <div class="grid-md-4">fem</div>
    <div class="grid-md-4">sex<br>sju</div>
    <div class="grid-md-4">åtta</div>
</div>
 </div>
Source file: ~/source/sass/objects/layout/_grid.scss