Stylabilla

3.1 #Layout.containers Containers

Containers with a max width

All Usabilla application page containers should use sb-container which is set to a max-width of 1920px.
If you want a Usabilla page to be the full window height (minus the header), you can use sb-container--full-height.
You can also use sb-container--full-width for full width containers.
And sb-container--sidepanel transitioning to sb-container--sidepanel-collapsed if you are using the sidepanel component. And sb-container--centered if you want to center a div that is smaller than the parent

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

.sb-container

.sb-container--full-width

Markup

<div class="sb-container sb-tile sb-padding">
  .sb-container
</div>
<div class="sb-container--full-width sb-tile sb-padding">
  .sb-container--full-width
</div>

Source: layout/_layout.scss, line 17

3.1.1 #Layout.containers.maxwidths Containers with a max width

Max width modifier classes. Use sb-container--max-width-#{suffix} to set the desired space between columns.

Browser support: IE10+, Safari9+, Firefox30+, Chrome30+

Default styling

.

.sb-container--max-width-xs

146px max width

.sb-container--max-width-xs

.sb-container--max-width-s

269px max width

.sb-container--max-width-s

.sb-container--max-width-m

515px max width

.sb-container--max-width-m

.sb-container--max-width-l

920px max width

.sb-container--max-width-l

Markup

<div class="sb-border-blue-1 [modifier class]">
  <div class="sb-tile sb-padding sb-text--center">
    .[modifier class]
  </div>
</div>

Source: layout/_layout.scss, line 74

3.2 #Layout.grid Grid

Columns Gutter Nesting Offset

A basic 12 column flexbox grid. Apply sb-grid to the wrapper element. If you also want a vertical gutter, include sb-grid--gutter-vertical.

Browser support: IE10+, Safari9+, Firefox30+, Chrome30+

Default styling

.sb-col-4

.sb-grid--gutter-vertical

Vertical gutter

.sb-col-4

Markup

<div class="sb-grid [modifier class]">
  <div class="sb-tile sb-padding sb-col-4">
    .sb-col-4
  </div>
  <div class="sb-tile sb-padding sb-col-4">
    .sb-col-4
  </div>
  <div class="sb-tile sb-padding sb-col-4">
    .sb-col-4
  </div>
  <div class="sb-tile sb-padding sb-col-4">
    .sb-col-4
  </div>
  <div class="sb-tile sb-padding sb-col-4">
    .sb-col-4
  </div>
  <div class="sb-tile sb-padding sb-col-4">
    .sb-col-4
  </div>
</div>

Source: layout/_layout.scss, line 102

3.2.1 #Layout.grid.columns Columns

Column classes. Use sb-col-#{i} to set the desired column width.

Browser support: IE10+, Safari9+, Firefox30+, Chrome30+

.sb-col-12

.sb-col-10

.sb-col-2

.sb-col-9

.sb-col-3

.sb-col-8

.sb-col-4

.sb-col-7

.sb-col-5

.sb-col-6

Markup

<div class="sb-grid">
  <div class="sb-tile sb-padding sb-col-12">
    .sb-col-12
  </div>
  <div class="sb-tile sb-padding sb-col-10">
    .sb-col-10
  </div>
  <div class="sb-tile sb-padding sb-col-2">
    .sb-col-2
  </div>
  <div class="sb-tile sb-padding sb-col-9">
    .sb-col-9
  </div>
  <div class="sb-tile sb-padding sb-col-3">
    .sb-col-3
  </div>
  <div class="sb-tile sb-padding sb-col-8">
    .sb-col-8
  </div>
  <div class="sb-tile sb-padding sb-col-4">
    .sb-col-4
  </div>
  <div class="sb-tile sb-padding sb-col-7">
    .sb-col-7
  </div>
  <div class="sb-tile sb-padding sb-col-5">
    .sb-col-5
  </div>
  <div class="sb-tile sb-padding sb-col-6">
    .sb-col-6
  </div>
  <div class="sb-tile sb-padding sb-col-6">
    .sb-col-6
  </div>
</div>

Source: layout/_layout.scss, line 147

3.2.2 #Layout.grid.gutter Gutter

Gutter modifier classes. Use sb-grid--gutter-#{gutter} to set the desired space between columns.
If you would also like a vertical gutter, include sb-grid--gutter-vertical, it will match your horizontal gutter in size.

