Rocket - docs

Docs v4
Docs v3

Make sure you have read the Guide (especially parameter section) before using this docs.

Layout

Layout setting

Default container for container and gutter for container, grid, gallery, liquid-2, liquid-3, metro and masonry.

scss

$ro-layout: (
  container: 1024px,
  gutter: 20px,
);

Container

Create a container to constrain your content. The container can be pushed to the left, right edge or center aligned.

IE 7+, Firefox 4+, Chrome 19+, Safari 6+, Opera 15+

scss: syntax

@mixin container($container ('gutter' $gutter) $alignment)
// $container: px | em | %
// $gutter: px | em | %
// $alignment: left | right | center

Make a 600px width container:

markup

<div class="container1" data-content>
  <!-- contents -->
</div>

scss

.container1 { @include container(600px); }

Change gutter and alignment:

markup

<div class="container2" data-content>
  <!-- contents -->
</div>

scss

.container2 {
  @include container(800px gutter 2% left);
}

Grid

Create a responsive multi columns (and even multi rows) layout using grid.

IE 8+, Firefox 28+, Chrome 21+, Safari 6.2+, Opera 15+

scss: syntax

@mixin grid($grid ('gutter' $gutter) ('child' $child) $breakpoints $condition $media-type $direction 'keep')
// $grid: list | map
// $condition: 'min' | 'max'
// $media-type: media types
// $breakpoints: map, e.g. (small: 640px, medium: 768px, large: 1024px)
// $direction: LTR | RTL

@include grid on the parent element, pass a number list (make sure the number list count is the same with the child elements count) as a parameter.

markup

<div class="grid1">
  <div data-content></div>
  <div data-content></div>
  <div data-content></div>
</div>

scss

.grid1 { @include grid( (3 7 4) ); }
// 1st div child: 3 columns;
// 2nd div child: 7 columns;
// 3rd div child: 4 columns;

Change the column order using (cols : order) format.

The order works the same way as flexbox-order. Basically smaller order column will goes left, bigger goes right, equal orders will go with their original order in the markup from left to right.

markup

<div class="grid2">
  <div data-content>1</div>
  <div data-content>2</div>
  <div data-content>3</div>
</div>

scss

.grid2 { @include grid( (3 7 4 : 1 0 0) ); }
// or (3:1, 7:0, 4:0)
// orders: 1 0 0. The first div child will go last.

The child elements can be separated to multi rows using a nested list. ( (row1 row1 row1) (row2 row2) (row3 row3 row3)) indicate 3 rows, the first row include 3 columns, 2rd row 2 columns, 3rd row 3 columns.

markup

<div class="grid3">
  <div data-content>1</div>
  <div data-content>2</div>
  <div data-content>3</div>
  <div data-content>4</div>
  <div data-content>5</div>
</div>

scss

$main: ( (3 7 4) (2 5) );
.grid3 { @include grid($main); }
// 1st row: (3 7 4)
// 2nd row: (2 5)

If the child elements are not divs, indicate them using child $selector format.

markup

<div class="grid4">
  <section data-content>1</section>
  <section data-content>2</section>
</div>

scss

.grid4 { @include grid( (2 5) child section); }

grid works with breakpoints to make multi layouts for different devices.

markup

<div class="grid5">
  <div data-content>1</div>
  <div data-content>2</div>
  <div data-content>3</div>
  <div data-content>4</div>
  <div data-content>5</div>
</div>

scss

$breakpoints: (
  medium: 800px,
  large: 1200px,
);
$main: (
  'default': (3 4) ( 2 5) 1,
  medium: (2 7 3: 1 0 1) (1 1: 1 0),
  1000px: (2 7 3 4 4),
);
.grid5 { @include grid($main $breakpoints); }

Liquid-2

Make a fluid 2-columns blog layout, with a fixed sidebar and a fluid main column.

IE 8+, Firefox 4+, Chrome 19+, Safari 6+, Opera 15+

scss: syntax

@mixin liquid-2($layout ('gutter' $gutter) ('child' $child) $breakpoints $condition $media-type $direction)
// $layout: list | map
// $condition: 'min' | 'max'
// $media-type: media types
// $breakpoints: map, e.g. (small: 640px, medium: 768px, large: 1024px)
// $direction: LTR | RTL

Use string 'auto' to indicate the fluid main column.

markup

<div class="liquid-2-1">
  <div data-content>1</div>
  <div data-content>2</div>
</div>

scss

.liquid-2-1 { @include liquid-2( ('auto' 200px) ); }
// 1st column: fluid;
// 2nd column: 200px;

Change the order using a map and gutter using a keyword 'gutter'.

markup

<div class="liquid-2-2">
  <div data-content>1</div>
  <div data-content>2</div>
</div>

scss

.liquid-2-2 {
  @include liquid-2( ('auto' 200px : 2 1) gutter 10px);
}
// order: 2 1;

Works with breakpoint.

markup

<div class="liquid-2-3">
  <div data-content>1</div>
  <div data-content>2</div>
</div>

scss

.liquid-2-3 {
  @include liquid-2( (600px: ('auto':2, 200px:1)) min screen );
}

If the child elements are not divs, indicate them using child ($selector1 $selector2) format in the parameter.

markup

<div class="liquid-2-4">
  <main data-content>1</main>
  <aside data-content>2</aside>
</div>

scss

.liquid-2-4 { @include liquid-2( ('auto' 200px) child (main aside) ); }
// 1st column: fluid;
// 2nd column: 200px;

Liquid-3

Make a holy-grail layout: 2 fixed sidebars with a fluid main column.

IE 8+, Firefox 4+, Chrome 19+, Safari 6+, Opera 15+

scss: syntax

@mixin liquid-3($layout ('gutter' $gutter) ('child' $child) $breakpoints $condition $media-type $direction)
// $layout: list | map
// $condition: 'min' | 'max'
// $media-type: media types
// $breakpoints: map, e.g. (small: 640px, medium: 768px, large: 1024px)
// $direction: LTR | RTL

Use string 'auto' to indicate the fluid main column.

markup

<div class="liquid-3-1">
  <div data-content>sidebar1</div>
  <div data-content>main</div>
  <div data-content>sidebar2</div>
</div>

scss

.liquid-3-1 { @include liquid-3( (150px 'auto' 200px) ); }
// 1st column: 150px;
// 2nd column: fluid;
// 3rd column: 200px;

sidebar1

main

sidebar2

Same with liquid-2, you can change the order using a map and gutter using a keyword 'gutter'.

markup

<div class="liquid-3-2">
  <div data-content>sidebar1</div>
  <div data-content>main</div>
  <div data-content>sidebar2</div>
</div>

scss

.liquid-3-2 { 
  @include liquid-3( (150px 'auto' 200px : 0 2 1) gutter 30px ); 
}
// order: 0 2 1;

sidebar1

main

sidebar2

Works with breakpoint.

markup

<div class="liquid-3-3">
  <div data-content>sidebar1</div>
  <div data-content>main</div>
  <div data-content>sidebar2</div>
</div>

scss

.liquid-3-3 { 
  @include liquid-3( (600px: (150px:0, 'auto':2, 200px:1)) gutter 30px); 
}

sidebar1

main

sidebar2

If the child elements are not divs, indicate them using child ($selector1 $selector2 $selector3) format in the parameter.

markup

<div class="liquid-3-4">
  <nav data-content>sidebar1</nav>
  <main data-content>main</main>
  <aside data-content>sidebar2</aside>
</div>

scss

.liquid-3-4 { 
  @include liquid-3( (150px, 'auto', 200px) child (nav main aside)); 
}

main

Gallery

Make a photo gallery layout.

IE 8+, Firefox 3.6+, Chrome 21+, Safari 6.2+, Opera 15+

scss: syntax

@mixin gallery($layout ('gutter' $gutter) ('child' $child) $breakpoints $condition $media-type $direction 'keep');
// $layout: number | map
// $condition: 'min' | 'max'
// $media-type: media types
// $breakpoints: map, e.g. (small: 640px, medium: 768px, large: 1024px)
// $direction: LTR | RTL

markup

<ul class="gallery-1">
  <li><div data-content></div></li>
  <li><div data-content></div></li>
  <li><div data-content></div></li>
  <li><div data-content></div></li>
  <li><div data-content></div></li>
</ul>

scss
```
.gallery-1 { @include gallery(3); }
```

You can change the gutter and direction.

markup

<ul class="gallery-2">
  <li><div data-content>1</div></li>
  <li><div data-content>2</div></li>
  <li><div data-content>3</div></li>
  <li><div data-content>4</div></li>
  <li><div data-content>5</div></li>
</ul>

scss

.gallery-2 { @include gallery(4 gutter 2% RTL); }
// gutter: 2%;
// direction: right-to-left

Use breakpoints to make it works on multi devices.

markup

<ul class="gallery-3">
  <li><div data-content></div></li>
  <li><div data-content></div></li>
  <li><div data-content></div></li>
  <li><div data-content></div></li>
  <li><div data-content></div></li>
</ul>

scss

.gallery-3 {
  @include gallery( ('default': 2, 600px: 3, 800px: 4) ); 
}
// default: 2 items per row
// 600px and up: 3 items per row
// 800px and up: 4 items per row

If the child elements are not lis, indicate them using child $selector format in the parameter.

markup

