Settings

Default settings

There are four default settings of Rebar: $mobile-first, $max-width, $breakpoints and $gutters. To change a default value, create the variable before @import "rebar" and assign it a new value.

$mobile-first

Set media feature type, set to true will use min-width, and set to false will use max-width. It’s set to true by default.

$max-width

Set default max-width for all containers. The default value is 1170px.

$breakpoints

Set a breakpoints list. If mobile first the default list is 481px 769px 992px. and if desktop first the default list is 992px 769px 481px. You can set as many breakpoints as you need.

$gutters

Set default gutter width at each responsive slice. If mobile first the default list is 20px 20px 26px 30px, and if desktop first the default list is 30px 26px 20px 20px. This list should always have one more value than $breakpoints.

Container settings

There are five settings for container. None of them are required, so a very basic container can be created like this:

$container: (
  ".container": ()
);

gutter

Container doesn’t have gutter by default, set this to true to enable gutter. Gutter width is from the $gutters variable. In other words, this setting will turn a container to a full width grid but without nesting structure.

Type:     boolean
Default:  false
Length:   single value

example:

$container: (
  ".container-gutter": (
    gutter: true
  )
);

nested

Set a nested container. It works like the .row class of Bootstrap. If this set to true the other settings won’t be affected, so use this setting independently.

Type:     boolean
Default:  false
Length:   single value

example:

$container: (
  ".container-gutter": (
    gutter: true
  ),
  ".container-nested": (
    nested: true
  )
);

width

Set fixed width at each responsive slice.

Type:     number (1/2 | .5 | 50% | 600px | 40em) | null
Default:  null
Length:   space separated multiple values

example:

$container: (
  ".container-width": (
    width: 100px 300px 600px 900px
  )
);

max-width

Adjust max width for container, this setting will override the default $max-width.

Type:     number (1/2 | .5 | 50% | 600px | 40em)
Default:  $max-width
Length:   single value

example:

$container: (
  ".container-max-width": (
    max-width: 1280px
  )
);

min-width

Set min width for container.

Type:     number (1/2 | .5 | 50% | 600px | 40em)
Default:  null
Length:   single value

example:

$container: (
  ".container-min-width": (
    min-width: 600px
  )
);

Grid settings

There are eight settings for grid. None of them are required, but blank setting will create a grid with auto width.

float

Adjust float direction at each responsive slice.

Type:     string (left | right | none) | null
Default:  left
Length:   space separated multiple values

example:

$container: (
  ".container": ()
);

$grid: (
  ".grid-float": (
    width: 1/3,
    float: right left null right
  )
);

offset-left

Set left offset (margin-left) at each responsive slice. If a grid only has offset-left or offset-right setting, the default float and padding properties won’t be outputted, so this setting can be also used to create an offset class and use it independently.

Type:     number (1/2 | .5 | 50% | 600px | 40em) | null
Default:  null
Length:   space separated multiple values

example:

$container: (
  ".container": ()
);

$grid: (
  ".grid-offset-left": (
    width: 1/2,
    offset-left: 0 null 30px 1/4
  )
);

offset-right

Set right offset (margin-right) at each responsive slice. If a grid only has offset-right or offset-left setting, the default float and padding properties won’t be outputted, so this setting can be also used to create an offset class and use it independently.

Type:     number (1/2 | .5 | 50% | 600px | 40em) | null
Default:  null
Length:   space separated multiple values

example:

$container: (
  ".container": ()
);

$grid: (
  ".grid-offset-right": (
    width: 1/2,
    float: right,
    offset-right: 0 null 30px 1/4
  )
);

gutter-left

Adjust left gutter width (padding-left) at each responsive slice, each value should not be omitted. For example, clear the left gutter have to set gutter-left: 0 0 0 0. In this setting, null means reset to the default gutter width not inherit form the previous value.

Type:     number (1/2 | .5 | 50% | 600px | 40em) | null
Default:  $gutters/2
Length:   space separated multiple values

example:

$container: (
  ".container": ()
);

$grid: (
  ".grid-gutter-left": (
    width: 1/2,
    gutter-left: 0 null 5% 30px
  )
);

gutter-right

Adjust right gutter width (padding-right) at each responsive slice, each value should not be omitted. For example, clear the right gutter have to set gutter-right: 0 0 0 0. In this setting, null means reset to the default gutter width not inherit form the previous value.

Type:     number (1/2 | .5 | 50% | 600px | 40em) | null
Default:  $gutters/2
Length:   space separated multiple values

example:

$container: (
  ".container": ()
);

$grid: (
  ".grid-gutter-right": (
    width: 1/2,
    gutter-right: 0 null .05 30px
  )
);

width

Set fixed grid width at each responsive slice.

Type:     number (1/2 | .5 | 50% | 600px | 40em) | null
Default:  null
Length:   space separated multiple values

example:

$container: (
  ".container": ()
);

$grid: (
  ".grid-width": (
    width: 1 null .5 1/4
  )
);

max-width

Set max width for grid.

Type:     number (1/2 | .5 | 50% | 600px | 40em)
Default:  null
Length:   single value

example:

$container: (
  ".container": ()
);

$grid: (
  ".grid-max-width": (
    max-width: 800px
  )
);

container

Set grid as a container. If this set to true, gutter won’t be outputted.

Type:     boolean
Default:  false
Length:   single value

example:

$container: (
  ".container": ()
);

$grid: (
  ".grid-container": (
    width: 2/3,
    container: true
  )
);