Browser support: IE10+, Safari9+, Firefox30+, Chrome30+

Default styling

.sb-col-4

.sb-grid--gutter-0

No gutter

.sb-col-4

.sb-grid--gutter-s

Small gutter

.sb-col-4

.sb-grid--gutter-l

Large gutter

.sb-col-4

Markup

<div class="sb-grid [modifier class]">
  <div class="sb-tile sb-padding sb-col-4">
    .sb-col-4
  </div>
  <div class="sb-tile sb-padding sb-col-4">
    .sb-col-4
  </div>
  <div class="sb-tile sb-padding sb-col-4">
    .sb-col-4
  </div>
</div>

Source: layout/_layout.scss, line 261

3.2.3 #Layout.grid.nesting Nesting

To nest your content with the default grid, add a new sb-grid and set of sb-col-* columns within an existing sb-col-* column.

Browser support: IE10+, Safari9+, Firefox30+, Chrome30+

Level 1: .sb-col-8

Level 2: .sb-col-s-8 .sb-col-m-7 .sb-col-l-6

Level 2: .sb-col-s-4 .sb-col-m-5 .sb-col-l-6

Level 1: .sb-col-4

Markup

<div class="sb-grid">
  <div class="sb-tile sb-padding sb-col-8">
    <p class="sb-margin-bottom">Level 1: .sb-col-8</p>
    <div class="sb-grid">
      <div class="sb-tile sb-padding sb-col-s-8 sb-col-m-7 sb-col-l-6">
        Level 2: .sb-col-s-8 .sb-col-m-7 .sb-col-l-6
      </div>
      <div class="sb-tile sb-padding sb-col-s-4 sb-col-m-5 sb-col-l-6">
        Level 2: .sb-col-s-4 .sb-col-m-5 .sb-col-l-6
      </div>
    </div>
  </div>
  <div class="sb-tile sb-padding sb-col-4">
    Level 1: .sb-col-4
  </div>
</div>

Source: layout/_layout.scss, line 427

3.2.4 #Layout.grid.offset Offset

The sb-offset-{i} classes can be used to move a column to the right. The sb-offset-{size}-{i} classes can be used for responsive layouts respectively.

Browser support: IE10+, Safari9+, Firefox30+, Chrome30+

.sb-col-8 .sb-offset-4

.sb-col-4 .sb-offset-2

.sb-col-3 .sb-offset-3

.sb-col-m-6 .sb-offset-m-6 .sb-col-s-12

.sb-col-l-2 .sb-offset-l-10 .sb-col-9 sb-offset-3

Markup

<div class="sb-grid">
  <div class="sb-tile sb-padding sb-col-8 sb-offset-4">
    .sb-col-8 .sb-offset-4
  </div>
  <div class="sb-tile sb-padding sb-col-4 sb-offset-2">
    .sb-col-4 .sb-offset-2
  </div>
  <div class="sb-tile sb-padding sb-col-3 sb-offset-3">
    .sb-col-3 .sb-offset-3
  </div>
  <div class="sb-tile sb-padding sb-col-m-6 sb-offset-m-6 sb-col-s-12">
     .sb-col-m-6 .sb-offset-m-6 .sb-col-s-12
  </div>
  <div class="sb-tile sb-padding sb-col-l-2 sb-offset-l-10 sb-col-s-9 sb-offset-s-3">
    .sb-col-l-2 .sb-offset-l-10 .sb-col-9 sb-offset-3
  </div>
</div>

Source: layout/_layout.scss, line 377

3.3 #Layout.flex Flex

Display Direction Justify Align Wrap

NOTE: for grid-like layouts use the sb-grid.

Source: layout/_flex.scss, line 1

3.3.1 #Layout.flex.display Display

Display utility to create a flexbox container and transform direct children elements into flex items.

Browser support: IE10+, Safari6+, Firefox30+, Chrome30+

Default styling

I'm a flexbox container.

.sb-flex

Flexbox container

I'm a flexbox container.

.sb-flex-inline

Inline flexbox container

I'm a flexbox container.

Markup

<div class="[modifier class] sb-tile sb-padding">
  I'm a flexbox container.
</div>

Source: layout/_flex.scss, line 7

3.3.2 #Layout.flex.direction Direction

Set the direction of flex items in a flex container with direction utilities.

