Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                 <div class="grid"> 
                <div class="grid__item short">
                    <p class="demo-block">Header</p>
                </div>
   
<div class="clear">
<div class="grid__item  two-thirds">
      <p class="demo-block">Content</p>
    </div><!--

             --><div class="grid__item  one-third">
    <p class="demo-block">Sidebar</p>
   </div>
   </div>
                



              
            
!

CSS

              
                .grid__item:not(.short) {
  height: 400px;
}

p {
  height: 100%;
  font-size: 32px;
}

/*------------------------------------*\
    $CSSWIZARDRY-GRIDS
\*------------------------------------*/
/**
 * CONTENTS
 * INTRODUCTION.........How the grid system works.
 * VARIABLES............Your settings.
 * MIXINS...............Library mixins.
 * GRID SETUP...........Build the grid structure.
 * WIDTHS...............Build our responsive widths around our breakpoints.
 * PUSH.................Push classes.
 * PULL.................Pull classes.
 */
/*------------------------------------*\
    $INTRODUCTION
\*------------------------------------*/
/**
 * csswizardry grids provides you with widths to suit a number of breakpoints
 * designed around devices of a size you specify. Out of the box, csswizardry
 * grids caters to the following types of device:
 *
 * palm     --  palm-based devices, like phones and small tablets
 * lap      --  lap-based devices, like iPads or laptops
 * portable --  all of the above
 * desk     --  stationary devices, like desktop computers
 * regular  --  any/all types of device
 *
 * These namespaces are then used in the library to give you the ability to
 * manipulate your layouts based around them, for example:
 *
   <div class="grid__item  one-whole  lap--one-half  desk--one-third">
 *
 * This would give you a grid item which is 100% width unless it is on a lap
 * device, at which point it become 50% wide, or it is on a desktop device, at
 * which point it becomes 33.333% width.
 *
 * csswizardry grids also has push and pull classes which allow you to nudge
 * grid items left and right by a defined amount. These follow the same naming
 * convention as above, but are prepended by either `push--` or `pull--`, for
 * example:
 *
   `class="grid__item  one-half  push--one-half"`
 *
 * This would give you a grid item which is 50% width and pushed over to the
 * right by 50%.
 *
 * All classes in csswizardry grids follow this patten, so you should fairly
 * quickly be able to piece together any combinations you can imagine, for
 * example:
 *
   `class="grid__item  one-whole  lap--one-half  desk--one-third  push--desk--one-third"`
 *
   `class="grid__item  one-quarter  palm--one-half  push--palm--one-half"`
 *
   `class="grid__item  palm--one-third  desk--five-twelfths"`
 */
/*------------------------------------*\
    $VARIABLES
\*------------------------------------*/
/**
 * If you are building a non-responsive site but would still like to use
 * csswizardry-grids, set this to ‘false’:
 */
/**
 * Is this build mobile first? Setting to ‘true’ means that all grids will be
 * 100% width if you do not apply a more specific class to them.
 */
/**
 * Set the spacing between your grid items.
 */
/**
 * Would you like Sass’ silent classes, or regular CSS classes?
 */
/**
 * Would you like push and pull classes enabled?
 */
/**
 * Using `inline-block` means that the grid items need their whitespace removing
 * in order for them to work correctly. Set the following to true if you are
 * going to achieve this by manually removing/commenting out any whitespace in
 * your HTML yourself.
 *
 * Setting this to false invokes a hack which cannot always be guaranteed,
 * please see the following for more detail:
 *
 * github.com/csswizardry/csswizardry-grids/commit/744d4b23c9d2b77d605b5991e54a397df72e0688
 * github.com/csswizardry/inuit.css/issues/170#issuecomment-14859371
 */
/**
 * Define your breakpoints. The first value is the prefix that shall be used for
 * your classes (e.g. `.palm--one-half`), the second value is the media query
 * that the breakpoint fires at.
 */
/**
 * Define which namespaced breakpoints you would like to generate for each of
 * widths, push and pull. This is handy if you only need pull on, say, desk, or
 * you only need a new width breakpoint at mobile sizes. It allows you to only
 * compile as much CSS as you need. All are turned on by default, but you can
 * add and remove breakpoints at will.
 *
 * Push and pull shall only be used if `$push` and/or `$pull` and `$responsive`
 * have been set to ‘true’.
 */
/**
 * You do not need to edit anything from this line onward; csswizardry-grids is
 * good to go. Happy griddin’!
 */
/*------------------------------------*\
    $MIXINS
\*------------------------------------*/
/**
 * These mixins are for the library to use only, you should not need to modify
 * them at all.
 *
 * Enclose a block of code with a media query as named in `$breakpoints`.
 */
/**
 * Drop relative positioning into silent classes which can’t take advantage of
 * the `[class*="push--"]` and `[class*="pull--"]` selectors.
 */
/*------------------------------------*\
    $GRID SETUP
\*------------------------------------*/
/**
 * 1. Allow the grid system to be used on lists.
 * 2. Remove any margins and paddings that might affect the grid system.
 * 3. Apply a negative `margin-left` to negate the columns’ gutters.
 */
.grid, .page, .footer {
  list-style: none;
  /* [1] */
  margin: 0;
  /* [2] */
  padding: 0;
  /* [2] */
  margin-left: -18px;
  /* [3] */
}

/**
 * 1. Cause columns to stack side-by-side.
 * 2. Space columns apart.
 * 3. Align columns to the tops of each other.
 * 4. Full-width unless told to behave otherwise.
 * 5. Required to combine fluid widths and fixed gutters.
 */
.grid__item, .content, .sub-content, .footer__item {
  display: inline-block;
  /* [1] */
  padding-left: 18px;
  /* [2] */
  vertical-align: top;
  /* [3] */
  width: 100%;
  /* [4] */
  -webkit-box-sizing: border-box;
  /* [5] */
  -moz-box-sizing: border-box;
  /* [5] */
  box-sizing: border-box;
  /* [5] */
}

