Blueprint Rtl

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

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

View the Source for this module on Github.

Imports

The following sass files are automatically imported when you import this file:

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

Configurable Variables help

Value
24
Description

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

Value
30px

Value
10px

Constants

Value
$blueprint_grid_width + $blueprint_grid_margin

Value
$blueprint_grid_outer_width * $blueprint_grid_columns - $blueprint_grid_margin

Mixins

View Source: Sass | SCSS 

=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: Sass | SCSS 

=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: Sass | SCSS 

=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: Sass | SCSS 

=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: Sass | SCSS 

=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: Sass | SCSS 

=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: Sass | SCSS 

=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: Sass | SCSS 

=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: Sass | SCSS 

=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: Sass | SCSS 

=rtl-typography($body_selector: body)
  @if $body_selector == true
    html &
      font-family: Arial, sans-serif
    +rtl-typography-defaults
  @else
    html #{$body_selector}
      font-family: Arial, sans-serif
      @if $body_selector != "body"
        @warn "[DEPRECATED] To specify a the selector \"#{$body_selector}\\" to +rtl-typography, pass true as the first argument and mix it into #{$body_selector}."
        +rtl-typography-defaults
    @if $body_selector == "body"
      body
        +rtl-typography-defaults

@mixin rtl-typography($body_selector: body) {
  @if $body_selector == true {
    html & {
      font-family: Arial, sans-serif; }
    @include rtl-typography-defaults; }
  @else {
    html #{$body_selector} {
      font-family: Arial, sans-serif;
      @if $body_selector != "body" {
        @warn "[DEPRECATED] To specify a the selector \"#{$body_selector}\\" to +rtl-typography, pass true as the first argument and mix it into #{$body_selector}.";
        @include rtl-typography-defaults; } }
    @if $body_selector == "body" {
      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)

Deprecated: You can pass the body selector as the first argument when used as a top-level mixin

+rtl-typography("body#page-1, body#page-2, body.a-special-page-type")
View Source: Sass | SCSS 

=rtl-typography-defaults
  h1, h2, h3, h4, h5, h6
    font-family: Arial, sans-serif
  pre, code, tt
    font-family: monospace
  p
    img.right
      +float-left
      margin: 1.5em 1.5em 1.5em 0
      padding: 0
    img.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; }
  p {
    img.right {
      @include float-left;
      margin: 1.5em 1.5em 1.5em 0;
      padding: 0; }
    img.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; } }