Browser support: IE10+, Safari6+*, Firefox30+, Chrome30+

Default styling

Flex item 1

Flex item 2

Flex item 3

.sb-flex-row

Set the flex items to a horizontal direction

Flex item 1

Flex item 2

Flex item 3

.sb-flex-row-reverse

Set the flex items to a horizontal direction from the opposite side *Safari9+

Flex item 1

Flex item 2

Flex item 3

.sb-flex-column

Set the flex items to a vertical direction

Flex item 1

Flex item 2

Flex item 3

.sb-flex-column-reverse

Set the flex items to a vertical direction

Flex item 1

Flex item 2

Flex item 3

Markup

<div class="sb-flex [modifier class] sb-tile">
  <div class="sb-padding">Flex item 1</div>
  <div class="sb-padding">Flex item 2</div>
  <div class="sb-padding">Flex item 3</div>
</div>

Source: layout/_flex.scss, line 29

3.3.3 #Layout.flex.justify-content Justify

Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (by default the x-axis, y-axis if flex-direction: column).

Browser support: IE10+, Safari6+*, Firefox30+, Chrome30+

Default styling

Flex item 1

Flex item 2

Flex item 3

.sb-justify-content-start

Items are packed toward the start line

Flex item 1

Flex item 2

Flex item 3

.sb-justify-content-end

Items are packed toward the end line

Flex item 1

Flex item 2

Flex item 3

.sb-justify-content-center

Items are centered along the line

Flex item 1

Flex item 2

Flex item 3

.sb-justify-content-between

Items are evenly distributed in the line

Flex item 1

Flex item 2

Flex item 3

.sb-justify-content-around

Items are evenly distributed in the line with equal space around them *Safari9+

Flex item 1

Flex item 2

Flex item 3

Markup

<div class="sb-flex [modifier class] sb-tile">
  <div class="sb-padding sb-tile">Flex item 1</div>
  <div class="sb-padding sb-tile">Flex item 2</div>
  <div class="sb-padding sb-tile">Flex item 3</div>
</div>

Source: layout/_flex.scss, line 56

3.3.4 #Layout.flex.align-items Align

Use align-items utilities on flexbox containers to change the alignment of flex items on the cross axis (by default the y-axis, x-axis if flex-direction: column).

Browser support: IE10+, Safari6+, Firefox30+, Chrome30+

Default styling

Flex item 1

Flex item 2

Flex item 3

.sb-align-items-start

Items are packed toward the start line of the cross axis

Flex item 1

Flex item 2

Flex item 3

.sb-align-items-end

Items are packed toward the end line of the cross axis

Flex item 1

Flex item 2

Flex item 3

.sb-align-items-center

Items are centered along the line of the cross axis

Flex item 1

Flex item 2

Flex item 3

.sb-align-items-baseline

Items are aligned such as their baselines align

Flex item 1

Flex item 2

Flex item 3

.sb-align-items-stretch

Items are stretched to fill the container

Flex item 1

Flex item 2

Flex item 3

Markup

<div class="sb-flex [modifier class] sb-tile" style="height: 100px">
  <div class="sb-padding sb-tile">Flex item 1</div>
  <div class="sb-padding sb-tile">Flex item 2</div>
  <div class="sb-padding sb-tile">Flex item 3</div>
</div>

Source: layout/_flex.scss, line 86

3.3.5 #Layout.flex.wrap Wrap

Change how flex items wrap in a flex container.

Browser support: IE11+, Safari9+, Firefox30+, Chrome30+

Default styling

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

.sb-flex-nowrap

No wrapping of the items

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

.sb-flex-wrap

Wrap the items in a new line. The direction is defined by flex-direction.

Flex item 1

Flex item 2

Flex item 3

Flex item 4

Flex item 5

Flex item 6

Flex item 7

Flex item 8

Flex item 9

Flex item 10

Markup

<div class="sb-flex [modifier class] sb-tile" style="width: 700px">
  <div class="sb-padding">Flex item 1</div>
  <div class="sb-padding">Flex item 2</div>
  <div class="sb-padding">Flex item 3</div>
  <div class="sb-padding">Flex item 4</div>
  <div class="sb-padding">Flex item 5</div>
  <div class="sb-padding">Flex item 6</div>
  <div class="sb-padding">Flex item 7</div>
  <div class="sb-padding">Flex item 8</div>
  <div class="sb-padding">Flex item 9</div>
  <div class="sb-padding">Flex item 10</div>