/**
 * Reversed grids allow you to structure your source in the opposite order to
 * how your rendered layout will appear. Extends `.grid`.
 */
.grid--rev, .page {
  direction: rtl;
  text-align: left;
}
.grid--rev > .grid__item, .page > .grid__item, .grid--rev > .content, .page > .content, .grid--rev > .sub-content, .page > .sub-content, .grid--rev > .footer__item, .page > .footer__item {
  direction: ltr;
  text-align: left;
}

/**
 * Gutterless grids have all the properties of regular grids, minus any spacing.
 * Extends `.grid`.
 */
.grid--full, .footer {
  margin-left: 0;
}
.grid--full > .grid__item, .footer > .grid__item, .grid--full > .content, .footer > .content, .grid--full > .sub-content, .footer > .sub-content, .grid--full > .footer__item, .footer > .footer__item {
  padding-left: 0;
}

/**
 * Align the entire grid to the right. Extends `.grid`.
 */
.grid--right {
  text-align: right;
}
.grid--right > .grid__item, .grid--right > .content, .grid--right > .sub-content, .grid--right > .footer__item {
  text-align: left;
}

/**
 * Centered grids align grid items centrally without needing to use push or pull
 * classes. Extends `.grid`.
 */
.grid--center {
  text-align: center;
}
.grid--center > .grid__item, .grid--center > .content, .grid--center > .sub-content, .grid--center > .footer__item {
  text-align: left;
}

/**
 * Align grid cells vertically (`.grid--middle` or `.grid--bottom`). Extends
 * `.grid`.
 */
.grid--middle > .grid__item, .grid--middle > .content, .grid--middle > .sub-content, .grid--middle > .footer__item {
  vertical-align: middle;
}

.grid--bottom > .grid__item, .grid--bottom > .content, .grid--bottom > .sub-content, .grid--bottom > .footer__item {
  vertical-align: bottom;
}

/**
 * Create grids with narrower gutters. Extends `.grid`.
 */
.grid--narrow {
  margin-left: -9px;
}
.grid--narrow > .grid__item, .grid--narrow > .content, .grid--narrow > .sub-content, .grid--narrow > .footer__item {
  padding-left: 9px;
}

/**
 * Create grids with wider gutters. Extends `.grid`.
 */
.grid--wide {
  margin-left: -36px;
}
.grid--wide > .grid__item, .grid--wide > .content, .grid--wide > .sub-content, .grid--wide > .footer__item {
  padding-left: 36px;
}

/*------------------------------------*\
    $WIDTHS
\*------------------------------------*/
/**
 * Create our width classes, prefixed by the specified namespace.
 */
/**
 * Our regular, non-responsive width classes.
 */
/**
 * Whole
 */
.one-whole {
  width: 100%;
}

/**
 * Halves
 */
.one-half, .two-quarters, .three-sixths, .four-eighths, .five-tenths, .six-twelfths {
  width: 50%;
}

/**
 * Thirds
 */
.one-third, .two-sixths, .four-twelfths {
  width: 33.333%;
}

.two-thirds, .four-sixths, .eight-twelfths {
  width: 66.666%;
}

/**
 * Quarters
 */
.one-quarter, .two-eighths, .three-twelfths {
  width: 25%;
}

.three-quarters, .six-eighths, .nine-twelfths {
  width: 75%;
}

/**
 * Fifths
 */
.one-fifth, .two-tenths {
  width: 20%;
}

.two-fifths, .four-tenths {
  width: 40%;
}

.three-fifths, .six-tenths {
  width: 60%;
}

.four-fifths, .eight-tenths {
  width: 80%;
}

/**
 * Sixths
 */
.one-sixth, .two-twelfths {
  width: 16.666%;
}

.five-sixths, .ten-twelfths {
  width: 83.333%;
}

/**
 * Eighths
 */
.one-eighth {
  width: 12.5%;
}

.three-eighths {
  width: 37.5%;
}

.five-eighths {
  width: 62.5%;
}

.seven-eighths {
  width: 87.5%;
}

/**
 * Tenths
 */
.one-tenth {
  width: 10%;
}

.three-tenths {
  width: 30%;
}

.seven-tenths {
  width: 70%;
}

.nine-tenths {
  width: 90%;
}

/**
 * Twelfths
 */
.one-twelfth {
  width: 8.333%;
}

.five-twelfths {
  width: 41.666%;
}

.seven-twelfths {
  width: 58.333%;
}

.eleven-twelfths {
  width: 91.666%;
}

/**
 * Our responsive classes, if we have enabled them.
 */
