.row > .s*.s* stand for "span" and it's used to set the width of the column<div class="s4"> columns in a row)beam.css)
| Extra Small | Small | Medium | Large | Extra Large | |
|---|---|---|---|---|---|
| Class prefix | .xs-* |
.sm-* |
.md-* |
.lg-* |
.xl-* |
| Media queries | <576px | ≥576px <767px |
≥768px <991px |
≥992px <1199px |
≥1200px |
.container width |
95% | 90% | 90% | 90% | 90% |
Breakpoint-specific-class has effect on a specific range of window size (.sm-3 class will not affect {xs} {md} {lg} {xl}).
You can set max-width for the .container or even a fixed width if you wish, but is not necessary for the grid to work.
.middle.bottom.center.no-gutters.collapse.delete.hide.first.last.off-*Utility classes are applied by default to all breakpoints. They can also be applied at specific breakpoints by adding them at the end separated by a hyphen (.delete-lg-xl will only affect {lg} and {xl} but not the other breakpoints).
You can only add one breakpoint per single .off-* class (.off-2-sm, .off-2-md, and so on).
If you use beam-lite.css only .delete has the option for adding breakpoints. The other utility classes are still there but you can only apply them to all breakpoints.
Resize the browser to see how breakpoints affect the layout in the examples below.
<div class="container">
<div class="row">
<div class="s6">1</div>
<div class="s6">2</div>
</div>
<div class="row">
<div class="s5">3</div>
<div class="s2">4</div>
<div class="s5">5</div>
</div>
<div class="row">
<div class="s2">6</div>
<div class="s4">7</div>
<div class="s4">8</div>
<div class="s2">9</div>
</div>
</div> 1
2
3
4
5
6
7
8
9
.s* is applied to all breakpoints and at {xs} is automatically set to be the full width of its container.
<div class="container">
<div class="row">
<div class="s6">1
<div class="row">
<div class="s4">1a</div>
<div class="s4">1b</div>
<div class="s4">1c</div>
</div>
</div>
<div class="s6">2
<div class="row">
<div class="s4">2a</div>
<div class="s4">2b</div>
<div class="s4">2c</div>
</div>
</div>
</div>
</div> 1
1a
1b
1c
2
2a
2b
2c
Beam support infinite nested rows.
<div class="container">
<div class="row">
<div class="s4 middle">1</div>
<div class="s4 middle">2</div>
<div class="s4 middle">3</div>
</div>
<div class="row">
<div class="s4">4</div>
<div class="s4">5</div>
<div class="s4 bottom">6</div>
</div>
<div class="row">
<div class="s4 bottom-lg-xl">7</div>
<div class="s4">8</div>
<div class="s4 bottom-lg-xl">9</div>
</div>
</div> 1
2
3
4
5
6
7
8
9
<div class="container">
<div class="row">
<div class="s5 center">1</div>
</div>
<div class="row center">
<div class="s3">2</div>
<div class="s3">3</div>
<div class="s3">4</div>
</div>
<div class="row">
<div class="s5 center-lg-xl">5</div>
</div>
</div> 1
2
3
4
5
<div class="container">
<div class="row no-gutters">
<div class="s3">1</div>
<div class="s3">2</div>
<div class="s3">3</div>
<div class="s3">4</div>
</div>
<div class="row no-gutters-md-xl">
<div class="s4">5</div>
<div class="s2">6</div>
<div class="s4">7</div>
<div class="s2">8</div>
</div>
</div> 1
2
3
4
5
6
7
8
<div class="container">
<div class="row">
<div class="s3">1</div>
<div class="s3">2</div>
<div class="s6">3</div>
</div>
<div class="row collapse">
<div class="s6">4</div>
<div class="s3">5</div>
<div class="s3">6</div>
</div>
<div class="row">
<div class="s3">7</div>
<div class="s3 collapse">8</div>
<div class="s6">9</div>
</div>
<div class="row collapse-lg-xl">
<div class="s6">10</div>
<div class="s3">11</div>
<div class="s3">12</div>
</div>
</div> 1
2
3
4
5
6
7
8
9
10
11
12
.collapse affect padding-top only on columns at {xs}, in other breakpoints it affect padding-top on rows. You can even collapse a single column (n°8 in this example).
<div class="container">
<div class="row">
<div class="s4">1</div>
<div class="s4 delete">2</div>
<div class="s4">3</div>
</div>
<div class="row delete-xs-sm-md">
<div class="s4">4</div>
<div class="s4 delete-lg">5</div>
<div class="s4">6</div>
</div>
</div> 1
2
3
4
5
6
<div class="container">
<div class="row">
<div class="s4">1</div>
<div class="s4 hide">2</div>
<div class="s4">3</div>
</div>
<div class="row hide-xs-sm-md">
<div class="s4">4</div>
<div class="s4 hide-lg">5</div>
<div class="s4">6</div>
</div>
</div> 1
3
<div class="container">
<div class="row">
<div class="s4">1</div>
<div class="s4">2</div>
<div class="s4 first">3</div>
</div>
<div class="row">
<div class="s4 last">4</div>
<div class="s4">5</div>
<div class="s4">6</div>
</div>
<div class="row">
<div class="s4">7</div>
<div class="s4">8</div>
<div class="s4 first-lg-xl">9</div>
</div>
</div> 1
2
3
4
5
6
7
8
9
.first and .last works only when columns are stacked horizontally. By default at {xs} are stacked vertically.
<div class="container">
<div class="row">
<div class="s3 off-4">1</div>
</div>
<div class="row">
<div class="s3 off-4 off-5-lg off-5-xl">2</div>
</div>
<div class="row">
<div class="s3 off-4 off-5-md off-5-lg off-6-xl">3</div>
</div>
</div> 1
2
3
By default .off-* is set to zero at {xs} unless you specify .off-xs-*.
<div class="container">
<div class="row">
<div class="s4 lg-6 xl-12">1</div>
<div class="s4 lg-6 delete-xl">2</div>
<div class="s4 delete-lg-xl">3</div>
</div>
<div class="row xs-margin-fix">
<div class="s3 xs-3 sm-4 md-6 lg-6 xl-12">4</div>
<div class="s3 xs-3 sm-4 md-6 lg-6 delete-xl">5</div>
<div class="s3 xs-3 sm-4 delete-md-lg-xl">6</div>
<div class="s3 xs-3 delete-sm-md-lg-xl">7</div>
</div>
</div> 1
2
3
4
5
6
7
You can set the column length to be applied only at one specific breakpoint with .{breakpoint}-* but you can not add more breakpoints in a single class.
When using .xs-* add .xs-margin-fix to its parent .row.
The second row can also work without .s3 but it's needed for IE8 compatibility.