anecdote 0.0.1 → 0.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 4641e18c737d5fb6546d8bf0add32c0c69193a6e
-  data.tar.gz: 4df4c0b94462e4e4190f040bc9f0aa19ceae33f7
+  metadata.gz: b4e4ca066c40b4ed29a9f2ecf44cab9a63f2ce84
+  data.tar.gz: 5ed5ba6ffb4cd7a1e579bbebedc27a7625007351
 SHA512:
-  metadata.gz: 62020cd96e0f29f868202dbb1930c260572c0bfee590e6511973fc5e0a6460c96d336242929c97669d5f65e89f71312c28929dd800c8705086ffb2e8565351d0
-  data.tar.gz: bc55dc1e316136ab53d45a5a9e8013463ba6605f3be42f46d7dee445e4f9e38f826d95f56a22190bc07dc6439f37b62e800ff4de7fb83ef54eae81df407a71d1
+  metadata.gz: 2a578c2ab7b831f5567c94586d9148ab5f1cffb92ab4e3ec1bee97adf8cff54588288d1b0fbfd38a7ddadec29f71695ba82be0058dd2e1a78e99b8838e1b4f5a
+  data.tar.gz: 53c44756f2e8a4072bcdac3c5ce052524bd4f90f41edd31e88c6fb649e18f228aa688638172ad0eebaea4159b3459847f6a587f55dbc3b5080a607c3c3f9e1cd

data/app/assets/stylesheets/anecdote/_helpers.css.scss

@@ -1,12 +1,148 @@
-@mixin formatted-text( $tmp-size: 1, $tmp-margin-top: 1, $tmp-margin-bottom: 1, $tmp-line-height: 1.5 ) {
+
+$remify-baseline: 16 !default;
+$respond-device-medium-handheld: 350px;
+$respond-device-large-handheld: 450px;
+$respond-device-tablet: 650px;
+$respond-device-laptop: 960px;
+$respond-device-large-monitor: 1300px;
+$fix-mqs: false !default;
+
+
+
+@mixin scope-variation($sel) {
+  @at-root #{selector-append('.v-size-full-width', &)} {
+    @content;
+  }
+}
+
+
+
+
+@mixin formatted-text( $tmp-size: 1, $tmp-margin-top: 1, $tmp-margin-bottom: 1, $tmp-line-height: 1.65 ) {
   font-size: $tmp-size * 1em;
   @if $tmp-line-height != false {
-    line-height: ( 1 + ( ( $tmp-line-height - 1 ) / $tmp-size ) ) * 1em
+    line-height: ( 1 + ( ( $tmp-line-height - 1 ) / $tmp-size ) ) * 1em;
   }
   @if $tmp-margin-top != false {
-    margin-top: ( $tmp-margin-top / $tmp-size ) * 1em
+    margin-top: ( $tmp-margin-top / $tmp-size ) * 1em;
   }
   @if $tmp-margin-bottom != false {
-    margin-bottom: ( $tmp-margin-bottom / $tmp-size ) * 1em
+    margin-bottom: ( $tmp-margin-bottom / $tmp-size ) * 1em;
+  }
+}
+
+
+// remify units
+
+@function strip-unit($num) {
+  @return $num / ($num * 0 + 1);
+}
+
+@mixin remify($properties, $values...) {
+  @each $property in $properties {
+    $max: length($values);
+    $pxValues: '';
+    $remValues: '';
+
+    @for $i from 1 through $max {
+      $value: strip-unit(nth($values, $i));
+      $pxValues: #{$pxValues + round($value*$remify-baseline)}px;
+      @if $i < $max {
+        $pxValues: #{$pxValues + " "};
+      }
+    }
+
+    @for $i from 1 through $max {
+      $value: strip-unit(nth($values, $i));
+      $remValues: #{$remValues + $value}rem;
+      @if $i < $max {
+        $remValues: #{$remValues + " "};
+      }
+    }
+
+    #{$property}: $pxValues;
+    #{$property}: $remValues;
+  }
+}
+
+
+// responsive breakpoints
+@mixin respond($type, $device: false) {
+  // Determine device width
+  $width: 1px;
+  @if $device == medium-handheld {
+    $width: $respond-device-medium-handheld;
+  } @else if $device == large-handheld {
+    $width: $respond-device-large-handheld;
+  } @else if $device == tablet {
+    $width: $respond-device-tablet;
+  } @else if $device == laptop {
+    $width: $respond-device-laptop;
+  } @else if $device == large-monitor {
+    $width: $respond-device-large-monitor;
+  }
+  // If we're outputting for a fixed media query set...
+  @if $fix-mqs and $type == min {
+    // ...and if we should apply these rules...
+    @if $fix-mqs >= $width {
+      // ...output the content the user gave us.
+      @content;
+    }
+  } @else {
+    // Otherwise, output it using a regular media query
+    @if $type == min {
+      @media screen and (min-width: $width) {
+        @content;
+      }
+    } @else if $type == max {
+      @media screen and (max-width: $width) {
+        @content;
+      }
+    } @else if $type == retina {
+      @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
+        @content;
+      }
+    }
+  }
+}
+
+$old-ie: false !default;
+@mixin old-ie {
+  // Only use this content if we're dealing with old IE
+  @if $old-ie {
+    @content;
+  }
+}
+
+
+@mixin padding-vertical( $tmp-size, $tmp-second-size: false ) {
+  padding-top: $tmp-size;
+  @if $tmp-second-size == false {
+    $tmp-second-size: $tmp-size;
+  }
+  padding-bottom: $tmp-second-size;
+}
+
+@mixin padding-horizontal( $tmp-size, $tmp-second-size: false ) {
+  padding-left: $tmp-size;
+  @if $tmp-second-size == false {
+    $tmp-second-size: $tmp-size;
+  }
+  padding-right: $tmp-second-size;
+}
+
+@mixin margin-vertical( $tmp-size, $tmp-second-size: false ) {
+  margin-top: $tmp-size;
+  @if $tmp-second-size == false {
+    $tmp-second-size: $tmp-size;
+  }
+  margin-bottom: $tmp-second-size;
+}
+
+@mixin margin-horizontal( $tmp-size, $tmp-second-size: false ) {
+  margin-left: $tmp-size;
+  @if $tmp-second-size == false {
+    $tmp-second-size: $tmp-size;
   }
+  margin-right: $tmp-second-size;
 }