@media only screen and (max-width: 480px) {
  /**
   * Whole
   */
  .palm--one-whole {
    width: 100%;
  }

  /**
   * Halves
   */
  .palm--one-half, .palm--two-quarters, .palm--three-sixths, .palm--four-eighths, .palm--five-tenths, .palm--six-twelfths {
    width: 50%;
  }

  /**
   * Thirds
   */
  .palm--one-third, .palm--two-sixths, .palm--four-twelfths {
    width: 33.333%;
  }

  .palm--two-thirds, .palm--four-sixths, .palm--eight-twelfths {
    width: 66.666%;
  }

  /**
   * Quarters
   */
  .palm--one-quarter, .palm--two-eighths, .palm--three-twelfths {
    width: 25%;
  }

  .palm--three-quarters, .palm--six-eighths, .palm--nine-twelfths {
    width: 75%;
  }

  /**
   * Fifths
   */
  .palm--one-fifth, .palm--two-tenths {
    width: 20%;
  }

  .palm--two-fifths, .palm--four-tenths {
    width: 40%;
  }

  .palm--three-fifths, .palm--six-tenths {
    width: 60%;
  }

  .palm--four-fifths, .palm--eight-tenths {
    width: 80%;
  }

  /**
   * Sixths
   */
  .palm--one-sixth, .palm--two-twelfths {
    width: 16.666%;
  }

  .palm--five-sixths, .palm--ten-twelfths {
    width: 83.333%;
  }

  /**
   * Eighths
   */
  .palm--one-eighth {
    width: 12.5%;
  }

  .palm--three-eighths {
    width: 37.5%;
  }

  .palm--five-eighths {
    width: 62.5%;
  }

  .palm--seven-eighths {
    width: 87.5%;
  }

  /**
   * Tenths
   */
  .palm--one-tenth {
    width: 10%;
  }

  .palm--three-tenths {
    width: 30%;
  }

  .palm--seven-tenths {
    width: 70%;
  }

  .palm--nine-tenths {
    width: 90%;
  }

  /**
   * Twelfths
   */
  .palm--one-twelfth {
    width: 8.333%;
  }

  .palm--five-twelfths {
    width: 41.666%;
  }

  .palm--seven-twelfths {
    width: 58.333%;
  }

  .palm--eleven-twelfths {
    width: 91.666%;
  }
}
@media only screen and (min-width: 481px) and (max-width: 1023px) {
  /**
   * Whole
   */
  .lap--one-whole {
    width: 100%;
  }

  /**
   * Halves
   */
  .lap--one-half, .lap--two-quarters, .lap--three-sixths, .lap--four-eighths, .lap--five-tenths, .lap--six-twelfths, .footer__item {
    width: 50%;
  }

  /**
   * Thirds
   */
  .lap--one-third, .lap--two-sixths, .lap--four-twelfths {
    width: 33.333%;
  }

  .lap--two-thirds, .lap--four-sixths, .lap--eight-twelfths {
    width: 66.666%;
  }

  /**
   * Quarters
   */
  .lap--one-quarter, .lap--two-eighths, .lap--three-twelfths {
    width: 25%;
  }

  .lap--three-quarters, .lap--six-eighths, .lap--nine-twelfths {
    width: 75%;
  }

  /**
   * Fifths
   */
  .lap--one-fifth, .lap--two-tenths {
    width: 20%;
  }

  .lap--two-fifths, .lap--four-tenths {
    width: 40%;
  }

  .lap--three-fifths, .lap--six-tenths {
    width: 60%;
  }

  .lap--four-fifths, .lap--eight-tenths {
    width: 80%;
  }

  /**
   * Sixths
   */
  .lap--one-sixth, .lap--two-twelfths {
    width: 16.666%;
  }

  .lap--five-sixths, .lap--ten-twelfths {
    width: 83.333%;
  }

  /**
   * Eighths
   */
  .lap--one-eighth {
    width: 12.5%;
  }

  .lap--three-eighths {
    width: 37.5%;
  }

  .lap--five-eighths {
    width: 62.5%;
  }

  .lap--seven-eighths {
    width: 87.5%;
  }

  /**
   * Tenths
   */
  .lap--one-tenth {
    width: 10%;
  }

  .lap--three-tenths, .sub-content {
    width: 30%;
  }

  .lap--seven-tenths, .content {
    width: 70%;
  }

  .lap--nine-tenths {
    width: 90%;
  }

  /**
   * Twelfths
   */
  .lap--one-twelfth {
    width: 8.333%;
  }

  .lap--five-twelfths {
    width: 41.666%;
  }

  .lap--seven-twelfths {
    width: 58.333%;
  }

  .lap--eleven-twelfths {
    width: 91.666%;
  }
}
@media only screen and (max-width: 1023px) {
  /**
   * Whole
   */
  .portable--one-whole {
    width: 100%;
  }

  /**
   * Halves
   */
  .portable--one-half, .portable--two-quarters, .portable--three-sixths, .portable--four-eighths, .portable--five-tenths, .portable--six-twelfths {
    width: 50%;
  }

  /**
   * Thirds
   */
  .portable--one-third, .portable--two-sixths, .portable--four-twelfths {
    width: 33.333%;
  }

  .portable--two-thirds, .portable--four-sixths, .portable--eight-twelfths {
    width: 66.666%;
  }

  /**
   * Quarters
   */
  .portable--one-quarter, .portable--two-eighths, .portable--three-twelfths {
    width: 25%;
  }

  .portable--three-quarters, .portable--six-eighths, .portable--nine-twelfths {
    width: 75%;
  }

  /**
   * Fifths
   */
  .portable--one-fifth, .portable--two-tenths {
    width: 20%;
  }

  .portable--two-fifths, .portable--four-tenths {
    width: 40%;
  }

  .portable--three-fifths, .portable--six-tenths {
    width: 60%;
  }

  .portable--four-fifths, .portable--eight-tenths {
    width: 80%;
  }

  /**
   * Sixths
   */
  .portable--one-sixth, .portable--two-twelfths {
    width: 16.666%;
  }

  .portable--five-sixths, .portable--ten-twelfths {
    width: 83.333%;
  }

  /**
   * Eighths
   */
  .portable--one-eighth {
    width: 12.5%;
  }

  .portable--three-eighths {
    width: 37.5%;
  }

  .portable--five-eighths {
    width: 62.5%;
  }

  .portable--seven-eighths {
    width: 87.5%;
  }

  /**
   * Tenths
   */
  .portable--one-tenth {
    width: 10%;
  }

  .portable--three-tenths {
    width: 30%;
  }

  .portable--seven-tenths {
    width: 70%;
  }

  .portable--nine-tenths {
    width: 90%;
  }

  /**
   * Twelfths
   */
  .portable--one-twelfth {
    width: 8.333%;
  }

  .portable--five-twelfths {
    width: 41.666%;
  }

  .portable--seven-twelfths {
    width: 58.333%;
  }

  .portable--eleven-twelfths {
    width: 91.666%;
  }
}
@media only screen and (min-width: 1024px) {
  /**
   * Whole
   */
  .desk--one-whole {
    width: 100%;
  }

  /**
   * Halves
   */
  .desk--one-half, .desk--two-quarters, .desk--three-sixths, .desk--four-eighths, .desk--five-tenths, .desk--six-twelfths {
    width: 50%;
  }

  /**
   * Thirds
   */
  .desk--one-third, .desk--two-sixths, .desk--four-twelfths {
    width: 33.333%;
  }

  .desk--two-thirds, .desk--four-sixths, .desk--eight-twelfths {
    width: 66.666%;
  }

  /**
   * Quarters
   */
  .desk--one-quarter, .desk--two-eighths, .desk--three-twelfths, .footer__item {
    width: 25%;
  }

  .desk--three-quarters, .desk--six-eighths, .desk--nine-twelfths {
    width: 75%;
  }

  /**
   * Fifths
   */
  .desk--one-fifth, .desk--two-tenths {
    width: 20%;
  }

  .desk--two-fifths, .desk--four-tenths, .sub-content {
    width: 40%;
  }

  .desk--three-fifths, .desk--six-tenths, .content {
    width: 60%;
  }

  .desk--four-fifths, .desk--eight-tenths {
    width: 80%;
  }

  /**
   * Sixths
   */
  .desk--one-sixth, .desk--two-twelfths {
    width: 16.666%;
  }

  .desk--five-sixths, .desk--ten-twelfths {
    width: 83.333%;
  }

  /**
   * Eighths
   */
  .desk--one-eighth {
    width: 12.5%;
  }

  .desk--three-eighths {
    width: 37.5%;
  }

  .desk--five-eighths {
    width: 62.5%;
  }

  .desk--seven-eighths {
    width: 87.5%;
  }

  /**
   * Tenths
   */
  .desk--one-tenth {
    width: 10%;
  }

  .desk--three-tenths {
    width: 30%;
  }

  .desk--seven-tenths {
    width: 70%;
  }

  .desk--nine-tenths {
    width: 90%;
  }

  /**
   * Twelfths
   */
  .desk--one-twelfth {
    width: 8.333%;
  }

  .desk--five-twelfths {
    width: 41.666%;
  }

  .desk--seven-twelfths {
    width: 58.333%;
  }

  .desk--eleven-twelfths {
    width: 91.666%;
  }
}
/*------------------------------------*\
    $PUSH
\*------------------------------------*/
/**
 * Push classes, to move grid items over to the right by certain amounts.
 */
