Echo helpers

There are a couple of helpers built in to Snowfire to make it simple to keep the same content width and breakpoints throughout blocks.

Container

You can add the container class to a <div> in a block to set a max width, center the content and add default paddings.

<div class="echo-container-xs">I'm 430px wide</div>

<div class="echo-container-sm">I'm 730px wide</div>

<div class="echo-container-md">I'm 1170px wide</div>

<div class="echo-container-lg">I'm 1440px wide</div>

Most default blocks are using the md size, and the sm size for text content. We recommend starting of with <div class="echo-container-md"></div>

Breakpoints

When writing CSS you can use our breakpoint helper when you want a different behaviour on a certain screen size.

h1 {
     font-size: 36px;

     @include echo-breakpoint-down(xs) {
          font-size: 16px;
     }
}

The code above will set font-size to 16px when a device has a screen smaller than 567px.

Sizes

  • xs – 567px, phones
  • sm – 768px, portrait tablets
  • md – 992px, landscape tablets
  • lg – 1200px, laptops