Source on Github

Blueprint Rtl

For grids with use in right-to-left languages.

This file can be imported using: @import "blueprint/rtl"

Imports

  1. Float – Mixins for cross-browser floats.
  2. Grid

Configurable Variables help

24

Main layout grid, override these constants to build your grid and container sizes.

30px

10px

Constants

$blueprint-grid-width + $blueprint-grid-margin

$blueprint-grid-outer-width * $blueprint-grid-columns - $blueprint-grid-margin

Mixins

view source 

=container
  width: $blueprint-container-size
  margin: 0 auto
  direction: rtl
  +clearfix

@mixin container {
  width: $blueprint-container-size;
  margin: 0 auto;
  direction: rtl;
  @include clearfix;
}

Columns Note: If you use this mixin without the class and want to support ie6

  you must set text-align left on your container element in an IE stylesheet.
view source 

=last
  margin-left: 0

@mixin last {
  margin-left: 0;
}

The last column in a row needs this mixin or it will end up on the next row. TODO add this to span mixin when we have optional arguments

view source 

=column-base($last: false)
  +float-right
  @if $last
    +last
  @else
    margin-left: $blueprint-grid-margin
  text-align: right
  * html &
    overflow-x: hidden

@mixin column-base($last: false) {
  @include float-right;
  @if $last {
    @include last;
  }
  @else {
    margin-left: $blueprint-grid-margin;
  }
  text-align: right;
  * html & {
    overflow-x: hidden;
  }
}
view source 

=append($n)
  padding-left: $blueprint-grid-outer-width * $n

@mixin append($n) {
  padding-left: $blueprint-grid-outer-width * $n;
}

Mixin to a column to append n empty cols.

view source 

=prepend($n)
  padding-right: $blueprint-grid-outer-width * $n

@mixin prepend($n) {
  padding-right: $blueprint-grid-outer-width * $n;
}

Mixin to a column to prepend n empty cols.

view source 

=pull($n, $last: false)
  position: relative
  @if $last
    margin-right: -$blueprint-grid-outer-width * $n + $blueprint-grid-margin
  @else
    margin-right: -$blueprint-grid-outer-width * $n

@mixin pull($n, $last: false) {
  position: relative;
  @if $last {
    margin-right: -$blueprint-grid-outer-width * $n + $blueprint-grid-margin;
  }
  @else {
    margin-right: -$blueprint-grid-outer-width * $n;
  }
}

mixin to a column to move it n columns to the left

view source 

=push($n)
  +float-right
  position: relative
  margin:
    top: 0
    left: -$blueprint-grid-outer-width * $n
    bottom: 1.5em
    right: $blueprint-grid-outer-width * $n

@mixin push($n) {
  @include float-right;
  position: relative;
  margin: {
    top: 0;
    left: -$blueprint-grid-outer-width * $n;
    bottom: 1.5em;
    right: $blueprint-grid-outer-width * $n;
  };
}

mixin to a column to push it n columns to the right

view source 

=border
  padding-left: $blueprint-grid-margin / 2 - 1
  margin-left: $blueprint-grid-margin / 2
  border-left: 1px solid #eeeeee

@mixin border {
  padding-left: $blueprint-grid-margin / 2 - 1;
  margin-left: $blueprint-grid-margin / 2;
  border-left: 1px solid #eeeeee;
}

Border on left hand side of a column.

view source 

=colborder
  padding-left: ($blueprint-grid-width - 2 * $blueprint-grid-margin - 1) / 2
  margin-left: ($blueprint-grid-width - 2 * $blueprint-grid-margin) / 2
  border-left: 1px solid #eeeeee

@mixin colborder {
  padding-left: ($blueprint-grid-width - 2 * $blueprint-grid-margin - 1) / 2;
  margin-left: ($blueprint-grid-width - 2 * $blueprint-grid-margin) / 2;
  border-left: 1px solid #eeeeee;
}

Border with more whitespace, spans one column.

view source 

=rtl-typography($nested: false)
  @if $nested
    html &
      font-family: Arial, sans-serif
    +rtl-typography-defaults
  @else
    html body
      font-family: Arial, sans-serif
    body
      +rtl-typography-defaults

@mixin rtl-typography($nested: false) {
  @if $nested {
    html & {
      font-family: Arial, sans-serif;
    }
    @include rtl-typography-defaults;
  }
  @else {
    html body {
      font-family: Arial, sans-serif;
    }
    body {
      @include rtl-typography-defaults;
    }
  }
}

Usage examples: As a top-level mixin, apply to any page that includes the stylesheet:

+rtl-typography

Scoped by a presentational class:

body.blueprint
 +rtl-typography(true)

Scoped by semantic selectors:

body#page-1, body#page-2, body.a-special-page-type
  +rtl-typography(true)
view source 

=rtl-typography-defaults
  h1, h2, h3, h4, h5, h6
    font-family: Arial, sans-serif
  pre, code, tt
    font-family: monospace
  .right
    +float-left
    margin: 1.5em 1.5em 1.5em 0
    padding: 0
  .left
    +float-right
    margin: 1.5em 0 1.5em 1.5em
    padding: 0
  dd, ul, ol
    margin-left: 0
    margin-right: 1.5em
  td, th
    text-align: right

@mixin rtl-typography-defaults {
  h1, h2, h3, h4, h5, h6 {
    font-family: Arial, sans-serif;
  }
  pre, code, tt {
    font-family: monospace;
  }
  .right {
    @include float-left;
    margin: 1.5em 1.5em 1.5em 0;
    padding: 0;
  }
  .left {
    @include float-right;
    margin: 1.5em 0 1.5em 1.5em;
    padding: 0;
  }
  dd, ul, ol {
    margin-left: 0;
    margin-right: 1.5em;
  }
  td, th {
    text-align: right;
  }
}