2. Laying out the page

Now that you have some basic HTML properties in place, let's get the content "wrapped" up.

Kickstart includes some simple and effective defaults for keeping proper spacing and expansion on the body of the page. These work seamlessly with grid tools as well.

Wrapper

<div class="wrapper">
  <h1>My page</h1>
  <p>Welcome to my page</p>
</div>

.wrapper {
  @include wrapper();
}

Wrapper styles

Before you start adding components to your page, it's best to decide if you want a fixed, fluid, or fixed-fluid layout.

Fixed layout

A fixed layout simply limits the width of the layout to a certain amount.

For a fixed wrapper, create a fluid wrapper around your content with $fluid; true. Now you just need to limit that fluidity with a max-width property.

For a fixed wrapper, use the .wrapper.wrapper-fixed classes.

The default max-width is about 768px, however, you can define your own by adding a max-width property.

<div class="wrapper">
  <h1>Hello world</h1>
</div>

.wrapper{
  @include wrapper($fluid: true);
  max-width: 700px;
}

<div class="wrapper wrapper-fixed">
  <h1>Hello world</h1>
</div>

.wrapper.wrapper-fixed {
  max-width: 700px; // if 768px is not sufficient
}

Fluid layout

A fluid layout allows the width of the content to match the width of the viewport

For a fluid wrapper use the mixin wrapper($fluid: true)

To have elements break out of a wrapper (called "bleeding"), just end the wrapper before the bleed content and open it back up afterwards.

.wrapper {
  @include wrapper($fluid: true);
}

<div class="wrapper wrapper-fluid">
  ...
</div>

Fluid-fixed layout

This layout is the default behavior for a wrapper in Kickstart and combines the best of both worlds.

Instead of constantly resizing to the size of the viewport, a new fixed width is used at each breakpoint.

Create a wrapper around your content and use the mixin wrapper()and use the .wrapper class.

<div class="wrapper">
  <h1>Hello world</h1>
</div>

.wrapper{
  @include wrapper();
}

<div class="wrapper">
  <h1>Hello world</h1>
</div>