<div class="gallery-4">
  <div><div data-content></div></div>
  <div><div data-content></div></div>
  <div><div data-content></div></div>
  <div><div data-content></div></div>
  <div><div data-content></div></div>
</div>

scss

.gallery-4 { @include gallery(3 child div); }

Masonry

Using CSS3 multiple-column layout to make masonry layout.

IE 10+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 11.5+

scss: syntax

@mixin masonry($layout ('gutter' $gutter) ('child' $child) $breakpoints $condition $media-type 'keep');
// $layout: number | map
// $condition: 'min' | 'max'
// $media-type: media types
// $breakpoints: map, e.g. (small: 640px, medium: 768px, large: 1024px)

// *** fallback: IE9- *** //
.no-csscolumns {
  .masonry {
    text-align: center;
    > li {
      display: inline-block;
      vertical-align: top;
      width: 250px;
      margin: 0 20px 20px 0;
      text-align: left;
    }
  }
}

markup

<ul class="masonry-1">
  <li><div data-content><img class="full" src="http://placehold.it/300x300/cccccc/cccccc" alt="" /><p>1. Lorem ipsum dolor sit amet, incidunt voluptatibus in, labore itaque consequuntur facere blanditiis! Debitis nihil reiciendis, cum quis vitae non eveniet laudantium?</p></div></li>
  <li><div data-content><img class="full" src="http://placehold.it/300x100/cccccc/cccccc" alt="" /><p>2. Porro cupiditate suscipit, repellat non doloribus dicta possimus hic magni facere ipsa minima laboriosam eum magnam, expedita ratione saepe neque id. Adipisci.</p></div></li>
  <li><div data-content><img class="full" src="http://placehold.it/300x200/cccccc/cccccc" alt="" /><p>3. Deserunt dolorum eum obcaecati, nihil optio reprehenderit sapiente. Accusantium illum officiis natus inventore quo. Possimus id architecto, ut impedit eveniet numquam voluptates.</p></div></li>
  <li><div data-content><img class="full" src="http://placehold.it/300x400/cccccc/cccccc" alt="" /><p>4. Est fugiat reprehenderit, maiores. Vero facilis porro aspernatur doloribus, minus, sunt, unde quibusdam modi at nulla reiciendis nihil commodi deserunt nemo dignissimos. Voluptatum quisquam nam fuga, ut odit dolore explicabo?</p></div></li>
  <li><div data-content><img class="full" src="http://placehold.it/300x200/cccccc/cccccc" alt="" /><p>5. Obcaecati modi molestiae debitis expedita enim praesentium dignissimos, consequuntur excepturi magni velit tenetur earum? Assumenda quam facilis, incidunt obcaecati dignissimos laboriosam qui magnam aliquid dolorem asperiores?</p></div></li>
  <li><div data-content><img class="full" src="http://placehold.it/300x100/cccccc/cccccc" alt="" /><p>6. Perferendis unde ullam fugiat sapiente error explicabo quam reprehenderit, dolorum.</p></div></li>
</ul>

scss
```
.masonry-1 { @include masonry(3); }
```

1. Lorem ipsum dolor sit amet, incidunt voluptatibus in, labore itaque consequuntur facere blanditiis! Debitis nihil reiciendis, cum quis vitae non eveniet laudantium?
2. Porro cupiditate suscipit, repellat non doloribus dicta possimus hic magni facere ipsa minima laboriosam eum magnam, expedita ratione saepe neque id. Adipisci.
3. Deserunt dolorum eum obcaecati, nihil optio reprehenderit sapiente. Accusantium illum officiis natus inventore quo. Possimus id architecto, ut impedit eveniet numquam voluptates.
4. Est fugiat reprehenderit, maiores. Vero facilis porro aspernatur doloribus, minus, sunt, unde quibusdam modi at nulla reiciendis nihil commodi deserunt nemo dignissimos. Voluptatum quisquam nam fuga, ut odit dolore explicabo?
5. Obcaecati modi molestiae debitis expedita enim praesentium dignissimos, consequuntur excepturi magni velit tenetur earum? Assumenda quam facilis, incidunt obcaecati dignissimos laboriosam qui magnam aliquid dolorem asperiores?
6. Perferendis unde ullam fugiat sapiente error explicabo quam reprehenderit, dolorum.

Change gutter.

markup

<ul class="masonry-2">
  <li><div data-content><img class="full" src="http://placehold.it/300x300/cccccc/cccccc" alt="" /><p>1. Lorem ipsum dolor sit amet, incidunt voluptatibus in, labore itaque consequuntur facere blanditiis! Debitis nihil reiciendis, cum quis vitae non eveniet laudantium?</p></div></li>
  <li><div data-content><img class="full" src="http://placehold.it/300x100/cccccc/cccccc" alt="" /><p>2. Porro cupiditate suscipit, repellat non doloribus dicta possimus hic magni facere ipsa minima laboriosam eum magnam, expedita ratione saepe neque id. Adipisci.</p></div></li>
  <li><div data-content><img class="full" src="http://placehold.it/300x200/cccccc/cccccc" alt="" /><p>3. Deserunt dolorum eum obcaecati, nihil optio reprehenderit sapiente. Accusantium illum officiis natus inventore quo. Possimus id architecto, ut impedit eveniet numquam voluptates.</p></div></li>
  <li><div data-content><img class="full" src="http://placehold.it/300x400/cccccc/cccccc" alt="" /><p>4. Est fugiat reprehenderit, maiores. Vero facilis porro aspernatur doloribus, minus, sunt, unde quibusdam modi at nulla reiciendis nihil commodi deserunt nemo dignissimos. Voluptatum quisquam nam fuga, ut odit dolore explicabo?</p></div></li>
  <li><div data-content><img class="full" src="http://placehold.it/300x200/cccccc/cccccc" alt="" /><p>5. Obcaecati modi molestiae debitis expedita enim praesentium dignissimos, consequuntur excepturi magni velit tenetur earum? Assumenda quam facilis, incidunt obcaecati dignissimos laboriosam qui magnam aliquid dolorem asperiores?</p></div></li>
  <li><div data-content><img class="full" src="http://placehold.it/300x100/cccccc/cccccc" alt="" /><p>6. Perferendis unde ullam fugiat sapiente error explicabo quam reprehenderit, dolorum.</p></div></li>
</ul>

scss

.masonry-2 { @include masonry(4 gutter 20px); }

1. Lorem ipsum dolor sit amet, incidunt voluptatibus in, labore itaque consequuntur facere blanditiis! Debitis nihil reiciendis, cum quis vitae non eveniet laudantium?
2. Porro cupiditate suscipit, repellat non doloribus dicta possimus hic magni facere ipsa minima laboriosam eum magnam, expedita ratione saepe neque id. Adipisci.
3. Deserunt dolorum eum obcaecati, nihil optio reprehenderit sapiente. Accusantium illum officiis natus inventore quo. Possimus id architecto, ut impedit eveniet numquam voluptates.
4. Est fugiat reprehenderit, maiores. Vero facilis porro aspernatur doloribus, minus, sunt, unde quibusdam modi at nulla reiciendis nihil commodi deserunt nemo dignissimos. Voluptatum quisquam nam fuga, ut odit dolore explicabo?
5. Obcaecati modi molestiae debitis expedita enim praesentium dignissimos, consequuntur excepturi magni velit tenetur earum? Assumenda quam facilis, incidunt obcaecati dignissimos laboriosam qui magnam aliquid dolorem asperiores?
6. Perferendis unde ullam fugiat sapiente error explicabo quam reprehenderit, dolorum.

Works with breakpoints.
Use 'default' to indicate default setting. If child elements are not lis, indicate them with child $selector format.

markup

<div class="masonry-3">
  <div class="panel"><div data-content><img class="full" src="http://placehold.it/300x300/cccccc/cccccc" alt="" /><p>1. Lorem ipsum dolor sit amet, incidunt voluptatibus in, labore itaque consequuntur facere blanditiis! Debitis nihil reiciendis, cum quis vitae non eveniet laudantium?</p></div></div>
  <div class="panel"><div data-content><img class="full" src="http://placehold.it/300x100/cccccc/cccccc" alt="" /><p>2. Porro cupiditate suscipit, repellat non doloribus dicta possimus hic magni facere ipsa minima laboriosam eum magnam, expedita ratione saepe neque id. Adipisci.</p></div></div>
  <div class="panel"><div data-content><img class="full" src="http://placehold.it/300x200/cccccc/cccccc" alt="" /><p>3. Deserunt dolorum eum obcaecati, nihil optio reprehenderit sapiente. Accusantium illum officiis natus inventore quo. Possimus id architecto, ut impedit eveniet numquam voluptates.</p></div></div>
  <div class="panel"><div data-content><img class="full" src="http://placehold.it/300x400/cccccc/cccccc" alt="" /><p>4. Est fugiat reprehenderit, maiores. Vero facilis porro aspernatur doloribus, minus, sunt, unde quibusdam modi at nulla reiciendis nihil commodi deserunt nemo dignissimos. Voluptatum quisquam nam fuga, ut odit dolore explicabo?</p></div></div>
  <div class="panel"><div data-content><img class="full" src="http://placehold.it/300x200/cccccc/cccccc" alt="" /><p>5. Obcaecati modi molestiae debitis expedita enim praesentium dignissimos, consequuntur excepturi magni velit tenetur earum? Assumenda quam facilis, incidunt obcaecati dignissimos laboriosam qui magnam aliquid dolorem asperiores?</p></div></div>
  <div class="panel"><div data-content><img class="full" src="http://placehold.it/300x100/cccccc/cccccc" alt="" /><p>6. Perferendis unde ullam fugiat sapiente error explicabo quam reprehenderit, dolorum.</p></div></div>