/**
 * Not a particularly great selector, but the DRYest way to do things.
 */
[class*="push--"] {
  position: relative;
}

/**
 * Whole
 */
.push--one-whole {
  left: 100%;
}

/**
 * Halves
 */
.push--one-half, .push--two-quarters, .push--three-sixths, .push--four-eighths, .push--five-tenths, .push--six-twelfths {
  left: 50%;
}

/**
 * Thirds
 */
.push--one-third, .push--two-sixths, .push--four-twelfths {
  left: 33.333%;
}

.push--two-thirds, .push--four-sixths, .push--eight-twelfths {
  left: 66.666%;
}

/**
 * Quarters
 */
.push--one-quarter, .push--two-eighths, .push--three-twelfths {
  left: 25%;
}

.push--three-quarters, .push--six-eighths, .push--nine-twelfths {
  left: 75%;
}

/**
 * Fifths
 */
.push--one-fifth, .push--two-tenths {
  left: 20%;
}

.push--two-fifths, .push--four-tenths {
  left: 40%;
}

.push--three-fifths, .push--six-tenths {
  left: 60%;
}

.push--four-fifths, .push--eight-tenths {
  left: 80%;
}

/**
 * Sixths
 */
.push--one-sixth, .push--two-twelfths {
  left: 16.666%;
}

.push--five-sixths, .push--ten-twelfths {
  left: 83.333%;
}

/**
 * Eighths
 */
.push--one-eighth {
  left: 12.5%;
}

.push--three-eighths {
  left: 37.5%;
}

.push--five-eighths {
  left: 62.5%;
}

.push--seven-eighths {
  left: 87.5%;
}

/**
 * Tenths
 */
.push--one-tenth {
  left: 10%;
}

.push--three-tenths {
  left: 30%;
}

.push--seven-tenths {
  left: 70%;
}

.push--nine-tenths {
  left: 90%;
}

/**
 * Twelfths
 */
.push--one-twelfth {
  left: 8.333%;
}

.push--five-twelfths {
  left: 41.666%;
}

.push--seven-twelfths {
  left: 58.333%;
}

.push--eleven-twelfths {
  left: 91.666%;
}

