Rocket - docs

Docs v4
Docs v3

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

Layout

Layout setting

Default gutter for grid, gallery, liquid, holy-grail, metro and masonry.

scss

$global-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. Avoid using relative unit (rem, em) gutter for better IE capability.

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

scss: syntax

@mixin grid($column ('gutter' $gutter) ('selector' $selector) $direction $breakpoint $condition $media 'keep')
// $column: list | map
// $selector: string (child element selector, default "div")
// $direction: LTR | RTL
// $breakpoint: map (e.g. small: 640px, medium: 768px, large: 1024px)
// $condition: 'min' | 'max'
// $media: media types

@include grid on the parent element, pass a number list as a parameter. Each number in the list indicate how many columns the child element occupy.

markup

<div class="grid1">
  <div>
    <div data-content>1</div>
  </div>
  <div>
    <div data-content>2</div>
  </div>
  <div>
    <div data-content>3</div>
  </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.

markup

<div class="grid2">
  <div>
    <div data-content>1</div>
  </div>
  <div>
    <div data-content>2</div>
  </div>
  <div>
    <div data-content>3</div>
  </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>
    <div data-content>1</div>
  </div>
  <div>
    <div data-content>2</div>
  </div>
  <div>
    <div data-content>3</div>
  </div>
  <div>
    <div data-content>4</div>
  </div>
  <div>
    <div data-content>5</div>
  </div>
</div>

scss

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

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

markup

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

scss

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

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

markup

<div class="grid5">
  <div>
    <div data-content>1</div>
  </div>
  <div>
    <div data-content>2</div>
  </div>
  <div>
    <div data-content>3</div>
  </div>
  <div>
    <div data-content>4</div>
  </div>
  <div>
    <div data-content>5</div>
  </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 ); }

Gallery

Make a photo gallery layout.

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

scss: syntax

@mixin gallery($column ('gutter' $gutter) ('selector' $selector) $direction $breakpoint $condition $media 'center-align' 'keep');
// $column: number | map
// $selector: string (child element selector, default "li")
// $direction: LTR | RTL
// $breakpoint: map (e.g. small: 640px, medium: 768px, large: 1024px)
// $condition: 'min' | 'max'
// $media: media types

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 selector $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 'selector' 'div'); }

Liquid

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

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

scss: syntax

@mixin liquid($column ('gutter' $gutter) ('selector' $selector) $direction $breakpoint $condition $media)
// $column: list | map
// $selector: string (child element selector, default "div")
// $direction: 'LTR' | 'RTL'
// $breakpoint: map (e.g. small: 640px, medium: 768px, large: 1024px)
// $condition: 'min' | 'max'
// $media: media types

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

markup

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

scss