</div>

scss

$masonry-3-layout: (
  'default': 1, 
  600px: 2, 
  768px: 3, 
  1024px: 4
);
.masonry-3 { @include masonry($masonry-3-layout child '.panel'); }

1. Lorem ipsum dolor sit amet, incidunt voluptatibus in, labore itaque consequuntur facere blanditiis! Debitis nihil reiciendis, cum quis vitae non eveniet laudantium?

2. Porro cupiditate suscipit, repellat non doloribus dicta possimus hic magni facere ipsa minima laboriosam eum magnam, expedita ratione saepe neque id. Adipisci.

3. Deserunt dolorum eum obcaecati, nihil optio reprehenderit sapiente. Accusantium illum officiis natus inventore quo. Possimus id architecto, ut impedit eveniet numquam voluptates.

4. Est fugiat reprehenderit, maiores. Vero facilis porro aspernatur doloribus, minus, sunt, unde quibusdam modi at nulla reiciendis nihil commodi deserunt nemo dignissimos. Voluptatum quisquam nam fuga, ut odit dolore explicabo?

5. Obcaecati modi molestiae debitis expedita enim praesentium dignissimos, consequuntur excepturi magni velit tenetur earum? Assumenda quam facilis, incidunt obcaecati dignissimos laboriosam qui magnam aliquid dolorem asperiores?

6. Perferendis unde ullam fugiat sapiente error explicabo quam reprehenderit, dolorum.

Metro

Make a (Windows 8 style) metro layout.

IE 8+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

scss: syntax

@mixin metro($layout (ratio $ratio) ('gutter' $gutter) ('child' $child) $breakpoints $condition $media-type 'keep')
// $layout: list | map
// $condition: 'min' | 'max'
// $media-type: media types
// $breakpoints: map, e.g. (small: 640px, medium: 768px, large: 1024px)

Use ul > li, ol > li or div > div HTML structure. Wrap the content with .metro-item.

markup

<ul class="metro">
  <li><div class="metro-item"></div></li>
  <li><div class="metro-item"></div></li>
  <li><div class="metro-item"></div></li>
  <li><div class="metro-item"></div></li>
  <li><div class="metro-item"></div></li>
</ul>

Use list ($col $col $col $col of $count) or map ($breakpoint: ($col $col $col $col of $count)) to make the layout.

The idea is to set up a minimum width unit, each column compare with this unit to get the data. If the column width and height are both double size of the unit, use 2. If width is double, heigt is one unit, use w2 (which means 'width 2X'). w3h4 means 3 units of width and 4 units of height. h3 means one unit of width and 3 units of height. And of 5 indicate the width unit is 1/5 of parent width.

markup

<ul class="metro-1">
  <li><div class="metro-item"><div data-content></div></div></li>
  <li><div class="metro-item"><div data-content></div></div></li>
  <li><div class="metro-item"><div data-content></div></div></li>
  <li><div class="metro-item"><div data-content></div></div></li>
  <li><div class="metro-item"><div data-content></div></div></li>
  <li><div class="metro-item"><div data-content></div></div></li>
</ul>

scss

.metro-1 { 
  @include metro( (w5 w3 2 h2 w2 w4 of 5) gutter 10px); 
  > li:nth-child(3) { float: right; };
}
// w5: 5 units width x 1 units height
// 2: 2 units width x 2 units height
// h2: 1 units width x 2 units height
// "of 5": totaly 5 units width;

Diamond

Make diamond (octagon) shape layout. To reduce complexity, diamond requires .diamond-content to wrap its content.

IE 9+, Firefox 3.6+, Chrome 15+, Safari 5.1+, Opera 11.5+

scss: syntax

@mixin diamond(($count / $size) $shape 'tight' 'keep')
// $shape: 'diamond' | 'octagon'

Use .diamond-content to wrap the content.

markup

<div class="your-class">
  <div class="diamond-content">Content goes here</div>
</div>

Use keyword 'tight' to make the blocks combined tightly, without gap.

markup

<div class="diamond-1">
  <div class="diamond-content" data-content>
    <div>content</div>
  </div>
</div>
<div class="diamond-1">
  <div class="diamond-content" data-content>
    <div>content</div>
  </div>
</div>
<div class="diamond-1">
  <div class="diamond-content" data-content>
    <div>content</div>
  </div>
</div>
<div class="diamond-1">
  <div class="diamond-content" data-content>
    <div>content</div>
  </div>
</div>
<div class="diamond-1">
  <div class="diamond-content" data-content>
    <div>content</div>
  </div>
</div>

scss

.diamond-1 { @include diamond(3 'tight'); }

content

You can use size instead of count.

markup

<div class="diamond-2">
  <div class="diamond-content" data-content>
    <div>content</div>
  </div>
</div>

scss

.diamond-2 { @include diamond(20%); }
// diamond width: 20%

content

Use octagon shape.

markup

<div class="diamond-3">
  <div class="diamond-content" data-content>
    <div>content</div>
  </div>
</div>

scss

.diamond-3 { @include diamond(octagon 200px); }
// diamond width: 200px

content

Angled-edges

Make angled edges layout.

IE 8+, Firefox 3.6+, Chrome 15+, Safari 6+, Opera 10.6+

scss: syntax

@mixin angled-edges($edges $angle $edge-color 'flip');
// $edges: top | bottom | both
// $edge-color: deg

markup

<div class="angled-edges-sibling">
  <p>Quis ab placeat totam beatae dolorum, harum omnis tempora dolore exercitationem quia, soluta qui deleniti numquam.</p>
</div>
<div class="angled-edges-1">
  <p>Ipsam ducimus velit iure voluptatum, voluptate perferendis, asperiores, perspiciatis blanditiis autem exercitationem repellendus, rem ea reprehenderit.</p>
  <p>Enim itaque pariatur nulla, iste unde similique nemo obcaecati odio omnis! Animi earum praesentium et maxime.</p>
  <p>Obcaecati rerum consequatur quae itaque ratione, dolor, similique sit, earum distinctio enim consectetur eius quam nisi.</p>
</div>
<div class="angled-edges-sibling">
  <p>Libero eum accusamus molestiae cum recusandae. Omnis doloremque eos amet, saepe minima fugiat inventore? Non, quaerat.</p>
</div>

scss