data/app/assets/stylesheets/anecdote/_wysicontent.css.scss

@@ -1,16 +1,34 @@
+/*---------------------------------------------------
+--- Anecdote: Wysicontent
+--- content blocks of formatted text and modules
+--------------------------------------------------- */
+
 .anecdote-wysicontent-ndj4ab {
-  > *:first-child { margin-top: 0; }
-  > *:last-child { margin-bottom: 0; }
+  > *:first-child {
+    margin-top: 0;
+  }
+  > *:last-child {
+    margin-bottom: 0;
+  }
   > p, > ul, > ol, > blockquote, > pre {
-    @include formatted-text( 1, 1, 1, 1.75 );
+    @include formatted-text( 1, 1, 1 );
   }
   > h1, > h2, > h3, > h4 {
     font-weight: 600;
   }
-  > h1 { @include formatted-text( 2 ); }
-  > h2 { @include formatted-text( 1.5, 3 ); }
-  > h3 { @include formatted-text( 1.25, 3 ); }
-  > h4 { @include formatted-text( 1.15, 3 ); }
+  > h1 {
+    @include formatted-text( 2 );
+  }
+  > h2 {
+    @include formatted-text( 1.55, 3 );
+  }
+  > h3 {
+    @include formatted-text( 1.3, 3 );
+  }
+  > h4 {
+    @include formatted-text( 1.15, 3 );
+    font-style: italic;
+  }
   > code, > pre {
     font-family: monospace;
   }
@@ -19,31 +37,26 @@
     quotes: '\201C' '\201D';
     font-style: italic;
     color: #777;
-    &:before { content: '\201C' }
-    &:after { content: '\201D' }
+    &:before {
+      content: '\201C'
+    }
+    &:after {
+      content: '\201D'
+    }
   }
   > ul, > ol {
-    padding-left: 1.5em;
+    padding-left: 0;
     > li {
+      @include remify( margin-left, 1.5 );
       @include formatted-text( 1, 0.75, 0.75 );
     }
   }
-  .generatedcontent & > ul > li {
-    list-style: none;
-    position: relative;
-    &:before {
-      background-color: #777;
-      display: block;
-      position: absolute;
-      top: 0.57em;
-      left: -1em;
-      width: 4px;
-      height: 4px;
-      content: '';
-    }
-  }
 }
 