@media only screen and (max-width: 480px) {
  /**
   * Whole
   */
  .push--palm--one-whole {
    left: 100%;
  }

  /**
   * Halves
   */
  .push--palm--one-half, .push--palm--two-quarters, .push--palm--three-sixths, .push--palm--four-eighths, .push--palm--five-tenths, .push--palm--six-twelfths {
    left: 50%;
  }

  /**
   * Thirds
   */
  .push--palm--one-third, .push--palm--two-sixths, .push--palm--four-twelfths {
    left: 33.333%;
  }

  .push--palm--two-thirds, .push--palm--four-sixths, .push--palm--eight-twelfths {
    left: 66.666%;
  }

  /**
   * Quarters
   */
  .push--palm--one-quarter, .push--palm--two-eighths, .push--palm--three-twelfths {
    left: 25%;
  }

  .push--palm--three-quarters, .push--palm--six-eighths, .push--palm--nine-twelfths {
    left: 75%;
  }

  /**
   * Fifths
   */
  .push--palm--one-fifth, .push--palm--two-tenths {
    left: 20%;
  }

  .push--palm--two-fifths, .push--palm--four-tenths {
    left: 40%;
  }

  .push--palm--three-fifths, .push--palm--six-tenths {
    left: 60%;
  }

  .push--palm--four-fifths, .push--palm--eight-tenths {
    left: 80%;
  }

  /**
   * Sixths
   */
  .push--palm--one-sixth, .push--palm--two-twelfths {
    left: 16.666%;
  }

  .push--palm--five-sixths, .push--palm--ten-twelfths {
    left: 83.333%;
  }

  /**
   * Eighths
   */
  .push--palm--one-eighth {
    left: 12.5%;
  }

  .push--palm--three-eighths {
    left: 37.5%;
  }

  .push--palm--five-eighths {
    left: 62.5%;
  }

  .push--palm--seven-eighths {
    left: 87.5%;
  }

  /**
   * Tenths
   */
  .push--palm--one-tenth {
    left: 10%;
  }

  .push--palm--three-tenths {
    left: 30%;
  }

  .push--palm--seven-tenths {
    left: 70%;
  }

  .push--palm--nine-tenths {
    left: 90%;
  }

  /**
   * Twelfths
   */
  .push--palm--one-twelfth {
    left: 8.333%;
  }

  .push--palm--five-twelfths {
    left: 41.666%;
  }

  .push--palm--seven-twelfths {
    left: 58.333%;
  }

  .push--palm--eleven-twelfths {
    left: 91.666%;
  }
}
@media only screen and (min-width: 481px) and (max-width: 1023px) {
  /**
   * Whole
   */
  .push--lap--one-whole {
    left: 100%;
  }

  /**
   * Halves
   */
  .push--lap--one-half, .push--lap--two-quarters, .push--lap--three-sixths, .push--lap--four-eighths, .push--lap--five-tenths, .push--lap--six-twelfths {
    left: 50%;
  }

  /**
   * Thirds
   */
  .push--lap--one-third, .push--lap--two-sixths, .push--lap--four-twelfths {
    left: 33.333%;
  }

  .push--lap--two-thirds, .push--lap--four-sixths, .push--lap--eight-twelfths {
    left: 66.666%;
  }

  /**
   * Quarters
   */
  .push--lap--one-quarter, .push--lap--two-eighths, .push--lap--three-twelfths {
    left: 25%;
  }

  .push--lap--three-quarters, .push--lap--six-eighths, .push--lap--nine-twelfths {
    left: 75%;
  }

  /**
   * Fifths
   */
  .push--lap--one-fifth, .push--lap--two-tenths {
    left: 20%;
  }

  .push--lap--two-fifths, .push--lap--four-tenths {
    left: 40%;
  }

  .push--lap--three-fifths, .push--lap--six-tenths {
    left: 60%;
  }

  .push--lap--four-fifths, .push--lap--eight-tenths {
    left: 80%;
  }

  /**
   * Sixths
   */
  .push--lap--one-sixth, .push--lap--two-twelfths {
    left: 16.666%;
  }

  .push--lap--five-sixths, .push--lap--ten-twelfths {
    left: 83.333%;
  }

  /**
   * Eighths
   */
  .push--lap--one-eighth {
    left: 12.5%;
  }

  .push--lap--three-eighths {
    left: 37.5%;
  }

  .push--lap--five-eighths {
    left: 62.5%;
  }

  .push--lap--seven-eighths {
    left: 87.5%;
  }

  /**
   * Tenths
   */
  .push--lap--one-tenth {
    left: 10%;
  }

  .push--lap--three-tenths {
    left: 30%;
  }

  .push--lap--seven-tenths {
    left: 70%;
  }

  .push--lap--nine-tenths {
    left: 90%;
  }

  /**
   * Twelfths
   */
  .push--lap--one-twelfth {
    left: 8.333%;
  }

  .push--lap--five-twelfths {
    left: 41.666%;
  }

  .push--lap--seven-twelfths {
    left: 58.333%;
  }

  .push--lap--eleven-twelfths {
    left: 91.666%;
  }
}
@media only screen and (max-width: 1023px) {
  /**
   * Whole
   */
  .push--portable--one-whole {
    left: 100%;
  }

  /**
   * Halves
   */
  .push--portable--one-half, .push--portable--two-quarters, .push--portable--three-sixths, .push--portable--four-eighths, .push--portable--five-tenths, .push--portable--six-twelfths {
    left: 50%;
  }

  /**
   * Thirds
   */
  .push--portable--one-third, .push--portable--two-sixths, .push--portable--four-twelfths {
    left: 33.333%;
  }

  .push--portable--two-thirds, .push--portable--four-sixths, .push--portable--eight-twelfths {
    left: 66.666%;
  }

  /**
   * Quarters
   */
  .push--portable--one-quarter, .push--portable--two-eighths, .push--portable--three-twelfths {
    left: 25%;
  }

  .push--portable--three-quarters, .push--portable--six-eighths, .push--portable--nine-twelfths {
    left: 75%;
  }

  /**
   * Fifths
   */
  .push--portable--one-fifth, .push--portable--two-tenths {
    left: 20%;
  }

  .push--portable--two-fifths, .push--portable--four-tenths {
    left: 40%;
  }

  .push--portable--three-fifths, .push--portable--six-tenths {
    left: 60%;
  }

  .push--portable--four-fifths, .push--portable--eight-tenths {
    left: 80%;
  }

  /**
   * Sixths
   */
  .push--portable--one-sixth, .push--portable--two-twelfths {
    left: 16.666%;
  }

  .push--portable--five-sixths, .push--portable--ten-twelfths {
    left: 83.333%;
  }

  /**
   * Eighths
   */
  .push--portable--one-eighth {
    left: 12.5%;
  }

  .push--portable--three-eighths {
    left: 37.5%;
  }

  .push--portable--five-eighths {
    left: 62.5%;
  }

  .push--portable--seven-eighths {
    left: 87.5%;
  }

  /**
   * Tenths
   */
  .push--portable--one-tenth {
    left: 10%;
  }

  .push--portable--three-tenths {
    left: 30%;
  }

  .push--portable--seven-tenths {
    left: 70%;
  }

  .push--portable--nine-tenths {
    left: 90%;
  }

  /**
   * Twelfths
   */
  .push--portable--one-twelfth {
    left: 8.333%;
  }

  .push--portable--five-twelfths {
    left: 41.666%;
  }

  .push--portable--seven-twelfths {
    left: 58.333%;
  }

  .push--portable--eleven-twelfths {
    left: 91.666%;
  }
}
@media only screen and (min-width: 1024px) {
  /**
   * Whole
   */
  .push--desk--one-whole {
    left: 100%;
  }

  /**
   * Halves
   */
  .push--desk--one-half, .push--desk--two-quarters, .push--desk--three-sixths, .push--desk--four-eighths, .push--desk--five-tenths, .push--desk--six-twelfths {
    left: 50%;
  }

  /**
   * Thirds
   */
  .push--desk--one-third, .push--desk--two-sixths, .push--desk--four-twelfths {
    left: 33.333%;
  }

  .push--desk--two-thirds, .push--desk--four-sixths, .push--desk--eight-twelfths {
    left: 66.666%;
  }

  /**
   * Quarters
   */
  .push--desk--one-quarter, .push--desk--two-eighths, .push--desk--three-twelfths {
    left: 25%;
  }

  .push--desk--three-quarters, .push--desk--six-eighths, .push--desk--nine-twelfths {
    left: 75%;
  }

  /**
   * Fifths
   */
  .push--desk--one-fifth, .push--desk--two-tenths {
    left: 20%;
  }

  .push--desk--two-fifths, .push--desk--four-tenths {
    left: 40%;
  }

  .push--desk--three-fifths, .push--desk--six-tenths {
    left: 60%;
  }

  .push--desk--four-fifths, .push--desk--eight-tenths {
    left: 80%;
  }

  /**
   * Sixths
   */
  .push--desk--one-sixth, .push--desk--two-twelfths {
    left: 16.666%;
  }

  .push--desk--five-sixths, .push--desk--ten-twelfths {
    left: 83.333%;
  }

  /**
   * Eighths
   */
  .push--desk--one-eighth {
    left: 12.5%;
  }

  .push--desk--three-eighths {
    left: 37.5%;
  }

  .push--desk--five-eighths {
    left: 62.5%;
  }

  .push--desk--seven-eighths {
    left: 87.5%;
  }

  /**
   * Tenths
   */
  .push--desk--one-tenth {
    left: 10%;
  }

  .push--desk--three-tenths {
    left: 30%;
  }

  .push--desk--seven-tenths {
    left: 70%;
  }

  .push--desk--nine-tenths {
    left: 90%;
  }

  /**
   * Twelfths
   */
  .push--desk--one-twelfth {
    left: 8.333%;
  }

  .push--desk--five-twelfths {
    left: 41.666%;
  }

  .push--desk--seven-twelfths {
    left: 58.333%;
  }

  .push--desk--eleven-twelfths {
    left: 91.666%;
  }
}
/*------------------------------------*\
    $PULL
\*------------------------------------*/
/**
 * Pull classes, to move grid items back to the left by certain amounts.
 */
