KatieK2

<nav>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</nav>

KatieK2

// ----
// Sass (v3.3.1)
// Compass (v1.0.0.alpha.18)
// ----

@import "compass";

@mixin post-link ($class, $color, $hover) {
    a.#{$class}:link {
        color: $color;

KatieK2

// ----
// Sass (v3.3.0)
// Compass (v1.0.0.alpha.18)
// ----

$imgKey: random(5);

$list: apple, banana, cherry, durian, eggplant;
$nth: nth($list, $imgKey);

KatieK2

#Rolling Spider Eye Codes

The LEDs in Parrot's Rolling Spider drone tell you the status of the bot. Here's what they mean, I think.

• Left: Off / Right: Red = Charging
• Left: Green / Right: Green = Connected via Bluetooth
• Left: Off / Right: Off = Done Charging or Powered Off?
• Left: Red / Right: Red = Turning On?
• Left: Green / Right: Red = Connected as a USB Drive?

KatieK2

CSS Columns - Pinterest

More Pinteresty. Works in FF, Chrome, not IE9.

A Pen by KatieK on CodePen.

License.

KatieK2

<table>
  <tr>
    <td class="hulk1">70% highlight</td>
    <td class="hulk2">50% highlight</td>
    <td class="hulk3">30% highlight</td>
    <td class="hulk4">$hulk</td>
    <td class="hulk5">30% shadow</td>
    <td class="hulk6">50% shadow</td>
    <td class="hulk7">70% shadow</td>
  </tr>

KatieK2

<ul class="theme theme--crisp">
  <li>#313340</li>
  <li>#f0f0e3</li>
  <li>#f9c27b</li>
  <li>#ef8531</li>
  <li>#f36519</li>
</ul>

<ul class="theme theme--funky">
  <li>#da0054</li>

KatieK2

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

=coloured-flyout($color)
  border: solid tint($color, 10%) 1px
  background-color: tint($color, 20%)
    
.flyout

KatieK2

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

$width: 18.75em; /* 300px */
$grid-spacing: 2em; 

.column { margin-right: $width + $grid-spacing*2; }

KatieK2

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@mixin flex_percentage($className) {
    @for $i from 1 through 100 {
        @if $i % 5 == 0 {
            .#{$className}#{$i} {
                width: $i * 1%;