Position

Position is a short-cut mixin to declare position, top, left, bottom, & right all in one go.

#styled-element{
  @include position(absolute, 2px, 16px, auto, 40px);
}

Gives you:

#styled-element{
  position: absolute;
  top: 2px;
  left: 16px;
  bottom: auto;
  right: 40px;
}

Show

@include show() will apply the show class to the item. See the static show class for more information.

Hide

@include hide() will apply the hide class to the item. See the static shaw and hide classes for more information.

Retina Image Replace

Retina Image Replace allows you to easily swap background images for retina screens. It accepts two image urls: standard size and double sized for retina screens. Say we have two logos, one at 400 x 200 and one at 800 x 400:

#esri-logo {
  @include retina-image-replace("logo-esri.jpg", "logo-esri@2x.jpg");
}

The logo element will be exactly the size of the first image and retina users will see the double-sized image scaled down to the correct size for crystal clear retina resolution.

Retina Background Image

The retina-background mixin accepts two image urls, an x dimension and a y dimension and scales them with the background-size attribute.

#styled-element {
  @include retina-image-replace("graphic.jpg", "graphic@2x.jpg", 48px, 48px);
}

If your div is the same size as your image, it's recommended you use the retina-image-replace mixin (10.2.1).

Compatible in IE9+, Firefox 4+, Chrome 4+, Safari 5+.

Respond To

Responsive design is handled with the respond-to mixin. A basic example would look like this:

#styled-element{
  margin-top: 4em;
  @include respond-to($tablet-tall){
    margin-top: 2em;
  }
}

In the above example, the styled element will have 2em of top margin until the window becomes larger than the $tablet-tall breakpoint. Custom or additional breakpoints can be set up in the config file very easily. (See 13.2)

The best way to do responsive shifts in layout is to use columns in conjunction with respond-to for flexible, responsive grids. A simple example would look like this:

#styled-element{
  @include column(8);
  @include respond-to($tablet-wide){
    @include column-width(12);
  }
  @include respond-to($phone-large){
    @include column-width(24);
  }
}

The above example would generate an element that is 33% wide for desktops, 50% wide for tablets, and full-width for phones. Remember to use column-width() if you're declaring the column-width inside the respond-to mixin. See 2.6 Responsive Columns.

Right to Left Helpers

Because all floats, left/right padding and margin, and absolutely positioned items need to be flipped for right-to-left languages (such as arabic and hebrew), a set of mixins are provided to automatically switch for you when a rtl class is added to the body. Below are the available mixins followed by the automatic action takin on right-to-left pages.

.class-of-item {
   @include left(12px, auto); // turns left into right, second value sets left in reversed layout (optional, auto by default)
   @include right(20%, auto); // turns right into left, second value sets right in reversed layout (optional, auto by default)
   @include float(right); // reverses float direction
   @include text-align(left); // reverses text-align direction
   @include padding(12px, 6px, 24px, 2px); // swaps left and right values of the padding
   @include padding-right(12px); // turns padding-left into padding-right
   @include padding-left(12px); // turns padding-right into padding-left
   @inclue margin(12px, 6px, 24px, 2px); // swaps left and right values of margin
   @include margin-right(12px); // turns margin-left into margin-right
   @include margin-left(12px); // turns margin-right into margin-left
}

These rules will get flipped automatically on right to left pages. For example, the following scss:

 .my-class {
   @include float(left);
 }

Will become:

 .my-class {
   float: left;
 }

 .rtl .my-class {
   float: right;
 }

There is also a generic right-to-left mixin for writing custom css for right to left languages.

IE Styles

The for-ie mixin provides the ability to add IE specific styles.

#item-to-style{
  margin-right:10px;
  @include for-ie{
    margin-right: 20px;
  }
}

The above element will have 20px margin-right in IE, but 10px margin-right everywhere else.

In order for these mixins to work you MUST setup your <html> element as follows. This is an extention of the pattern from HTML 5 Boilerplate that adds IE specific classes to the <html> element.

<!--[if lt IE 9]>  <html class="ie lt-ie9 ie8"> <![endif]-->
<!--[if IE 9]>     <html class="ie ie9"> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->

For IE 9

The for-ie9 mixin provides the ability to add IE9 specific styles. Works the same as for-ie.

For IE 8

The for-ie8 mixin provides the ability to add IE8 specific styles. Works the same as for-ie.

Containers

The container mixin and class sets up your grid. The mixin it accepts $width, $max, and $gutter.

By default there is a .container class that you can use. If you need multiple containers with different settings you can use the container mixin to create them.

.narrow-container {
  @include container(100%, 800px, 0);
}

For more on setting the defaults for your grid, see 13.4 Grid Settings.

Mixin Parameters

• $width - Width of the container. Defaults to $container-width (100%).
• $max - Maximum width of the container. Defaults to $container-max (1200px).
• $gutter - Left and right gutter of the container. Defaults to $container-gutter (1em).

Columns

The column mixin adds a specific width to an element. For example:

#item-to-style {
  @include column(12);
}

The item styled above will be 12 columns wide. Since the default $total-columns count is 24, that means it will be half of the parent width. Columns use their parent as 100%, so you can nest columns like this:

#parent-item{
  @include column(12);
  .child-item{
    @include column(12);
  }
}

The .child-item will now be a quarter of the overall container, while the #parent-item will be half of the overall container. In this way columns can be infinitely granular.

Columns use CSS3 box-sizing, so columns can have padding and borders without affecting the layout.

Column-Width

Inside the respond-to mixin, or if the element is already a column, use column-width() instead of column which sets the width without re-declaring all the column styles. For example:

#item-to-style{
  @include column(12);
  @include respond-to($tablet){
    @include column-width(24);
  }
}

No arguments are needed, but the element does need to be a column.

Center Column

The center-column mixin will center the element inside the parent container. To use center-column, simply use:

#item-to-style{
  @include column(12);
  @include center-column();
}

No arguments are needed, but the element does need to be a column.

Last Column

The last-column mixin will float the column right. To use last-column, simply use: You dont need to use this mixin if all your columns, pres, and posts add up to the total number of columns (24).

#item-to-style{
  @include column(12);
  @include last-column();
}

No arguments are needed, but the element does need to be a column.

Pre

The pre mixin adds columns before the element For example:

#item-to-style {
  @include column(12);
  @include pre(2);
}

Post

The post mixin adds columns after the element For example:

#item-to-style{
  @include column(12);
  @include post(2);
}

The item styled above will have two columns of margin-right.

Content Area

Adding a content area class to your container will help style the header elements within your content, adding leader and trailer, and helping preserve vertical rhythm and baseline.

.container{
  @extend %content-area;
}

For styles generated with content area, see the content area pattern documentation.

Panels

"Panel" is a generic class that can be extended with colors and borders by using the @extend directive.

#styled-element{
  @extend %panel;
}

The banner class can also be added to an html element by giving it a class of "panel":

Modifiers

• .primary - Applies the primary color (set in config)
• .white - Applies the seconary color (set in config)
• .drop-shadow - Applies a subtle drop shadow for modals (set in config)

Full

@extend %full applies a common set of styles for elements that need to be name fullscreen but have no content (maps, modals, etc). It gives you the following css:

#styled-element {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

Clearfix

@extend %clearfix will apply the clearfix class to the item. See the static clearfix class for more information.