+/*---------------------------------------------------
+--- Anecdote: Media embeds
+--- generic styles applied to media such as images, videos, etc
+--------------------------------------------------- */
 .anecdote-intrinsic-embed-n42ha1 {
   max-width: 100%;
   width: 100%;
@@ -63,19 +76,97 @@
   }
 }
 
+/*---------------------------------------------------
+--- Anecdote: Modules
+--- generic styles for images, pullquotes, asides, etc
+--------------------------------------------------- */
 .anecdote-module-3ba83n {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  @include remify( margin-top margin-bottom, 1 );
+  @include margin-horizontal( auto );
+  max-width: 100%;
+
+  // sizes
+  &.v-size-small {
+    @include remify( width, 12 );
+  }
+  &.v-size-medium {
+    @include remify( width, 20 );
+  }
+  &.v-size-big {
+    @include remify( width, 40 );
+  }
+  &.v-size-full-width {
+    width: auto;
+  }
+
+  // positioning
+  &.v-float-right, &.v-float-left {
+    @include margin-horizontal( auto );
+  }
+  @include respond(min, large-handheld) {
+    &.v-size-small {
+      @include remify( margin, 0.35, 2, 1 );
+      &.v-float-right {
+        float: right;
+        margin-right: 0;
+      }
+      &.v-float-left {
+        float: left;
+        margin-left: 0;
+      }
+    }
+  }
+  @include respond(min, laptop) {
+    &.v-size-medium {
+      @include remify( margin, 0.35, 2, 1 );
+      &.v-float-right {
+        float: right;
+        margin-right: 0;
+      }
+      &.v-float-left {
+        float: left;
+        margin-left: 0;
+      }
+    }
+  }
 }
 
+/*---------------------------------------------------
+--- Anecdote: Graphic
+--------------------------------------------------- */
+.anecdote-graphic-dn32ja {
+  @include remify( font-size, 0.85 );
+  color: #555;
+  .caption {
+    @include remify( padding-top, 0.5 );
+  }
+}
+
+/*---------------------------------------------------
+--- Anecdote: Pull Quote
+--------------------------------------------------- */
 .anecdote-pull-quote-sba2ha {
-  font-style: italic;
   @include formatted-text( 1.3, false, false );
   color: #333;
-  border: 1px solid #eee;
+  border: 2px solid #eee;
   border-left: none;
   border-right: none;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-
+  font-style: italic;
+  em {
+    font-style: normal;
+  }
+  @include remify( margin-top margin-bottom, 1.7 );
+  @include remify( padding-top padding-bottom, 1 );
+  &.v-float-right, &.v-float-left {
+    @include respond(max, large-handheld) {
+      &.v-size-small {
+        width: 100%;
+      }
+    }
+    @include respond(max, laptop) {
+      &.v-size-medium {
+        width: 100%;
+      }
+    }
+  }
 }

data/lib/anecdote/version.rb

@@ -1,3 +1,3 @@
 module Anecdote
-  VERSION = "0.0.1"
+  VERSION = "0.0.2"
 end

data/lib/anecdote.rb