/**
 * Not a particularly great selector, but the DRYest way to do things.
 */
[class*="pull--"] {
  position: relative;
}

/**
 * Whole
 */
.pull--one-whole {
  right: 100%;
}

/**
 * Halves
 */
.pull--one-half, .pull--two-quarters, .pull--three-sixths, .pull--four-eighths, .pull--five-tenths, .pull--six-twelfths {
  right: 50%;
}

/**
 * Thirds
 */
.pull--one-third, .pull--two-sixths, .pull--four-twelfths {
  right: 33.333%;
}

.pull--two-thirds, .pull--four-sixths, .pull--eight-twelfths {
  right: 66.666%;
}

/**
 * Quarters
 */
.pull--one-quarter, .pull--two-eighths, .pull--three-twelfths {
  right: 25%;
}

.pull--three-quarters, .pull--six-eighths, .pull--nine-twelfths {
  right: 75%;
}

/**
 * Fifths
 */
.pull--one-fifth, .pull--two-tenths {
  right: 20%;
}

.pull--two-fifths, .pull--four-tenths {
  right: 40%;
}

.pull--three-fifths, .pull--six-tenths {
  right: 60%;
}

.pull--four-fifths, .pull--eight-tenths {
  right: 80%;
}

/**
 * Sixths
 */
.pull--one-sixth, .pull--two-twelfths {
  right: 16.666%;
}

.pull--five-sixths, .pull--ten-twelfths {
  right: 83.333%;
}

/**
 * Eighths
 */
.pull--one-eighth {
  right: 12.5%;
}

.pull--three-eighths {
  right: 37.5%;
}

.pull--five-eighths {
  right: 62.5%;
}

.pull--seven-eighths {
  right: 87.5%;
}

/**
 * Tenths
 */
.pull--one-tenth {
  right: 10%;
}

.pull--three-tenths {
  right: 30%;
}

.pull--seven-tenths {
  right: 70%;
}

.pull--nine-tenths {
  right: 90%;
}

/**
 * Twelfths
 */
.pull--one-twelfth {
  right: 8.333%;
}

.pull--five-twelfths {
  right: 41.666%;
}

