bookwyrm

OPGWdr

A Pen by Matt Vanderpol on CodePen.

License.

bookwyrm

%div.container
  %span.with-js JS is available
  %span.without-js JS is not available

bookwyrm

%div.tiles__container
  %h2.sub-heading
    = "3 Up"
  %div{:class => 'tiles tiles--3-up' }
    - (1..9).each do |i|
      - width = 180 + Random.rand(20)
      - height = 70 + Random.rand(30)
      %div{class: 'tile-item tile-item--logo'}
        %img{src: "http://lorempixel.com/#{width}/#{height}/nature?a=#{i}"}

bookwyrm

%div{:class => 'grid grid--6-up grid--centered' }
  %ul{class: 'list list--grid'}
    - (1..18).each do |i|
      %li{class: 'list__item grid-item'}
        %img{src: "http://lorempixel.com/110/70/sports?a=#{i}"}

bookwyrm

<span class="seven-seg animating">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" width="44" height="82" viewBox="0, 0, 44, 82">
  <g class="Layer_1">
    <g class="off-segs">
      <path d="M7.041,44 L12,49.209 L11.973,67.143 L6.986,72 L2,67.171 L2,49.101 L7.041,44 z" fill="#DBDADA" class="Shape"/>
      <path d="M37.041,10 L42,15.209 L41.973,33.143 L36.986,38 L32,33.171 L32,15.101 L37.041,10 z" fill="#DBDADA" class="Shape"/>
      <path d="M37.041,44 L42,49.209 L41.973,67.143 L36.986,72 L32,67.171 L32,49.101 L37.041,44 z" fill="#DBDADA" class="Shape"/>
      <path d="M36,41.041 L30.791,46 L12.857,45.973 L8,40.986 L12.829,36 L30.899,36 L36,41.041 z" fill="#DBDADA" class="Shape"/>
      <path d="M36,7.041 L30.791,12 L12.857,11.973 L8,6.986 L12.829,2 L30.899,2 L36,7.041 z" fill="#DBDADA" class="Shape"/>
      <path d="M36,75.041 L30.791,80 L12.857,79.973 L8,74.986 L12.829,70 L30.899,70 L36,75.041 z" fill="#DBDADA" class="Shape"/>

bookwyrm

// Susy Get
// --------
// Return one setting from a grid
// - $key     : <keyword>
// - $layout  : <settings>
@function susy-get(
  $key,
  $layout: map-merge($susy-defaults, $susy)
) {
  $layout: parse-grid($layout);

bookwyrm

// If the `@mixin` is being included inside of a media query, then set the
// `$in-mq` argument to `true` so that the non `@extend` image sprite is
// used. See _sprites.scss#show-icon-sprite-in-mq() for more info.
@mixin button($size: 'small', $in-mq: false) {
  // Trimmed styles not pertinent to the example...
  position: relative;
  
  &:after {
    content: '';
    @if $in-mq == true {

bookwyrm

// Get Layout
// ----------
// Return a new layout based on current and given settings
// - $layout: <settings>
// - $clean: boolean
@function _get-layout(
  $layout,
  $clean: false
) {
  $layout: layout($layout);

bookwyrm

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

bookwyrm

@mixin placeholders() {
  ::-webkit-input-placeholder {
    @content;
  }
  ::-moz-placeholder {
    @content;
  }

  :-ms-input-placeholder {
    @content;