@@ -21,7 +21,7 @@ module Anecdote
   def self.init_raconteur
     raconteur.settings.setting_quotes = '$'
     raconteur.processors.register!('graphic', {
-      template: '<div class="{{ klass }}"><div class="image">{{ image }}</div><div class="caption">{{ caption }}</div></div>',
+      template: '<div class="{{ klass }}"><div class="inner"><div class="image">{{ image }}</div><div class="caption anecdote-wysicontent-ndj4ab">{{ caption }}</div></div></div>',
       handler: lambda do |settings|
         klass = (['anecdote-graphic-dn32ja'] + module_classes(settings)).flatten.join(' ')
         image = view_context.content_tag(:div, class: 'anecdote-intrinsic-embed-n42ha1') do
@@ -35,7 +35,7 @@ module Anecdote
     raconteur.processors.register!('pull-quote', {
       handler: lambda do |settings|
         klass = (['anecdote-pull-quote-sba2ha'] + module_classes(settings)).flatten.join(' ')
-        view_context.content_tag(:div, markdown_and_parse(settings[:_yield_]), class: klass)
+        view_context.content_tag(:div, view_context.content_tag(:div, markdown_and_parse(settings[:text]), class: 'inner'), class: klass)
       end
       })
   end

data/test/dummy/app/assets/stylesheets/{application.css → _reset.css.scss}

@@ -31,9 +31,6 @@ footer, header, hgroup, menu, nav, section {
 body {
 	line-height: 1;
 }
-ol, ul {
-	list-style: none;
-}
 blockquote, q {
 	quotes: none;
 }

data/test/dummy/app/assets/stylesheets/application.css.scss

@@ -0,0 +1,187 @@
+$remify-baseline: 20;
+@import 'reset.css.scss';
+@import 'anecdote/application.css.scss';
+
+/*---------------------------------------------------
+--- Helpers
+--------------------------------------------------- */
+@mixin primary-font {
+  font-family: "minion-pro", "Minion Pro";
+}
+@mixin secondary-font {
+  font-family: "museo-sans", Avenir;
+}
+@mixin centered-standard-width {
+  width: 30rem;
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+@mixin add-page-padding {
+  @include remify(padding-left padding-right, 1);
+  @include respond(min, tablet) {
+    @include remify(padding-left padding-right, 2);
+  }
+}
+@mixin undo-page-padding {
+  @include remify(margin-left margin-right, -1);
+  @include respond(min, tablet) {
+    @include remify(margin-left margin-right, -2);
+  }
+}
+
+/*---------------------------------------------------
+--- Anecdote: Wysicontent
+--- content blocks of formatted text and modules
+--------------------------------------------------- */
+.anecdote-wysicontent-ndj4ab {
+  > h1, > h2, > h3, > h4 {
+    @include secondary-font;
+  }
+  > h1, > h2, > h3, > h4, > p, > ul, > ol, > blockquote, > pre {
+    @include centered-standard-width;
+    strong {
+      font-weight: 600;
+    }
+    em {
+      font-style: italic;
+    }
+  }
+}
+
+/*---------------------------------------------------
+--- Anecdote: Media embeds
+--- generic styles applied to media such as images, videos, etc
+--------------------------------------------------- */
+.anecdote-intrinsic-embed-n42ha1 {
+  box-shadow: 0 1px 4px -1px rgba( 0, 0, 0, 0.3 );
+  border-top: 1px solid rgba( 0, 0, 0, 0.06 );
+  border-radius: 3px;
+  .anecdote-module-3ba83n.v-size-full-width & {
+    border-radius: 0;
+  }
+}
+
+/*---------------------------------------------------
+--- Anecdote: Modules
+--- generic styles for images, pullquotes, asides, etc
+--------------------------------------------------- */
+.anecdote-module-3ba83n {
+  @include centered-standard-width;
+  &.v-size-full-width > .inner {
+    @include undo-page-padding;
+  }
+  // fix floats so they "attach" to side of content rather than edge of screen
+  // &.v-float-left, .v-float-right {
+  //   @include respond(min, large-monitor) {
+  //     &.v-size-small {
+  //       float: none;
+  //       width: 30rem;
+  //       max-width: 100%;
+  //       margin-left: auto;
+  //       margin-right: auto;
+  //       > .inner {
+  //         float: left;
+  //         width: 12rem;
+  //         margin-right: 2rem;
+  //         margin-left: -15rem;
+  //       }
+  //     }
+  //   }
+  // }
+}
+
+/*---------------------------------------------------
+--- Anecdote: Graphic
+--------------------------------------------------- */
+.anecdote-graphic-dn32ja {
+  @include secondary-font;
+  .caption {
+    @include scope-variation( '.v-size-full-width' ) {
+      @include remify( margin-left margin-right, 1 );
+    }
+  }
+}
+
+/*---------------------------------------------------
+--- Anecdote: Pull Quote
+--------------------------------------------------- */
+.anecdote-pull-quote-sba2ha {
+  @include secondary-font;
+}
+
+/*---------------------------------------------------
+--- Typography
+--------------------------------------------------- */
+html {
+  @include primary-font;
+  // Size
+  font-size: 16px;
+  @include respond(min, large-handheld) {
+    font-size: 18px;
+  }
+  @include respond(min, tablet) {
+    font-size: 20px;
+  }
+  @include respond(min, large-monitor) {
+    font-size: 22px;
+  }
+  // Rendering
+  @include respond(retina) {
+    -webkit-font-smoothing: antialiased;
+    font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+select, textarea, input {
+  @include secondary-font;
+}
+
+/*---------------------------------------------------
+--- Links
+--------------------------------------------------- */
+a {
+  color: #164996;
+  text-decoration: none;
+  &:visited {
+    color: inherit;
+  }
+  &:hover, &:focus {
+    color: #1c52a3;
+    text-decoration: underline;
+  }
+  .anecdote-wysicontent-ndj4ab & {
+    text-decoration: underline;
+    &:visited {
+      color: #3a1b94;
+    }
+    &:hover, &:focus {
+      color: #2967c5;
+      text-decoration: none;
+    }
+  }
+}
+
+/*---------------------------------------------------
+--- Mobile fixes
+--------------------------------------------------- */
+// Prevent iOS and IE text size adjust after device orientation change without disabling user zoom
+html {
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+// Prevent iOS auto-zoom on form focus without disabling user zoom
+select, textarea, input {
+  font-size: 16px;
+}
+
+/*---------------------------------------------------
+--- Layout
+--------------------------------------------------- */
+.container-s2n3k1 {
+  max-width: 1000px;
+  margin: 0 auto;
+}
+body {
+  @include add-page-padding;
+}

data/test/dummy/app/views/layouts/application.html.erb

@@ -2,16 +2,17 @@
 <html>
 <head>
   <title>Dummy</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
-  <%= stylesheet_link_tag 'base', media: 'all', 'data-turbolinks-track' => true %>
-  <%= stylesheet_link_tag 'anecdote/application', media: 'all', 'data-turbolinks-track' => true %>
   <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
   <%= csrf_meta_tags %>
 </head>
 <body>
 
-<div class="anecdote-wysicontent-ndj4ab">
-  <%= yield %>
+<div class="container-s2n3k1-disabled">
+  <div class="anecdote-wysicontent-ndj4ab">
+    <%= yield %>
+  </div>
 </div>
 
 </body>

data/test/dummy/app/views/pages/article.markdown

@@ -1,18 +1,16 @@
 # Category-Specific Sorting: A New Way to Sort Products
 
-{{ graphic: assets-path=category-specific-sorting-01-rei-mock-up.jpg + size=big + caption=$This is the 3rd in a series of 9 articles based on research findings from our e-commerce [product list usability](http://baymard.com/research/ecommerce-product-lists study).$ }}
+{{ graphic: assets-path=category-specific-sorting-01-rei-mock-up.jpg + size=full-width + caption=$This is the 3rd in a series of 9 articles based on research findings from our e-commerce [product list usability](http://baymard.com/research/ecommerce-product-lists study).$ }}
 
 We considered naming this article "the sort type all users want but zero sites offer" because category-specific sorting really is one of those rare instances where an obvious feature has somehow been **completely overlooked** by the e-commerce community. After all, it really shouldn't come as a surprise that users would like to sort a list of TVs by "Screen size" or a collection of hard drives by "Storage capacity".
 
-{{% pull-quote: float=left + size=big %}}
-By "category-specific sort types" we mean any sorting options that are only available in one or a few select categories
-{{% end %}}
+{{ pull-quote: size=big + text=$By "category-specific sort types" we mean any sorting options that are only available in one or a few select categories$ }}
 
-During our research study on product list usability the test subjects repeatedly sought out these kinds of category-specific sort types – however, to no avail since seemingly **zero sites** offer them. Even after "benchmarking":http://baymard.com/ecommerce-product-lists/benchmark/site-reviews the product lists of 50 major e-commerce sites we have yet to find a site that truly offer category-specific sorting.
+During our research study on product list usability the test subjects repeatedly sought out these kinds of category-specific sort types – however, to no avail since seemingly **zero sites** offer them. Even after [benchmarking](http://baymard.com/ecommerce-product-lists/benchmark/site-reviews) the product lists of 50 major e-commerce sites we have yet to find a site that truly offer category-specific sorting.
 
 In this article we'll outline our research findings on why **category-specific sorting** is so important to the user's product finding abilities, and how it can be implemented.
 
-{{ graphic: assets-path=category-specific-sorting-02-bestbuy.jpg + caption=$A mockup we've created of what category-specific sort types could look like at BestBuy. Here the three last sorting options – for TV screen size, refresh rate, and display depth – are available exclusively within the TV category while the other sort types are available site-wide.$ }}
+{{ graphic: float=left + size=small + assets-path=category-specific-sorting-02-bestbuy.jpg + caption=$A mockup we've created of what category-specific sort types could look like at BestBuy. Here the three last sorting options – for TV screen size, refresh rate, and display depth – are available exclusively within the TV category while the other sort types are available site-wide.$ }}
 
 Given that category-specific sorting is such an uncommon features, let's quickly **define** the term. By "category-specific sort types" we mean any sorting options that are only available in one or a few select categories (because they wouldn't make sense as site-wide sorting options – they only make sense for the products within those particular categories). Examples include being able to sort suitcases by volume, fishing rods by length, pens by point size, hard drives by storage capacity and spindle speed, road bikes by weight, etc. It's this category specificity that makes them different from common site-wide sort types such as 'Best Selling', 'Relevance', 'User Ratings', and 'Price', which are typically available for all products and categories throughout a site.
 
@@ -25,7 +23,7 @@ This makes _Filters_ great for setting "hard" boundaries while _Sorting_ is opti
 - **Filters** – Sets a "hard" boundary. Any product that doesn't strictly fall within the selected value(s) will be cut off. It is a great way for users to exclude any products that don't match specific criteria.
 - **Sorting** – Applies a "soft" boundary. The products are ordered by the chosen sort type (in the case of category-specific sort types that typically means a product attribute). It changes the sequence of the products but doesn't exclude any items, enabling users to still see items that fall outside their initial boundary.
 
-Our "product list":http://baymard.com/research/ecommerce-product-lists usability testing showed that **users need both** hard boundaries (i.e. filters) and soft boundaries (i.e. sorting) for optimal control over the product list. Depending on the user's knowledge of the product domain and their own needs and restrictions they may have very strict and 100% clear criteria the product must fall within, in which case "hard" boundary filters are appropriate.
+Our [product list](http://baymard.com/research/ecommerce-product-lists) usability testing showed that **users need both** hard boundaries (i.e. filters) and soft boundaries (i.e. sorting) for optimal control over the product list. Depending on the user's knowledge of the product domain and their own needs and restrictions they may have very strict and 100% clear criteria the product must fall within, in which case "hard" boundary filters are appropriate.
 
 However, in many cases users don't have that strict criteria and sometimes they don't even know what an appropriate filtering range would be, in which case "soft" boundary sorting is more suitable. For instance, the user might **care about** a product attribute without having a specific criteria for it, or they may not have the necessary domain knowledge to set meaningful cut-off points.
 
@@ -94,14 +92,14 @@ Many product verticals do, however, have such numeric attributes and category-sp
 Determining which product attributes should be implemented as category-specific sort types is a fairly straight-forward matter: simply take the 3-5 most important numeric category-specific filters available in each category on your site and turn them into sorting options too. Let's tackle some common questions that typically arise as a result of that statement:
 
 - _Why 3-5 attributes?_ To avoid overly long sorting drop-downs that induce choice paralysis. Although don't get too stuck on the specific numbers, just make sure the number of sorting options don't get completely out of hand.
-- _How do I identify which filters are the "most important"?_ Well, these filters should already be identified as the order of the filtering options should be determined on their relative importance. This importance may be arrived at through expert (human) judgement or programmatically through various proxies (filter popularity, number of products, feature impact on price, etc) – or a combination of the two. An example of a very important product trait would of course be '"price per unit":{{post:price-per-unit}}' in categories where this attribute is relevant (i.e. where multi-quantity products are common, such as golf balls, copy paper, liquids, etc).
+- _How do I identify which filters are the "most important"?_ Well, these filters should already be identified as the order of the filtering options should be determined on their relative importance. This importance may be arrived at through expert (human) judgement or programmatically through various proxies (filter popularity, number of products, feature impact on price, etc) – or a combination of the two. An example of a very important product trait would of course be '[price per unit](http://baymard.com/blog/price-per-unit)' in categories where this attribute is relevant (i.e. where multi-quantity products are common, such as golf balls, copy paper, liquids, etc).
 - _Why numeric attributes?_ Because they have a natural progression that makes them suitable for sorting. (See the above section.)
 - _Why category-specific filters?_ The category-specific sort types should be provided in addition to the regular site-wide sort types such as "Price". We assume you already have these in place and are here dealing with dynamically created sorting options that won't be available site-wide. (Note: If category-specific filters aren't already implemented, stop reading this article and implement them right now! Our usability testing revealed this to be one of the most fundamental features to the user's browsing experience.)
 - _How do I turn the filters into sorting options as well?_ Well, with category-specific filters already in place, this is a simple matter of reusing the data powering those filters. After all, in order to be filterable the product data will already be fully structured and can therefore simply be reused for sorting purposes as well.
 
 So in summary: We limit the number of category-specific filters to double as sort types to _3-5 attributes_ to avoid unruly and intimidating sorting drop-downs. Because of this restraint we obviously want to pick the _most important_ product attributes to cater for the most likely use cases on our site. And we implement all of this by tapping into the data structures already in place for category-specific filters.
 
-{{ graphic: assets-path=category-specific-sorting-02-bestbuy.jpg + caption=$If familiar with the "Kano model":{{post:kano-model}}, the attributes to use as category-specific sort types will often be the "Performance" attributes within each product vertical.$ }}
+{{ graphic: assets-path=category-specific-sorting-02-bestbuy.jpg + caption=$If familiar with the [Kano model](http://baymard.com/blog/kano-model), the attributes to use as category-specific sort types will often be the "Performance" attributes within each product vertical.$ }}
 
 The beauty of category-specific sort types is that they tap into **investments already made** in filters, effectively increasing the return on those investments. Because it's a technical feature, it doesn't require continuous data collection or curation (beyond what is already being done for the filters), and it's therefore a one-time investment that permanently increases the value of the continuous investments made in collecting, curating and maintaining structured product attributes.
 
@@ -115,10 +113,10 @@ A major bonus of implementing both "hard" and "soft" boundary controls (i.e. fil
 
 If you have category-specific filters, the data is already there (and if you don't, you really should implement them!), ready to be reused for category-specific _sort types_ as well. Category-specific sort types are thus a great opportunity to gain even more from the structured data you've invested so dearly in collecting, curating and maintaining.
 
-{{ graphic: assets-path=category-specific-sorting-08-faceted-sorting.jpg + alignment=right + size=small }}
+{{ graphic: assets-path=category-specific-sorting-08-faceted-sorting.jpg + float=right + size=small }}
 
-Indeed, this may even be taken to the next level by combining category-specific sort types with scope selection in higher-level categories and on "sub-category pages":{{post:ecommerce-sub-category-pages}}. This combines category-specific sort types with "faceted sorting":{{post:faceted-sorting}}, allowing highly relevant and popular category-specific sort types to be displayed at (higher) category levels where all products don't actually share the attribute to be sorted by. This would furthermore make category-specific sort types possible in search results despite some of the results not having the sorting attribute.
+Indeed, this may even be taken to the next level by combining category-specific sort types with scope selection in higher-level categories and on [sub-category pages](http://baymard.com/blog/ecommerce-sub-category-pages). This combines category-specific sort types with [faceted sorting](http://baymard.com/blog/faceted-sorting), allowing highly relevant and popular category-specific sort types to be displayed at (higher) category levels where all products don't actually share the attribute to be sorted by. This would furthermore make category-specific sort types possible in search results despite some of the results not having the sorting attribute.
 
-Sadly, category-specific sort types are a good example of just how **neglected sorting** is on e-commerce sites – numerous users want these sort types yet no sites offer them! It's a rare example of an obvious innovation that e-commerce sites have yet to make. (Tip: you can see "46 different sorting interfaces":http://baymard.com/ecommerce-product-lists/benchmark/page-types/sorting-tool from the top US e-commerce sites we benchmarked for this study.)
+Sadly, category-specific sort types are a good example of just how **neglected sorting** is on e-commerce sites – numerous users want these sort types yet no sites offer them! It's a rare example of an obvious innovation that e-commerce sites have yet to make. (Tip: you can see [46 different sorting interfaces](http://baymard.com/ecommerce-product-lists/benchmark/page-types/sorting-tool) from the top US e-commerce sites we benchmarked for this study.)
 
 Category-specific sort types are ultimately about **empowering users** with the tools they need to reach the product selection they want and have it presented in a way that suits their unique interests. It's an obvious opportunity to increase the return on existing product data investments, empower your users and get ahead of the competition.