</div>

Source: layout/_flex.scss, line 116

3.4 #Layout.responsive Responsive

To create a mobile-first responsive grid you can add different column classes for different viewports. Add sb-col-#{i}, sb-col-s-#{i}, sb-col-m-#{i}, sb-col-l-#{i}, sb-col-xl-#{i} to set the desired column width for extra small (default), small, medium, large and extra large viewports.

Browser support: IE10+, Safari9+, Firefox30+, Chrome30+

.sb-col-12 .sb-col-s-6 .sb-col-m-4 .sb-col-l-3 .sb-col-xl-2

.sb-col-12 .sb-col-s-6 .sb-col-m-12 .sb-col-l-3 .sb-col-xl-2

Markup

<div class="sb-grid">
  <div class="sb-tile sb-padding sb-col-12 sb-col-s-6 sb-col-m-4 sb-col-l-3 sb-col-xl-2">
    .sb-col-12 .sb-col-s-6 .sb-col-m-4 .sb-col-l-3 .sb-col-xl-2
  </div>
  <div class="sb-tile sb-padding sb-col-12 sb-col-s-6 sb-col-m-4 sb-col-l-3 sb-col-xl-2">
    .sb-col-12 .sb-col-s-6 .sb-col-m-4 .sb-col-l-3 .sb-col-xl-2
  </div>
  <div class="sb-tile sb-padding sb-col-12 sb-col-s-6 sb-col-m-4 sb-col-l-3 sb-col-xl-2">
    .sb-col-12 .sb-col-s-6 .sb-col-m-4 .sb-col-l-3 .sb-col-xl-2
  </div>
  <div class="sb-tile sb-padding sb-col-12 sb-col-s-6 sb-col-m-12 sb-col-l-3 sb-col-xl-2">
    .sb-col-12 .sb-col-s-6 .sb-col-m-12 .sb-col-l-3 .sb-col-xl-2
  </div>
</div>

Source: layout/_layout.scss, line 204

3.5 #Layout.spacing Spacing

Margins Paddings

To adjust the spacing between elements, use the provided sb-margin or sb-padding classes.

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

Source: layout/_spacing.scss, line 1

3.5.1 #Layout.spacing.margins Margins

Classes that apply differently sized margins to your elements. The available directions are top, bottom, left, right, vertical, horizontal. The available sizes ranges from xs to xl. The default class sb-margin adds the medium sized margin to all sides.

.sb-margin-bottom-xs

.sb-margin-bottom-s

.sb-margin-bottom

.sb-margin-bottom-l

.sb-margin-bottom-xl

Markup

<div class="sb-tile sb-margin-bottom-xs sb-padding">
  .sb-margin-bottom-xs
</div>
<div class="sb-tile sb-margin-bottom-s sb-padding">
  .sb-margin-bottom-s
</div>
<div class="sb-tile sb-margin-bottom sb-padding">
  .sb-margin-bottom
</div>
<div class="sb-tile sb-margin-bottom-l sb-padding">
  .sb-margin-bottom-l
</div>
<div class="sb-tile sb-margin-bottom-xl sb-padding">
  .sb-margin-bottom-xl
</div>

Source: layout/_spacing.scss, line 9

3.5.2 #Layout.spacing.paddings Paddings

Classes that apply differently sized paddings to your elements. The available directions are top, bottom, left, right, vertical, horizontal. The available sizes ranges from xs to xl. The default class sb-padding adds the medium sized padding to all sides.

Browser support: IE9+, Safari6+, Firefox30+, Chrome30+

.sb-padding-xs

.sb-padding-s

.sb-padding

.sb-padding-l

.sb-padding-xl

Markup

<div class="sb-tile  sb-padding-xs sb-margin-bottom">
  .sb-padding-xs
</div>
<div class="sb-tile  sb-padding-s sb-margin-bottom">
  .sb-padding-s
</div>
<div class="sb-tile sb-padding sb-margin-bottom">
  .sb-padding
</div>
<div class="sb-tile sb-padding-l sb-margin-bottom">
  .sb-padding-l
</div>
<div class="sb-tile sb-padding-xl sb-margin-bottom">
  .sb-padding-xl
</div>

Source: layout/_spacing.scss, line 71