.pull--seven-twelfths {
  right: 58.333%;
}

.pull--eleven-twelfths {
  right: 91.666%;
}

@media only screen and (max-width: 480px) {
  /**
   * Whole
   */
  .pull--palm--one-whole {
    right: 100%;
  }

  /**
   * Halves
   */
  .pull--palm--one-half, .pull--palm--two-quarters, .pull--palm--three-sixths, .pull--palm--four-eighths, .pull--palm--five-tenths, .pull--palm--six-twelfths {
    right: 50%;
  }

  /**
   * Thirds
   */
  .pull--palm--one-third, .pull--palm--two-sixths, .pull--palm--four-twelfths {
    right: 33.333%;
  }

  .pull--palm--two-thirds, .pull--palm--four-sixths, .pull--palm--eight-twelfths {
    right: 66.666%;
  }

  /**
   * Quarters
   */
  .pull--palm--one-quarter, .pull--palm--two-eighths, .pull--palm--three-twelfths {
    right: 25%;
  }

  .pull--palm--three-quarters, .pull--palm--six-eighths, .pull--palm--nine-twelfths {
    right: 75%;
  }

  /**
   * Fifths
   */
  .pull--palm--one-fifth, .pull--palm--two-tenths {
    right: 20%;
  }

  .pull--palm--two-fifths, .pull--palm--four-tenths {
    right: 40%;
  }

  .pull--palm--three-fifths, .pull--palm--six-tenths {
    right: 60%;
  }

  .pull--palm--four-fifths, .pull--palm--eight-tenths {
    right: 80%;
  }

  /**
   * Sixths
   */
  .pull--palm--one-sixth, .pull--palm--two-twelfths {
    right: 16.666%;
  }

  .pull--palm--five-sixths, .pull--palm--ten-twelfths {
    right: 83.333%;
  }

  /**
   * Eighths
   */
  .pull--palm--one-eighth {
    right: 12.5%;
  }

  .pull--palm--three-eighths {
    right: 37.5%;
  }

  .pull--palm--five-eighths {
    right: 62.5%;
  }

  .pull--palm--seven-eighths {
    right: 87.5%;
  }

  /**
   * Tenths
   */
  .pull--palm--one-tenth {
    right: 10%;
  }

  .pull--palm--three-tenths {
    right: 30%;
  }

  .pull--palm--seven-tenths {
    right: 70%;
  }

  .pull--palm--nine-tenths {
    right: 90%;
  }

  /**
   * Twelfths
   */
  .pull--palm--one-twelfth {
    right: 8.333%;
  }

  .pull--palm--five-twelfths {
    right: 41.666%;
  }

  .pull--palm--seven-twelfths {
    right: 58.333%;
  }

  .pull--palm--eleven-twelfths {
    right: 91.666%;
  }
}
@media only screen and (min-width: 481px) and (max-width: 1023px) {
  /**
   * Whole
   */
  .pull--lap--one-whole {
    right: 100%;
  }

  /**
   * Halves
   */
  .pull--lap--one-half, .pull--lap--two-quarters, .pull--lap--three-sixths, .pull--lap--four-eighths, .pull--lap--five-tenths, .pull--lap--six-twelfths {
    right: 50%;
  }

  /**
   * Thirds
   */
  .pull--lap--one-third, .pull--lap--two-sixths, .pull--lap--four-twelfths {
    right: 33.333%;
  }

  .pull--lap--two-thirds, .pull--lap--four-sixths, .pull--lap--eight-twelfths {
    right: 66.666%;
  }

  /**
   * Quarters
   */
  .pull--lap--one-quarter, .pull--lap--two-eighths, .pull--lap--three-twelfths {
    right: 25%;
  }

  .pull--lap--three-quarters, .pull--lap--six-eighths, .pull--lap--nine-twelfths {
    right: 75%;
  }

  /**
   * Fifths
   */
  .pull--lap--one-fifth, .pull--lap--two-tenths {
    right: 20%;
  }

  .pull--lap--two-fifths, .pull--lap--four-tenths {
    right: 40%;
  }

  .pull--lap--three-fifths, .pull--lap--six-tenths {
    right: 60%;
  }

  .pull--lap--four-fifths, .pull--lap--eight-tenths {
    right: 80%;
  }

  /**
   * Sixths
   */
  .pull--lap--one-sixth, .pull--lap--two-twelfths {
    right: 16.666%;
  }

  .pull--lap--five-sixths, .pull--lap--ten-twelfths {
    right: 83.333%;
  }

  /**
   * Eighths
   */
  .pull--lap--one-eighth {
    right: 12.5%;
  }

  .pull--lap--three-eighths {
    right: 37.5%;
  }

  .pull--lap--five-eighths {
    right: 62.5%;
  }

  .pull--lap--seven-eighths {
    right: 87.5%;
  }

  /**
   * Tenths
   */
  .pull--lap--one-tenth {
    right: 10%;
  }

  .pull--lap--three-tenths {
    right: 30%;
  }

  .pull--lap--seven-tenths {
    right: 70%;
  }

  .pull--lap--nine-tenths {
    right: 90%;
  }

  /**
   * Twelfths
   */
  .pull--lap--one-twelfth {
    right: 8.333%;
  }

  .pull--lap--five-twelfths {
    right: 41.666%;
  }

  .pull--lap--seven-twelfths {
    right: 58.333%;
  }

  .pull--lap--eleven-twelfths {
    right: 91.666%;
  }
}
@media only screen and (max-width: 1023px) {
  /**
   * Whole
   */
  .pull--portable--one-whole {
    right: 100%;
  }

  /**
   * Halves
   */
  .pull--portable--one-half, .pull--portable--two-quarters, .pull--portable--three-sixths, .pull--portable--four-eighths, .pull--portable--five-tenths, .pull--portable--six-twelfths {
    right: 50%;
  }

  /**
   * Thirds
   */
  .pull--portable--one-third, .pull--portable--two-sixths, .pull--portable--four-twelfths {
    right: 33.333%;
  }

  .pull--portable--two-thirds, .pull--portable--four-sixths, .pull--portable--eight-twelfths {
    right: 66.666%;
  }

  /**
   * Quarters
   */
  .pull--portable--one-quarter, .pull--portable--two-eighths, .pull--portable--three-twelfths {
    right: 25%;
  }

  .pull--portable--three-quarters, .pull--portable--six-eighths, .pull--portable--nine-twelfths {
    right: 75%;
  }

  /**
   * Fifths
   */
  .pull--portable--one-fifth, .pull--portable--two-tenths {
    right: 20%;
  }

  .pull--portable--two-fifths, .pull--portable--four-tenths {
    right: 40%;
  }

  .pull--portable--three-fifths, .pull--portable--six-tenths {
    right: 60%;
  }

  .pull--portable--four-fifths, .pull--portable--eight-tenths {
    right: 80%;
  }

  /**
   * Sixths
   */
  .pull--portable--one-sixth, .pull--portable--two-twelfths {
    right: 16.666%;
  }

  .pull--portable--five-sixths, .pull--portable--ten-twelfths {
    right: 83.333%;
  }

  /**
   * Eighths
   */
  .pull--portable--one-eighth {
    right: 12.5%;
  }

  .pull--portable--three-eighths {
    right: 37.5%;
  }

  .pull--portable--five-eighths {
    right: 62.5%;
  }

  .pull--portable--seven-eighths {
    right: 87.5%;
  }

  /**
   * Tenths
   */
  .pull--portable--one-tenth {
    right: 10%;
  }

  .pull--portable--three-tenths {
    right: 30%;
  }

  .pull--portable--seven-tenths {
    right: 70%;
  }

  .pull--portable--nine-tenths {
    right: 90%;
  }

  /**
   * Twelfths
   */
  .pull--portable--one-twelfth {
    right: 8.333%;
  }

  .pull--portable--five-twelfths {
    right: 41.666%;
  }

  .pull--portable--seven-twelfths {
    right: 58.333%;
  }

  .pull--portable--eleven-twelfths {
    right: 91.666%;
  }
}
@media only screen and (min-width: 1024px) {
  /**
   * Whole
   */
  .pull--desk--one-whole {
    right: 100%;
  }

  /**
   * Halves
   */
  .pull--desk--one-half, .pull--desk--two-quarters, .pull--desk--three-sixths, .pull--desk--four-eighths, .pull--desk--five-tenths, .pull--desk--six-twelfths {
    right: 50%;
  }

  /**
   * Thirds
   */
  .pull--desk--one-third, .pull--desk--two-sixths, .pull--desk--four-twelfths {
    right: 33.333%;
  }

  .pull--desk--two-thirds, .pull--desk--four-sixths, .pull--desk--eight-twelfths {
    right: 66.666%;
  }

  /**
   * Quarters
   */
  .pull--desk--one-quarter, .pull--desk--two-eighths, .pull--desk--three-twelfths {
    right: 25%;
  }

  .pull--desk--three-quarters, .pull--desk--six-eighths, .pull--desk--nine-twelfths {
    right: 75%;
  }

  /**
   * Fifths
   */
  .pull--desk--one-fifth, .pull--desk--two-tenths {
    right: 20%;
  }

  .pull--desk--two-fifths, .pull--desk--four-tenths {
    right: 40%;
  }

  .pull--desk--three-fifths, .pull--desk--six-tenths {
    right: 60%;
  }

  .pull--desk--four-fifths, .pull--desk--eight-tenths {
    right: 80%;
  }

  /**
   * Sixths
   */
  .pull--desk--one-sixth, .pull--desk--two-twelfths {
    right: 16.666%;
  }

  .pull--desk--five-sixths, .pull--desk--ten-twelfths {
    right: 83.333%;
  }

  /**
   * Eighths
   */
  .pull--desk--one-eighth {
    right: 12.5%;
  }

  .pull--desk--three-eighths {
    right: 37.5%;
  }

  .pull--desk--five-eighths {
    right: 62.5%;
  }

  .pull--desk--seven-eighths {
    right: 87.5%;
  }

  /**
   * Tenths
   */
  .pull--desk--one-tenth {
    right: 10%;
  }

  .pull--desk--three-tenths {
    right: 30%;
  }

  .pull--desk--seven-tenths {
    right: 70%;
  }

  .pull--desk--nine-tenths {
    right: 90%;
  }

  /**
   * Twelfths
   */
  .pull--desk--one-twelfth {
    right: 8.333%;
  }

  .pull--desk--five-twelfths {
    right: 41.666%;
  }

  .pull--desk--seven-twelfths {
    right: 58.333%;
  }

  .pull--desk--eleven-twelfths {
    right: 91.666%;
  }
}
html {
  font: 0.75em/1.5 sans-serif;
  background-color: #f9f9f9;
  color: #444;
}

body {
  max-width: 1200px;
  margin: 18px auto;
  padding: 0 18px;
}

.hero {
  text-align: center;
  padding: 54px 0;
}
.hero p {
  font-size: 1.333em;
  margin: 0;
}

h1 {
  font-size: 6em;
  text-align: center;
  margin: 0;
  line-height: 1;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.25);
}
@media screen and (max-width: 700px) {
  h1 {
    font-size: 3em;
  }
}

p {
  margin: 0;
  margin-bottom: 18px;
}

a {
  color: #f43059;
  font-weight: bold;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.demo-block {
  background-color: #f43059;
  color: #fff;
  padding: 18px;
}
              
            
!

JS

              
                
              
            
!
999px

Console