.angled-edges-1 {
  @include angled-edges(both #fff -5deg flip);
  background-color: #58CAFF;
}

Quis ab placeat totam beatae dolorum, harum omnis tempora dolore exercitationem quia, soluta qui deleniti numquam.

Ipsam ducimus velit iure voluptatum, voluptate perferendis, asperiores, perspiciatis blanditiis autem exercitationem repellendus, rem ea reprehenderit.

Enim itaque pariatur nulla, iste unde similique nemo obcaecati odio omnis! Animi earum praesentium et maxime.

Obcaecati rerum consequatur quae itaque ratione, dolor, similique sit, earum distinctio enim consectetur eius quam nisi.

Libero eum accusamus molestiae cum recusandae. Omnis doloremque eos amet, saepe minima fugiat inventore? Non, quaerat.

Sticky-footer

Create sticky-footer to prevent layout collapse when content is less, e.g. 404 page.

IE 8+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 12.1+

scss: syntax

@mixin sticky-footer($selector);

markup

<div class="sticky-footer-1">
  <header>header</header>
  <main>main</main>
  <footer>footer</footer>
</div>

scss

.sticky-footer-1 {
  @include sticky-footer('main'); 
  header, main, footer { padding: 10px; background-color: #f5f5f5; }
  main { background-color: #FBA158; }
}

Justify

Make child elements justify aligned.

IE 8+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 12.1+

scss: syntax

@mixin justify(($selector));

markup

<ul class="justify-1">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

scss
```
.justify-1 { @include justify('li'); }
```

Center

Make child element horizontally and vertically center aligned.

IE 8+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 12.1+

scss: syntax

@mixin center($selector)

markup

<div class="center-1">
  <div>The child element is center aligned.</div>
</div>

scss

.center-1 {
  @include center();
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  > div { display: inline-block; padding: 10px; background-color: #FBA158; }
}

The child element is center aligned.

Components

Charts

Pure css responsive charts.

IE 8+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

scss: syntax

@mixin charts($data $chart-type ('bar-height' $bar-height) ('bar-gap' $bar-gap) ('steps' $steps) ('gutter' $gutter) ('animation' $animation-val) ('hide' $hide))
// $data: map. (color: data, color: data, ...)
// $chart-type: bar | column
// $bar-gap: px | em. Required if mode is "bar".
// $bar-height: px | em
// $steps: list. (step count)

Use the following HTML structure.

.items is the body of the chart. Inside each item, <strong>s indicate the item title, empty <span>s indicate the graphic.

.ticks will be used to show scale lines. The empty <span>s inside it will be used to display the scale numbers.

.labels will be used to show the labels.

markup

<div class="your-chart">
  <ul class="items">
    <li class="item-1"><strong>title1</strong><span></span></li>
    <li class="item-2"><strong>title2</strong><span></span></li>
    <li class="item-3"><strong>title3</strong><span></span></li>
    <li class="item-4"><strong>title4</strong><span></span></li>
    <li class="item-5"><strong>title5</strong><span></span></li>
  </ul>
  <div class="ticks">
    <div class="tick-1"><span></span></div>
    <div class="tick-2"><span></span></div>
    <div class="tick-3"><span></span></div>
    <div class="tick-4"><span></span></div>
    <div class="tick-5"><span></span></div>
  </div>
  <div class="labels">
    <div class="label-1">label</div>
  </div>
</div>

markup

<div class="charts-1">
  <!-- items: charts body -->
  <ul class="items">
    <li class="item-1">
      <strong>Copper</strong>
      <!-- title -->
      <span></span>
      <!-- graphic -->
    </li>
    <li class="item-2">
      <strong>Silver</strong>
      <span></span>
    </li>
    <li class="item-3">
      <strong>Gold</strong>
      <span></span>
    </li>
    <li class="item-4">
      <strong>Platinum</strong>
      <span></span>
    </li>
  </ul>
  <!-- ticks: charts grid -->
  <div class="ticks">
    <div class="tick-1"><span></span></div>
    <div class="tick-2"><span></span></div>
    <div class="tick-3"><span></span></div>
    <div class="tick-4"><span></span></div>
    <div class="tick-5"><span></span></div>
    <div class="tick-6"><span></span></div>
    <div class="tick-7"><span></span></div>
    <div class="tick-8"><span></span></div>
    <div class="tick-9"><span></span></div>
    <div class="tick-10"><span></span></div>
    <div class="tick-11"><span></span></div>
    <div class="tick-12"><span></span></div>
    <div class="tick-13"><span></span></div>
  </div>
  <!-- labels: charts label -->
  <div class="labels">
    <div class="label-1">sales</div>
  </div>
</div>

<br>
<div class="charts-2">
  <ul class="items">
    <li class="item-1">
      <strong>Copper</strong>
      <span></span>
      <span></span>
      <span></span>
    </li>
    <li class="item-2">
      <strong>Silver</strong>
      <span></span>
      <span></span>
      <span></span>
    </li>
    <li class="item-3">
      <strong>Gold</strong>
      <span></span>
      <span></span>
      <span></span>
    </li>
    <li class="item-4">
      <strong>Platinum</strong>
      <span></span>
      <span></span>
      <span></span>
    </li>
  </ul>
  <div class="ticks">
    <div class="tick-1"><span></span></div>
    <div class="tick-2"><span></span></div>
    <div class="tick-3"><span></span></div>
    <div class="tick-4"><span></span></div>
    <div class="tick-5"><span></span></div>
    <div class="tick-6"><span></span></div>
    <div class="tick-7"><span></span></div>
    <div class="tick-8"><span></span></div>
    <div class="tick-9"><span></span></div>
    <div class="tick-10"><span></span></div>
    <div class="tick-11"><span></span></div>
    <div class="tick-12"><span></span></div>
    <div class="tick-13"><span></span></div>
  </div>
  <div class="labels">
    <div class="label-1">sales</div>
    <div class="label-2">expenses</div>
    <div class="label-3">profit</div>
  </div>
</div>

scss

$charts-data1: (
  #5AB5E1: 8.9 10.5 19.3 21.45,
);
.charts-1 { @include charts($charts-data1 'bar' 'steps' (2 22)); }
 
$charts-data2: (
  #E44B22: 8.9 10.5 19.3 21.45,
  #E48A22: 5 10 16 22,
  #22A1E4: 10.7 12 12 18,
);
.charts-2 { @include charts($charts-data2 'column' 'steps' (2 24) 'hide' ('numbers')); }

[class*="charts-"] {
  margin-bottom: 2em;
}

Copper
Silver
Gold
Platinum

sales

Copper
Silver
Gold
Platinum

sales

expenses

profit

Responsive-table

Display complex data tables on small screen.

Referance: responsive-tables-2, RWD-Table-Patterns

scss: syntax

// rp-table() for shorthand
@mixin responsive-table($mode ('data' $data) $border-color ('bp' $breakpoint) ('width' $th-width) ('count' $count)) { 
  @content;
}
// $mode: flip-scroll | scroll | toggle | stack
// $data: list. (<th> content)
// $count: num. (column count)

Flip-scroll: IE 10+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 12.1+

markup

<table class="responsive-table-1">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
      <th>Favorite Color</th>
      <th>Wars or Trek?</th>
      <th>Porn Name</th>
      <th>Date of Birth</th>
      <th>Dream Vacation City</th>
      <th>GPA</th>
      <th>Arbitrary Data</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>James</td>
      <td>Matman</td>
      <td>Chief Sandwich Eater</td>
      <td>Lettuce Green</td>
      <td>Trek</td>
      <td>Digby Green</td>
      <td>January 13, 1979</td>
      <td>Gotham City</td>
      <td>3.1</td>
      <td>RBX-12</td>
    </tr>
    <tr>
      <td>The</td>
      <td>Tick</td>
      <td>Crimefighter Sorta</td>
      <td>Blue</td>
      <td>Wars</td>
      <td>John Smith</td>
      <td>July 19, 1968</td>
      <td>Athens</td>
      <td>N/A</td>
      <td>Edlund, Ben (July 1996).</td>
    </tr>
    <tr>
      <td>Jokey</td>
      <td>Smurf</td>
      <td>Giving Exploding Presents</td>
      <td>Smurflow</td>
      <td>Smurf</td>
      <td>Smurflane Smurfmutt</td>
      <td>Smurfuary Smurfteenth, 1945</td>
      <td>New Smurf City</td>
      <td>4.Smurf</td>
      <td>One</td>
    </tr>
    <tr>
      <td>Cindy</td>
      <td>Beyler</td>
      <td>Sales Representative</td>
      <td>Red</td>
      <td>Wars</td>
      <td>Lori Quivey</td>
      <td>July 5, 1956</td>
      <td>Paris</td>
      <td>3.4</td>
      <td>3451</td>
    </tr>
    <tr>
      <td>Captain</td>
      <td>Cool</td>
      <td>Tree Crusher</td>
      <td>Blue</td>
      <td>Wars</td>
      <td>Steve 42nd</td>
      <td>December 13, 1982</td>
      <td>Las Vegas</td>
      <td>1.9</td>
      <td>Under the couch</td>
    </tr>
  </tbody>
</table>

scss

table {
  text-align: left;
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
  border-spacing: 0;
}
th, td {
  padding: 10px 6px;
  border: 1px solid #dbdbdb;
}
th {
  background-color: #f5f5f5;
}

.responsive-table-1 { 
  // Requirements: $breakpoint
  @include rp-table('flip-scroll' bp 1400px) {
    border: 1px solid #dbdbdb;
    th, td { 
      border-width: 0 1px 1px 0;
      &:last-child { border-bottom-width: 0; }
    }
  }
}

First Name	Last Name	Job Title	Favorite Color	Wars or Trek?	Porn Name	Date of Birth	Dream Vacation City	GPA	Arbitrary Data
James	Matman	Chief Sandwich Eater	Lettuce Green	Trek	Digby Green	January 13, 1979	Gotham City	3.1	RBX-12
The	Tick	Crimefighter Sorta	Blue	Wars	John Smith	July 19, 1968	Athens	N/A	Edlund, Ben (July 1996).
Jokey	Smurf	Giving Exploding Presents	Smurflow	Smurf	Smurflane Smurfmutt	Smurfuary Smurfteenth, 1945	New Smurf City	4.Smurf	One
Cindy	Beyler	Sales Representative	Red	Wars	Lori Quivey	July 5, 1956	Paris	3.4	3451
Captain	Cool	Tree Crusher	Blue	Wars	Steve 42nd	December 13, 1982	Las Vegas	1.9	Under the couch

Scroll: IE 10+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

scroll mode requires responsive-table.js.
First include the script in your page. Then call the function responsiveTable($table-container) after the markup. Then @include responsive-table on the container of the table.

markup

<div class="responsive-table-2">
  <table class="">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Job Title</th>
        <th>Favorite Color</th>
        <th>Wars or Trek?</th>
        <th>Porn Name</th>
        <th>Date of Birth</th>
        <th>Dream Vacation City</th>
        <th>GPA</th>
        <th>Arbitrary Data</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>James</td>
        <td>Matman</td>
        <td>Chief Sandwich Eater</td>
        <td>Lettuce Green</td>
        <td>Trek</td>
        <td>Digby Green</td>
        <td>January 13, 1979</td>
        <td>Gotham City</td>
        <td>3.1</td>
        <td>RBX-12</td>
      </tr>
      <tr>
        <td>The</td>
        <td>Tick</td>
        <td>Crimefighter Sorta</td>
        <td>Blue</td>
        <td>Wars</td>
        <td>John Smith</td>
        <td>July 19, 1968</td>
        <td>Athens</td>
        <td>N/A</td>
        <td>Edlund, Ben (July 1996).</td>
      </tr>
    </tbody>
  </table>
</div>
<script type="text/javascript" src="v3/node_modules/rocket-sass/src/js/components/responsive-table.js"></script>
<script>
  responsiveTable(document.querySelector('.responsive-table-2'), 1300);
</script>

scss

.responsive-table-2 { 
  // Requirements: $breakpoint
  @include rp-table('scroll' bp 1400px) {
    .table {
      border-right-width: 1px;
      th:last-child, td:last-child { border-right-width: 0; }
      .lt-ie10 & { 
        border-right-width: 0; 
        th:last-child, td:last-child { border-right-width: 1px; }
      }
    }
  } 
}

First Name	Last Name	Job Title	Favorite Color	Wars or Trek?	Porn Name	Date of Birth	Dream Vacation City	GPA	Arbitrary Data
James	Matman	Chief Sandwich Eater	Lettuce Green	Trek	Digby Green	January 13, 1979	Gotham City	3.1	RBX-12
The	Tick	Crimefighter Sorta	Blue	Wars	John Smith	July 19, 1968	Athens	N/A	Edlund, Ben (July 1996).

Toggle: IE 8+, Firefox 3.6+, Chrome 15+, Safari 5.1+, Opera 10.6+

toggle mode requires input:checkbox and label for each column, also 2 pairs of input:checkbox and label for control panel.

markup

<div class="responsive-table-3">
  <input name="" id="toggle-1" checked="" type="checkbox">
  <input name="" id="toggle-2" type="checkbox">
  <input name="" id="toggle-3" type="checkbox">
  <input name="" id="toggle-4" checked="" type="checkbox">
  <input name="" id="toggle-5" type="checkbox">
  <input name="" id="toggle-6" checked="" type="checkbox">
  <input name="" id="toggle-7" type="checkbox">
  <input name="" id="toggle-8" type="checkbox">
  <input name="" id="toggle-9" type="checkbox">
  <input name="" id="toggle-10" type="checkbox">
  <input name="" id="control-panel" type="checkbox">
  <input name="" id="display-all" type="checkbox">
  <label for="control-panel">Display</label>
  <label for="display-all">Display All</label>
  <div class="control-panel">
    <label for="toggle-1">First Name</label>
    <label for="toggle-2">Last Name</label>
    <label for="toggle-3">Job Title</label>
    <label for="toggle-4">Favorite Color</label>
    <label for="toggle-5">Wars or Trek?</label>
    <label for="toggle-6">Porn Name</label>
    <label for="toggle-7">Date of Birth</label>
    <label for="toggle-8">Dream Vacation City</label>
    <label for="toggle-9">GPA</label>
    <label for="toggle-10">Arbitrary Data</label>
  </div>
  <table>
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Job Title</th>
        <th>Favorite Color</th>
        <th>Wars or Trek?</th>
        <th>Porn Name</th>
        <th>Date of Birth</th>
        <th>Dream Vacation City</th>
        <th>GPA</th>
        <th>Arbitrary Data</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>James</td>
        <td>Matman</td>
        <td>Chief Sandwich Eater</td>
        <td>Lettuce Green</td>
        <td>Trek</td>
        <td>Digby Green</td>
        <td>January 13, 1979</td>
        <td>Gotham City</td>
        <td>3.1</td>
        <td>RBX-12</td>
      </tr>
      <tr>
        <td>The</td>
        <td>Tick</td>
        <td>Crimefighter Sorta</td>
        <td>Blue</td>
        <td>Wars</td>
        <td>John Smith</td>
        <td>July 19, 1968</td>
        <td>Athens</td>
        <td>N/A</td>
        <td>Edlund, Ben (July 1996).</td>
      </tr>
    </tbody>
  </table>
</div>

scss

.responsive-table-3 {
  // Requirements: $breakpoint, $count
  @include rp-table('toggle' 'bp' 1400px 'count' 10);
}

Display Display All

First Name Last Name Job Title Favorite Color Wars or Trek? Porn Name Date of Birth Dream Vacation City GPA Arbitrary Data

First Name	Last Name	Job Title	Favorite Color	Wars or Trek?	Porn Name	Date of Birth	Dream Vacation City	GPA	Arbitrary Data
James	Matman	Chief Sandwich Eater	Lettuce Green	Trek	Digby Green	January 13, 1979	Gotham City	3.1	RBX-12
The	Tick	Crimefighter Sorta	Blue	Wars	John Smith	July 19, 1968	Athens	N/A	Edlund, Ben (July 1996).

Stack: IE 10+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

markup

<table class="responsive-table-4">
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
      <th>Favorite Color</th>
      <th>Wars or Trek?</th>
      <th>Porn Name</th>
      <th>Date of Birth</th>
      <th>Dream Vacation City</th>
      <th>GPA</th>
      <th>Arbitrary Data</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>James</td>
      <td>Matman</td>
      <td>Chief Sandwich Eater</td>
      <td>Lettuce Green</td>
      <td>Trek</td>
      <td>Digby Green</td>
      <td>January 13, 1979</td>
      <td>Gotham City</td>
      <td>3.1</td>
      <td>RBX-12</td>
    </tr>
    <tr>
      <td>The</td>
      <td>Tick</td>
      <td>Crimefighter Sorta</td>
      <td>Blue</td>
      <td>Wars</td>
      <td>John Smith</td>
      <td>July 19, 1968</td>
      <td>Athens</td>
      <td>N/A</td>
      <td>Edlund, Ben (July 1996).</td>
    </tr>
  </tbody>
</table>

scss

$responsive-table-4-data: (
  'First Name', 
  'Last Name', 
  'Job Title', 
  'Favorite Color', 
  'Wars or Trek?', 
  'Porn Name', 
  'Date of Birth', 
  'Dream Vacation City', 
  'GPA', 
  'Arbitrary Data'
);
.responsive-table-4 {
  // Requirements: $data, $border-color, $th-width
  @include rp-table('stack' 'bp' 1400px #dbdbdb 'data' $responsive-table-4-data) {
    tr:nth-of-type(2n) { background-color: #f5f5f5; }
    td:before { margin-right: 7px; }
    border-bottom: 1px solid #dbdbdb;
    th, td { border-bottom: 0; }
  }
}

First Name	Last Name	Job Title	Favorite Color	Wars or Trek?	Porn Name	Date of Birth	Dream Vacation City	GPA	Arbitrary Data
James	Matman	Chief Sandwich Eater	Lettuce Green	Trek	Digby Green	January 13, 1979	Gotham City	3.1	RBX-12
The	Tick	Crimefighter Sorta	Blue	Wars	John Smith	July 19, 1968	Athens	N/A	Edlund, Ben (July 1996).

Off-canvas

Pure css off-canvas using input:checkbox.

IE 8+, Firefox 3.6+, Chrome 15+, Safari 5.1+, Opera 10.6+

scss: syntax

@mixin off-canvas($mode $nav 'submenu' $nav-width $direction ($map $breakpoints) $overlay-background-color $duration)
// $mode: slide-in | slide-along | slide-out | rotate-in | rotate-out | rotate-in-reverse | scale-down | scale-up | open-door | push | reveal | drawer

// For modes: slide-in, rotate-in, rotate-out, rotate-in-reverse, push and drawer, put nav inside ".page".
// For modes: slide-along, slide-out, scale-down, scale-up, open-door and reveal, put nav outside ".page", after the checkbox.

markup

<!-- modes: slide-in, rotate-in, rotate-out, rotate-in-reverse, push, drawer -->
<div>
  <input type="checkbox" name="" id="nav-toggle-1" class="checkbox-hidden">
  <div class="off-canvas-1">
    <header>
      <label for="nav-toggle-1" class="menu">Menu</label>
      <label for="nav-toggle-1" class="page-overlay"></label>
      <nav class="off-canvas-nav-1">
        <ul>
          <li><a href="">How It Works</a></li>
          <li><a href="">Compare</a></li>
          <!-- [data-has-submenu] is required -->
          <li data-has-submenu>
            <input type="checkbox" id="subnav-1-1" class="hidden-checkbox">
            <label for="subnav-1-1">&gt;</label>
            <a href="">Technology</a>

            <!-- sub menu -->
            <!-- [data-submenu], [data-back] are required -->
            <ul data-submenu>
              <li><label for="subnav-1-1" data-back>Back</label></li>
              <li><a href="">sub item 1</a></li>
              <li><a href="">sub item 2</a></li>
              <li><a href="">sub item 3</a></li>
            </ul>
          </li>
          <li><a href="">Careers</a></li>
          <li><a href="">Help</a></li>
        </ul>
      </nav>
    </header>
    <div>Other content</div>
  </div>
</div>

scss

// normal
.off-canvas-1 { @include off-canvas(slide-in submenu '.off-canvas-nav-1' ); }
 
.off-canvas-nav-1 {
  color: #fff;
  background-color: #000;
  a, label { 
    display: block;
    padding: 0.5em 1em; 
  }
  label { background-color: rgba(255, 255, 255, 0.2); }
  [data-submenu] {
    background-color: #FF8000;
  }
}
.checkbox-hidden {
  position: absolute;
  left: -9000px;
}
.off-canvas-1 .menu {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 3px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

Validation

Html5 form validation using H5F. H5F is included in kit.js (with a little bit modification), so you don't need to add it again.

Set customized alerts information through <div data-info=""></div>.

IE 8+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

scss: syntax

@mixin validation($style $direction $shake $speed $duration 'default')
// $style: 'normal' | 'fade-in' | 'slide-in'
// $direction: left | right | top | bottom

markup

<form action="" class="validation-1">
  <ol>
    <li>
      <label for="name">Name</label>
      <input type="text" id="name" pattern="[a-zA-Z]{6,}" required>
      <!-- alerts -->
      <div data-info="valid">User name is valid.</div>
      <div data-info="required">Valid user name required.</div>
      <div data-info="error">User name must be at least 6 characters.</div>
    </li>
    <li>
      <label for="name">Email</label>
      <input type="email" id="email" required>
      <!-- alerts -->
      <div data-info="valid">Email is valid.</div>
      <div data-info="required">Email is required.</div>
      <div data-info="error">The email address you entered is not valid.</div>
    </li>
    <li>
      <input type="submit" value="Submit">
    </li>
  </ol>
</form>
<script>
  // run form validation
  window.onload = function () {
    H5F.setup(document.querySelectorAll(".validation-1"));
  }
</script>

scss

.validation-1 { @include validation(slide-in right default); }

Button

Create buttons and effects.

IE 8+, Firefox 3.6+, Chrome 15+, Safari 5.1+, Opera 10.6+

scss: syntax

@mixin button($padding ($border-radius | 'round') ($background-color $active-color) $style $active-selector $direction $duration $timing-function)
// $padding: string. e.g. "5px 10px"
// style: 'highlight' | 'simple' | 'slide' | 'ripple' | 'veil' | 'push' | 'cut' | 'bubble' | 'line-drawing'
// direction: left, right, top, bottom, 'horizontal', 'vertical'
// active-selector: class | id | property | pseudo. You could change the button status by adding this selector.

markup

<span class="button-simple">button</span>
<span class="button-push" data-text="star"><span>push</span></span>
<span class="button-bubble">bubble</span>

<span class="button-line-drawing">line-drawing
  <!-- 4 pairs of empty spans required -->
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</span>

scss

$padding: "0.5em 0.8em";

.button-simple { @include button($padding simple); }
.button-push { @include button($padding push); }
.button-bubble { @include button($padding #2B8ACF 5px bubble ':hover'); }
.button-line-drawing { @include button($padding 'line-drawing' ':hover'); }

[class*="button-"] {
  vertical-align: middle;
  margin: 10px;
}

button push bubble line-drawing

Parallelogram

Make parallelogram box using CSS3.

IE 9+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

scss: syntax

@mixin parallelogram($background $angle);
// $background: color
// $angle: deg

markup

<div class="parallelogram-1">Parallelogram demo</div>

scss

.parallelogram-1 { 
  @include parallelogram(#0C81E7 -30deg); 

  display: inline-block;
  margin-left: 30px;
  padding: 20px;
  color: #fff;
}

Parallelogram demo

Drop-shadows

Pure css drop shadow effects.
Token from Nicolas Gallagher at css-drop-shadows-without-images.

IE 9+, Firefox 4+, Chrome 15+, Safari 5.1+, Opera 10.6+

scss: syntax

@mixin drop-shadows($style $direction $color $shadow-size);
// $style: 'lifted' | 'raised' | 'perspective' | 'curve'
// $direction: left | right | top | bottom | 'horizontal' | 'vertical'

markup

<div class="drop-shadow-1">style: lifted</div>
<div class="drop-shadow-2">style: raised</div>
<div class="drop-shadow-3">style: perspective</div>
<div class="drop-shadow-4">style: curve</div>

scss

.drop-shadow-1 { @include drop-shadows(lifted bottom 15px); }
.drop-shadow-2 { @include drop-shadows(raised bottom 15px); }
.drop-shadow-3 { @include drop-shadows(perspective bottom 15px); }
.drop-shadow-4 { @include drop-shadows(curve bottom 15px); }
[class*="drop-shadow-"] {
  display: inline-block;
  width: 8em;
  text-align: center;
  padding: 20px;
  margin: 20px 50px;
  background-color: #f7f7f7;
}

style: lifted

style: raised

style: perspective

style: curve

Switch

Make switch using input:checkbox.

IE 8+, Firefox 3.6+, Chrome 15+, Safari 5.1+, Opera 10.6+

scss: syntax

@mixin switch($style $size $active-color ('text' $text) ('radius' | 'round'))
// $style: 'toggle' | 'slider'
// $size: px | em
// $active-color: color
// $text: list. e.g. ('on' 'off')

markup

<div class="switch-1">
  <input type="checkbox" id="switch-id-1" name="switch">
  <!-- span is required if you want to show text -->
  <label for="switch-id-1"><span></span></label>
</div>
<div class="switch-2">
  <input type="checkbox" id="switch-id-2" name="switch">
  <label for="switch-id-2"></label>
</div>

scss

.switch-1 { 
  @include switch(round text ("on" "off") 36px blue); 
  margin-bottom: 10px;
}
.switch-2 { 
  @include switch(slider round 20px red); 
}

Push-toggle

Make push toggle with input:radio.

IE 8+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

scss: syntax

@mixin push-toggle() {
  // Active styles go here
  @content;
}

markup

<div class="push-toggle-1">
  <!-- make sure labels right after inputs -->
  <input type="radio" id="male" name="gender" checked="">
  <label for="male">Male</label>
  <input type="radio" id="female" name="gender">
  <label for="female">Female</label>
</div>

scss

Male Female

Checkbox

Customize radios and checkboxes.

IE 7+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

scss: syntax

@mixin checkbox() {
  // unchecked styles go here
  @content;
}

@mixin checkbox-active() {
  // checked styles go here
  @content;
}

markup

<div class="checkbox-1">
  <!-- make sure labels right after inputs -->
  <input type="radio" name="radio-name" id="radio-id-1" checked>
  <label for="radio-id-1">item 1</label>
  <br />
  <input type="radio" name="radio-name" id="radio-id-2">
  <label for="radio-id-2">item 2</label>
  <br />
  <input type="radio" name="radio-name" id="radio-id-3">
  <label for="radio-id-3">item 3</label>
  <br />
</div>

scss

.checkbox-1 {
  margin-top: 10px;

  @include checkbox() {
    padding: 4px 0 4px 26px;
    &:before {
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: #fff;
      box-shadow: 0 0 0 5px #fff, 0 0 0 6px #0080FF;
      transform: translateX(-16px) translateY(-2px);
    }
  };
  
  @include checkbox-active() {
    &:before {
      background-color: #0080FF;
    }
  };
}

item 1
item 2
item 3

Input-file

Customize input:file.
Stolen from Osvaldas Valutis at styling-customizing-file-inputs-smart-way.

IE 8+, Firefox 22+, Chrome 15+, Safari 4+, Opera 12.1+

scss: syntax

@mixin input-file() {
  @content;
}

markup

<div class="input-file-1">
  <input type="file" id="input-file-id" data-multiple-caption="{count} files selected" multiple />
  <label for="input-file-id">Choose a file</label>
</div>

<script src="v3/node_modules/rocket-sass/src/js/components/input-file.js"></script>
<script type="text/javascript">
  inputFile('#input-file-id');
</script>

scss

.input-file-1 {
  @include input-file() {
    margin: 10px 0;
    padding: 10px;
    color: #fff;
    background-color: #1D85E9;
    border-radius: 5px;
    box-shadow: 0 4px 0px #145796;
    transition: background-color 0.25s;
    &:hover {
      background-color: #1F91FF;
    }
  }
}

Choose a file

Tabs

Make tabs use input:radio.
Usetabs-active to set up tab active styles and tabs-panel-active for tab panel active styles.
To reduce complexity, .ro-tabs and .ro-panels are required.

IE 8+, Firefox 3.6+, Chrome 15+, Safari 5.1+, Opera 12.1+

scss: syntax

@mixin tabs($count $style)
// $count: tab count
// $style: 'normal' | 'carousel' | 'customize'

@mixin tabs-active($count)
// $count: tab count

@mixin tabs-panel-active($count)
// $count: tab count

markup

<div class="tabs-1">
  <input type="radio" name="tabs-radio-name" id="tabs-radio-id-1" checked>
  <input type="radio" name="tabs-radio-name" id="tabs-radio-id-2">
  <input type="radio" name="tabs-radio-name" id="tabs-radio-id-3">

  <!-- class .ro-tabs is required -->
  <div class="ro-tabs">
    <label for="tabs-radio-id-1">tab 1</label>
    <label for="tabs-radio-id-2">tab 2</label>
    <label for="tabs-radio-id-3">tab 3</label>
  </div>
  
  <!-- class .ro-panels is required -->
  <div class="ro-panels">
    <div>
      <p>Praesentium velit, aliquam ex, fuga aperiam tempora harum rem obcaecati ut corrupti autem laudantium cupiditate, nostrum similique ducimus numquam commodi?</p>
    </div>
    <div>
      <p>Labore illo, doloremque laboriosam velit molestiae sequi provident vitae minima nobis tempore eius nulla deserunt, repellat aliquid odit, illum. Quod!</p>
    </div>
    <div>
      <p>Expedita earum soluta repudiandae voluptas dolorem doloremque maiores iusto rem fugit itaque. Ab facere aperiam libero, iusto facilis praesentium laborum.</p>
    </div>
  </div>
</div>

scss

.tabs-1 { 
  @include tabs(3 'carousel'); 
  @include tabs-active(3) {
    color: #1899FF;
  } 
  @include tabs-panel-active(3) {
    border: 1px solid #1899FF;
  } 
}

tab 1 tab 2 tab 3

Praesentium velit, aliquam ex, fuga aperiam tempora harum rem obcaecati ut corrupti autem laudantium cupiditate, nostrum similique ducimus numquam commodi?

Labore illo, doloremque laboriosam velit molestiae sequi provident vitae minima nobis tempore eius nulla deserunt, repellat aliquid odit, illum. Quod!

Expedita earum soluta repudiandae voluptas dolorem doloremque maiores iusto rem fugit itaque. Ab facere aperiam libero, iusto facilis praesentium laborum.

Accordion

Pure css accordion.

IE 7+, Firefox 3.6+, Chrome 15+, Safari 5.1+, Opera 10.6+

scss: syntax

@mixin accordion($selector $max-height $transition-duration)

markup

<div class="accordion-1">
  <input type="checkbox" name="accordion-1" id="accordion-checkbox-1">
  <label for="accordion-checkbox-1">About Us</label>
  <div>
    <p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.</p>
  </div>
</div>
<div class="accordion-1">
  <input type="checkbox" name="accordion-1" id="accordion-checkbox-2">
  <label for="accordion-checkbox-2">Contact Us</label>
  <div>
    <p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.</p>
  </div>
</div>

scss

.accordion-1 {
  @include accordion(div 200px);
  > label { display: block; padding: 10px; background-color: #f5f5f5; }
}

About Us

Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows.

Dropdown

Make dropdown using :hover or input:checkbox.

IE 7+, Firefox 3.6+, Chrome 15+, Safari 5.1+, Opera 10.6+

scss: syntax

@mixin dropdown($selector $show $style $direction $duration 'default')
// $selector: string. Dropdown content selector.
// $show: 'hover' | 'click'
// $style: 'display' | 'scale' | 'rotate'
// default: use default styles

markup

<div class="dropdown-1">
  <span>dropdown</span>
  <!-- if you set $show: click, input and label are required. -->
  <input type="checkbox" name="" id="your-dropdown-id">
  <label for="your-dropdown-id"> → </label>
  <ul>
    <li><a href="">item01</a></li>
    <li><a href="">item02</a></li>
    <li><a href="">item03</a></li>
  </ul>
</div>

scss

.dropdown-1 {
  @include dropdown(click right default);
  display: inline-block;
  min-height: 140px;
  margin-top: 20px;
}

Tooltip

Pure css tooltip.

IE 8+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

scss: syntax

@mixin tooltip($position $color ('width' $width) ('height' $height) 'radius')
// $position: left | right | top | bottom
// $width(optional): px | em
// $height(optional): px | em
// radius (0.22em), adjust it using "$ro-tooltip-radius: your value;")

markup

<p>Hic, deleniti <a href="" class="tooltip-2" data-tooltip="bottom tooltip">quibusdam</a> itaque expedita placeat in veritatis <a href="" class="tooltip-1" data-tooltip="right tooltip">consectetur</a> explicabo non odit sed animi quos adipisci. Vero dolores animi impedit tempore tenetur.</p>

scss

.tooltip-1 {
  @include tooltip(right #b02df3); 
}
.tooltip-2 {
  @include tooltip(radius bottom #b02df3); 
}

Hic, deleniti quibusdam itaque expedita placeat in veritatis consectetur explicabo non odit sed animi quos adipisci. Vero dolores animi impedit tempore tenetur.

Media-list

Separate media element and the main content into 2 columns.

IE 8+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

scss: syntax

@mixin media-list($role $gutter $direction)

markup

<ul>
  <li class="media-list-1">
    <figure class="media"><a href=""><img src="http://placehold.it/120x80" alt=""></a></figure>
    <div class="media-body">
      <p>Beatae nulla distinctio minima eos quibusdam tempore. Laudantium fuga neque incidunt velit, totam nobis, culpa mollitia dignissimos quis molestias minima.</p>
      <div class="media-list-2">
        <div class="media-body">
          <p>Est assumenda facere eius eveniet facilis id odit dignissimos fuga a iusto cum ut corporis laudantium fugit, neque quod. Aliquid.</p>
        </div>
        <figure class="media"><a href=""><img src="http://placehold.it/120x80" alt=""></a></figure>
      </div>
    </div>
  </li>
</ul>

scss

.media-list-1 .media { @include media-list('media' 15px); } 
.media-list-2 .media { @include media-list('media' 15px right); }
.media-body { @include media-list('media-body'); }

Beatae nulla distinctio minima eos quibusdam tempore. Laudantium fuga neque incidunt velit, totam nobis, culpa mollitia dignissimos quis molestias minima.

Est assumenda facere eius eveniet facilis id odit dignissimos fuga a iusto cum ut corporis laudantium fugit, neque quod. Aliquid.

Flex-media

Make video or inline svg flexible within its container.

IE 7+, Firefox 3.6+, Chrome 16+, Safari 4+, Opera 10.6+

scss: syntax

@mixin flex-media($ratio $child)

markup

<div class="flex-media-1">
  <iframe width="560" height="315" src="//www.youtube.com/embed/Rb0UmrCXxVA" frameborder="0" allowfullscreen></iframe>
</div>
<div class="flex-media-2">
  <svg xmlns="http://www.w3.org/2000/svg" id="heart-fill" viewBox="0 0 48 48"><title>heart-fill</title><path d="M42.9 26.6L24 45.5 5.1 26.6A13.8 13.8 0 1 1 24 6.6a13.7 13.7 0 0 1 23.5 9.7c0 4-1.8 7.8-4.6 10.3z" fill="currentColor" fill-rule="evenodd"/></svg>
</div>

scss

.flex-media-1 { @include flex-media(315/560); }
.flex-media-2 { @include flex-media(1 svg); }

Addons

Type

type is a shorthand mixin for font-size, font-weight, font-style, line-height, font-family, text-align, text-transform.

IE 6+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

scss: syntax

@mixin type($font-size $font-weight $font-style $line-height $font-family $text-align $text-transform)
// $font-weight: thin, hairline, 'extra light', 'ultra light', lighter, light, normal, medium, 'semi bold', 'demi bold', bold, bolder, 'extra bold', black, heavy, 100, 200, 300, 400, 500, 600, 700, 800, 900, weight-normal, weight-inherit
// $font-style: italic, oblique, style-normal, style-inherit
// $text-align: left, right, center, justify, align-inherit
// $text-transform: capitalize, uppercase, lowercase, none, full-width, transform-inherit
 
// Tips: 
// to set 'font-weight', 'font-style', 'text-align' or 'text-transform' values to 'inherit' or 'normal', 
// you need add prefix 'weight-', 'style-' or 'transform-'.

markup

<div class="type-1">Maiores, molestiae! Explicabo, illumesse.</div>
<div class="type-2">Eveniet neque voluptate nisi!</div>

scss

.type-1 { @include type(30px 1.8 'Georgia, Helvetica, sans-serif'); }
.type-2 { @include type(30px 1.8 uppercase bold italic right); }

Maiores, molestiae! Explicabo, illumesse.

Eveniet neque voluptate nisi!

Fluid-type

Make font-size or other properties change smoothly depending on the window size.

Stolen from here
More on fluid-type-blogs.

IE 6+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

scss: syntax

@mixin fluid-type($properties, $data);
// $properties: font-size | margin | padding
// $data: map

markup

<div class="fluid-type-1">Neque impedit, voluptatem quas!</div>

scss

.fluid-type-1 { @include fluid-type(font-size, (320px: 16px, 1024px: 40px)); }

Neque impedit, voluptatem quas!

Responsive-type

type works with breakpoints.
Everything you can do with type you can do with responsive-type.

IE 9+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

scss: syntax

@mixin responsive-type($data, $breakpoints) // or rp-type();
// $data: map
// $breakpoints (global breakpoints, optional): map

markup

<div class="responsive-type-1">Assumenda, deleniti molestias sapiente ut!</div>
<div class="responsive-type-2">Saepe aspernatur fugiat, corrupti officia.</div>

scss

$responsive-type-1: (
  'default': (15px 1.3 right uppercase),
  900px: 18px,
  1020px: 20px,
);
.responsive-type-1 { @include rp-type($responsive-type-1); }
 
$bp: (
  'small': 480px,
  'medium': 700px,
  'large': 1024px,
);
$responsive-type-2: (
  'default': (18px 1.3 weight-normal),
  900px: 22px,
  'large': (30px 1.2),
);
.responsive-type-2 { @include rp-type($responsive-type-2 $bp); }

Assumenda, deleniti molestias sapiente ut!

Saepe aspernatur fugiat, corrupti officia.

Hide-text

Visually hide the text content of an element.

IE 7+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

scss: syntax

@mixin hide-text();
%hide-text {};

markup

<div class="hide-text-1">Brand Name</div>

scss

.hide-text-1 {
  @extend %hide-text;
  width: 100px;
  height: 60px;
  background: #ccc url('http://placehold.it/100x60/DD279E/ffffff?text=Brand') 0 0 no-repeat;
}

Brand Name

Opacity

Set opacity property for IE8- and modern browsers.

scss: syntax

@mixin opacity($opacity)

scss

.opacity { @include opacity(0.3); }

Ie-rgba

Get rgba() color for IE8.

scss: syntax

@mixin ie-rgba($rgba)
// $rgba: rgba color

scss

.lt-ie9 .ie-rgba { @include ie-rgba(rgba(0,0,0,0.7)); }
// output:
// .lt-ie9 .ie-rgba {
//   background: none;
//   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B3000000,endColorstr=#B3000000);
//   zoom: 1;
// }

Ro-breakpoint

A shorthand @mixin for mediaquery.
Note: ro-breakpoint uses one breakpoint (e.g. 800) for both min and max instead of two (e.g. 799 for max, 800 for min). If you don't want this behaiver, you can use $breakpoint-fix: false; to disable it.

IE 9+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

scss: syntax

@mixin ro-breakpoint($condition $media-type $media-feature $breakpoints)

scss

@include bp('min' 640) {};
// @media (min-width: 40em) {};
@include bp('min' 'height' 640) {};
// @media (min-height: 40em) {};
@include bp('max' 640 screen) {};
// @media screen and (max-width: 39.9375em) {};
@include bp(400 767 1000 1200 1500) {};
// @media (min-width: 25em) and (max-width: 47.875em), (min-width: 62.5em) and (max-width: 74.9375em), (min-width: 93.75em){}

At-least

Apply styles to child elements when they are equal to or more than a given amount.

scss: syntax

@mixin at-least($selector $count) {
  @content;
}

markup

<ul class="at-least-1">
  <li data-content></li>
  <li data-content></li>
  <li data-content></li>
</ul>
<ul class="at-least-1">
  <li data-content></li>
  <li data-content></li>
  <li data-content></li>
  <li data-content></li>
</ul>

scss

.at-least-1 {
  li { display: inline-block; width: 100px; }
  @include at-least('li' 4) { background-color: #25e425; }
}

At-most

Apply styles to child elements when they are equal to or less than a given amount.

scss: syntax

@mixin at-most($selector $count) {
  @content;
}

markup

<ul class="at-most-1">
  <li data-content></li>
  <li data-content></li>
  <li data-content></li>
</ul>
<ul class="at-most-1">
  <li data-content></li>
  <li data-content></li>
  <li data-content></li>
  <li data-content></li>
  <li data-content></li>
</ul>

scss

.at-most-1 {
  li { display: inline-block; width: 100px; }
  @include at-most('li' 4) { background-color: #25e425; }
}

Equal-to

Apply styles to child elements when they are equal to a given amount.

scss: syntax

@mixin equal-to($selector $count) {
  @content;
}

markup

<ul class="equal-to-1">
  <li data-content></li>
  <li data-content></li>
  <li data-content></li>
</ul>
<ul class="equal-to-1">
  <li data-content></li>
  <li data-content></li>
  <li data-content></li>
  <li data-content></li>
</ul>
<ul class="equal-to-1">
  <li data-content></li>
  <li data-content></li>
  <li data-content></li>
  <li data-content></li>
  <li data-content></li>
</ul>

scss

.equal-to-1 {
  li { display: inline-block; width: 100px; }
  @include equal-to('li' 4) { background-color: #25e425; }
}

Between

Apply styles to child elements when they are between 2 given amounts.

scss: syntax

@mixin between($selector $count1 $count2) {
  @content;
}

markup

<ul class="between-1">
  <li data-content></li>
  <li data-content></li>
  <li data-content></li>
</ul>
<ul class="between-1">
  <li data-content></li>
  <li data-content></li>
  <li data-content></li>
  <li data-content></li>
</ul>

scss

.between-1 {
  li { display: inline-block; width: 100px; }
  @include between('li' 4 6) { background-color: #25e425; }
}

Visible

Make elements visible on some portions of the viewport.

IE 9+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

scss: syntax

@mixin visible($media-type $breakpoints)

markup

<p class="visible-1">Visible on 700px and up</p>
<p class="visible-2">Visible below 700px</p>

scss

.visible-1 { @include visible(700px); }
.visible-2 { @include visible(0 700px); }

Visible on 700px and up

Visible below 700px

Hidden

Hide elements on some portions of the viewport.

IE 9+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

scss: syntax

@mixin hidden($media-type $breakpoints)

markup

<p class="hidden-1">Hidden on 700px and up</p>
<p class="hidden-2">Hidden between 300px and 500px and 700px up</p>

scss

.hidden-1 { @include hidden(700px); }
.hidden-2 { @include hidden(300px 500px 700px); }

Hidden on 700px and up

Hidden between 300px and 500px and 700px up

Color-functions

Contrast

Get a light or dark color based on a given color.

By default, the light color is #fff and black color is #000, but you can use your own.

IE 6+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

scss: syntax

@function contrast($color ('light' $light) ('dark' $dark))

markup

<p class="contrast-1">Consequatur pariatur, minima, ex facere molestias praesentium ipsum laborum porro earum modi optio ad quam.</p>
<p class="contrast-2">Impedit dolorum sit nisi, aliquam, nemo repellendus vitae, ipsa et voluptatum dignissimos recusandae eum accusamus.</p>
<p class="contrast-3">Veniam id, nostrum fuga saepe ab voluptate incidunt nemo maiores esse praesentium animi inventore qui.</p>

scss

.contrast-1 {
  background-color: #a6e36e; 
  color: contrast(#a6e36e);
}
.contrast-2 {
  background-color: #800000;
  color: contrast(#800000);
}
.contrast-3 {
  background-color: #6666FF;
  color: contrast(#6666FF light #D6D6E6);
}

Consequatur pariatur, minima, ex facere molestias praesentium ipsum laborum porro earum modi optio ad quam.

Impedit dolorum sit nisi, aliquam, nemo repellendus vitae, ipsa et voluptatum dignissimos recusandae eum accusamus.

Veniam id, nostrum fuga saepe ab voluptate incidunt nemo maiores esse praesentium animi inventore qui.

Adjacent

Get a adjacent color based on a given color.

IE 6+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

scss: syntax

@function adjacent($color $order ('saturation' $saturation) ('lightness' $lightness) ('dist' $dist))
// $order: integer
// $saturation: percent
// $lightness: percent
// $dist(distribution): number

markup

<div class="adjacent-0" data-content></div>
<div class="adjacent-1" data-content></div>
<div class="adjacent-2" data-content></div>
<div class="adjacent-3" data-content></div>

scss

.adjacent-0 { background-color: #155BDF; }
.adjacent-1 { background-color: adjacent(#155BDF 1); }
.adjacent-2 { background-color: adjacent(#155BDF 2); }
.adjacent-3 { background-color: adjacent(#155BDF 3); }

Complementary

Get the complementary color based on a given color.

IE 6+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

scss: syntax

@function complementary($color ('saturation' $saturation) ('lightness' $lightness) ('dist' $dist))
// $order: integer
// $saturation: percent
// $lightness: percent
// $dist(distribution): number

markup

<div class="complementary-0" data-content></div>
<div class="complementary-1" data-content></div>

scss

.complementary-0 { background-color: #155BDF; }
.complementary-1 { background-color: complementary(#155BDF 1); }

Split-complementary

Get a split-complementary color based on a given color.

IE 6+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

scss: syntax

@function split-complementary($color $order ('saturation' $saturation) ('lightness' $lightness) ('dist' $dist))

markup

<div class="split-complementary-0" data-content></div>
<div class="split-complementary-1" data-content></div>
<div class="split-complementary-2" data-content></div>
<div class="split-complementary-3" data-content></div>

scss

.split-complementary-0 { background-color: #155BDF; }
.split-complementary-1 { background-color: split-complementary(#155BDF 1); }
.split-complementary-2 { background-color: split-complementary(#155BDF 2); }
.split-complementary-3 { background-color: split-complementary(#155BDF 3); }

Triad

Get a triad color based on a given color.

IE 6+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

scss: syntax

@function triad($color $order ('saturation' $saturation) ('lightness' $lightness) ('dist' $dist))
// $order: integer
// $saturation: percent
// $lightness: percent
// $dist(distribution): number

markup

<div class="triad-0" data-content></div>
<div class="triad-1" data-content></div>
<div class="triad-2" data-content></div>

scss

.triad-0 { background-color: #155BDF; }
.triad-1 { background-color: triad(#155BDF 1); }
.triad-2 { background-color: triad(#155BDF 2); }

Rectangle

Get a rectangle color based on a given color.

IE 6+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

scss: syntax

@function rectangle($color $order ('saturation' $saturation) ('lightness' $lightness) ('dist' $dist))
// $order: integer
// $saturation: percent
// $lightness: percent
// $dist(distribution): number

markup

<div class="rectangle-0" data-content></div>
<div class="rectangle-1" data-content></div>
<div class="rectangle-2" data-content></div>
<div class="rectangle-3" data-content></div>

scss

.rectangle-0 { background-color: #155BDF; }
.rectangle-1 { background-color: rectangle(#155BDF 1); }
.rectangle-2 { background-color: rectangle(#155BDF 2); }
.rectangle-3 { background-color: rectangle(#155BDF 3); }

Square

Get a square color based on a given color.

IE 6+, Firefox 3.6+, Chrome 15+, Safari 4+, Opera 10.6+

scss: syntax

@function square($color $order ('saturation' $saturation) ('lightness' $lightness) ('dist' $dist))
// $order: integer
// $saturation: percent
// $lightness: percent
// $dist(distribution): number

markup

<div class="square-0" data-content></div>
<div class="square-1" data-content></div>
<div class="square-2" data-content></div>
<div class="square-3" data-content></div>

scss

.square-0 { background-color: #155BDF; }
.square-1 { background-color: square(#155BDF 1); }
.square-2 { background-color: square(#155BDF 2); }
.square-3 { background-color: square(#155BDF 3); }