.liquid-1 { @include liquid( ('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">
  <div>
    <div data-content>1</div>
  </div>
  <div>
    <div data-content>2</div>
  </div>
</div>

scss

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

Works with breakpoint.

markup

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

scss

.liquid-3 {
  @include liquid((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-4">
  <main data-content>1</main>
  <aside data-content>2</aside>
</div>

scss

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

Holy-grail

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 holy-grail($column ('gutter' $gutter) ('selector' $selector) $direction $breakpoint $condition $media)
// $column: list | map
// $selector: string (child element selector, default "div")
// $direction: LTR | RTL
// $breakpoint: map (e.g. small: 640px, medium: 768px, large: 1024px)
// $condition: 'min' | 'max'
// $media: media types

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

markup

<div class="holy-grail-1">
  <div>
    <div data-content>sidebar1</div>
  </div>
  <div>
    <div data-content>main</div>
  </div>
  <div>
    <div data-content>sidebar2</div>
  </div>
</div>

scss

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

sidebar1

main

sidebar2

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

markup

<div class="holy-grail-2">
  <div>
    <div data-content>sidebar1</div>
  </div>
  <div>
    <div data-content>main</div>
  </div>
  <div>
    <div data-content>sidebar2</div>
  </div>
</div>

scss

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

sidebar1

main

sidebar2

Works with breakpoint.

markup

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

scss

.holy-grail-3 { 
  @include holy-grail((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="holy-grail-4">
  <nav><div data-content>sidebar1</div></nav>
  <main><div data-content>main</div></main>
  <aside><div data-content>sidebar2</div></aside>
</div>

scss

.holy-grail-4 { 
  @include holy-grail((150px, 'auto', 200px) 'selector' ('nav' 'main' 'aside'));
}

main

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($column ('gutter' $gutter) ('selector' $selector) $breakpoint $condition $media 'keep');
// $column: number | map
// $selector: string (child element selector, default "li")
// $breakpoint: map (e.g. small: 640px, medium: 768px, large: 1024px)
// $condition: 'min' | 'max'
// $media: media types

// *** 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 selector $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 'selector' '.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($column (ratio $ratio) ('gutter' $gutter) ('selector' $selector) $breakpoint $condition $media 'keep')
// $column: list | map
// $selector: string (child element selector, default "li")
// $condition: 'min' | 'max'
// $media: media types
// $breakpoint: 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($column $shape 'tight' 'keep')
// $column: px | % | Integer (px, %: size; Integer: columns)
// $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-edge

Make angled edges layout.

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

scss: syntax

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

markup

<div class="angled-edge-sibling">
  <p>Quis ab placeat totam beatae dolorum, harum omnis tempora dolore exercitationem quia, soluta qui deleniti numquam.</p>
</div>
<div class="angled-edge-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-edge-sibling">
  <p>Libero eum accusamus molestiae cum recusandae. Omnis doloremque eos amet, saepe minima fugiat inventore? Non, quaerat.</p>
</div>

scss

.angled-edge-1 {
  @include angled-edge('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.

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

Chart

Pure css responsive chart.

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

scss: syntax

@mixin chart($data $style ('bar-height' $bar-height) ('bar-gap' $bar-gap) ('steps' $steps) ('gutter' $gutter) ('animation' $animation-val) ('hide' $hide))
// $data: map. (color: data, color: data, ...)
// $style: 'bar' | 'column'
// $bar-gap: px | em. Required if mode is "bar".
// $bar-height: px | em
// $steps: list (step count)
// $animation-val: list (duration timing-function)
// $hide: list ('units' 'labels' 'numbers')

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="chart-1">
  <!-- items: chart 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: chart 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: chart label -->
  <div class="labels">
    <div class="label-1">sales</div>
  </div>
</div>

<br>
<div class="chart-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

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

[class*="chart-"] { 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($style ('data' $data) $border-color ('breakpoint' $breakpoint) ('th-width' $th-width) ('count' $count)) { 
  @content;
}
// $style: 'flip-scroll' | 'scroll' | 'toggle' | 'stack'
// $data: list (<th> content, required for 'stack')
// $border-color: color (required for 'stack')
// $breakpoint: px | em | integer
// $th-width: % | px (optional, for 'stack')
// $count: integer (column count, required for 'toggle')

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' 'breakpoint' 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="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' 'breakpoint' 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' 'breakpoint' 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' 'breakpoint' 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($style ('page' $page) ('nav' $nav) 'submenu' 'inside' $nav-size $direction $tops ('breakpoint' $breakpoint) $overlay-background-color $duration)
// $style: 'slide-in' | 'slide-along' | 'slide-out' | 'rotate-in' | 'rotate-out' | 'rotate-in-reverse' | 'scale-down' | 'scale-up' | 'open-door' | 'push' | 'reveal' | 'drawer'
// $tops: map (Required if style is 'drawer'. The top positions of the nav. e.g. (500px: 20px, 768px: 30px, 1025: 40px))
// For styles: 'slide-in', 'rotate-in', 'rotate-out', 'rotate-in-reverse', 'push' and 'drawer', 'nav' can be put inside 'page'.

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">
  <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>
  <div class="off-canvas-1">
    <header>
      <label for="nav-toggle-1" class="menu">Menu</label>
      <label for="nav-toggle-1" class="page-overlay"></label>
    </header>
    <div>Other content</div>
  </div>
</div>

scss

// normal
@include off-canvas('slide-in' 'page' '.off-canvas-1' 'nav' '.off-canvas-nav-1' 'submenu');
 
.off-canvas-nav-1 {
  background-color: #000;
  a, label { 
    color: #fff;
    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.

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' $speed) ('duration' $duration) 'default')
// $style: 'normal' | 'fade-in' | 'slide-in'
// $direction: left | right | top | bottom
// 'shake': shake the form element if user input is not correct
// $speed: s (animation speed)
// $duration: s (the time before the alert panel disappear, for 'slide-in' style)
// 'default': use default black/white theme

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 src="../assets/js/h5f.min.js"></script>
<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($style $background-color $active-color $selector $direction $duration $timing-function)
// $style: 'highlight' | 'simple' | 'slide' | 'ripple' | 'veil' | 'push' | 'cut' | 'bubble' | 'line-drawing'
// $direction: left, right, top, bottom, 'horizontal', 'vertical'
// $selector: . | # | [] | :: (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

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

[class*="button-"] {
  display: inline-block;
  margin: 20px 10px;
  padding: 0 1.2em;
  line-height: 2.6;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

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-color $angle);
// $background-color: 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-shadow

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

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

scss: syntax

@mixin drop-shadow($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-shadow('lifted' 'bottom' 15px); }
.drop-shadow-2 { @include drop-shadow('raised' 'bottom' 15px); }
.drop-shadow-3 { @include drop-shadow('perspective' 'bottom' 15px); }
.drop-shadow-4 { @include drop-shadow('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 $color ('text' $text) ('border-radius' $border-radius))
// $style: 'toggle' | 'slider'
// $size: list | px | em (width height)
// $color: list | color ($default-color $active-color)
// $text: list (e.g. ('on' 'off'))
// $border-radius: px | em ...

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('text' ("on" "off") 36px #dbdbdb blue 'border-radius' 0.2em); }
.switch-2 { @include switch('slider' 30px #dbdbdb red 'border-radius' 50%); }
[class*="switch-"] { margin: 20px; }

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

.push-toggle-1 { 
  // default style
  label {
    margin-right: -1px;
    padding: 0.6em 1.5em;
    background-image: linear-gradient(to bottom, #fff, #e1e1e1);
    border: 1px solid #ccc;
  }
 
  // active style
  @include push-toggle(){
    background-image: linear-gradient(to bottom, #ebebeb, #fff);
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1) inset;
  }
}

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="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

Tab

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

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

scss: syntax

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

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

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

markup

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

  <!-- class .ro-tab is required -->
  <div class="ro-tab">
    <label for="tab-radio-id-1">tab 1</label>
    <label for="tab-radio-id-2">tab 2</label>
    <label for="tab-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

.tab-1 { 
  @include tab('carousel' 3);
  @include tab-active(3) {
    color: #1899FF;
  } 
  @include tab-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 $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($style $selector $activate $direction $duration 'default')
// $style: 'display' | 'scale' | 'rotate'
// $selector: string (Dropdown content selector)
// $activate: 'hover' | 'click'
// '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('right' 'click' '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($direction $color ('content' $content) $border-radius)
// $direction: left | right | top | bottom
// $color: color (tooltip panel background color)
// $content: String | attr() (default: attr(data-tooltip))
// $border-radius: px | em | rem | % | ...

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('bottom' #b02df3 3px); }

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

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($selector $ratio)

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('svg' 1); }

Addons

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($property $breakpoint);
// $property: list | string (font-size | margin | padding)
// $breakpoint: map

markup

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

scss

.fluid-type-1 { @include fluid-type('font-size' (320px: 16px, 1300px: 60px)); }

Neque impedit, voluptatem quas!

Scale-type

Change font-size or other properties based on scale.

Stolen from here

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

scss: syntax

@mixin scale-type($property $base $scale $selectors $reverse);
// $property: string (default font-size)
// $base: px | em | rem | ...
// $scale: number
// $selectors: string list (default ('h1', 'h2', 'h3', 'h4', 'h5', 'h6'))
// $reverse: boolean (default true)

markup

<div class="h1">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="h2">Placeat magnam necessitatibus nemo eveniet quasi.</div>
<div class="h3">Harum labore error soluta, veritatis recusandae?</div>
<div class="h4">Consequuntur amet, est libero nemo eligendi.</div>

scss

@include scale-type(1em 1.2 ('.h1' '.h2' '.h3' '.h4'));

Lorem ipsum dolor sit amet, consectetur.

Placeat magnam necessitatibus nemo eveniet quasi.

Harum labore error soluta, veritatis recusandae?

Consequuntur amet, est libero nemo eligendi.

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

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($media $condition $feature $breakpoint)
// $media: ('all' 'aural' 'braille' 'handheld' 'print' 'projection' 'screen' 'tty' 'tv' 'embossed')
// $condition: 'min' | 'max'
// $feature: 'width' | 'height'

scss

@include bp(640 'min') {};
// @media (min-width: 40em) {};
@include bp(640 'min' 'height') {};
// @media (min-height: 40em) {};
@include bp(640 'max' '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; }
}

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 $count ('saturation' $saturation) ('lightness' $lightness) ('scale' $scale))
// $count: integer
// $saturation: percent
// $lightness: percent
// $scale: 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) ('scale' $scale))
// $saturation: percent
// $lightness: percent
// $scale: 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 $count ('saturation' $saturation) ('lightness' $lightness) ('scale' $scale))

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 $count ('saturation' $saturation) ('lightness' $lightness) ('scale' $scale))
// $count: integer
// $saturation: percent
// $lightness: percent
// $scale: 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 $count ('saturation' $saturation) ('lightness' $lightness) ('scale' $scale))
// $count: integer
// $saturation: percent
// $lightness: percent
// $scale: 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 $count ('saturation' $saturation) ('lightness' $lightness) ('scale' $scale))
// $count: integer
// $saturation: percent
// $lightness: percent
// $scale: 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); }