Merge pull request #24 from kremalicious/flexbox-grid

Flexbox grid

.travis.yml

@@ -0,0 +1,16 @@
+sudo: false
+language: ruby
+rvm:
+    - 2.2.2
+    - 1.9.3
+cache: bundler
+addons:
+    apt:
+        packages:
+            - libgsl0-dev
+before_script:
+    - npm install gulp bower -g
+    - npm install
+    - bower install
+    - bundle install
+script: gulp build

Gemfile

@@ -14,4 +14,5 @@ group :development do
     gem 'mini_magick'
     gem 'fileutils'
     gem 'gsl'
+    gem 'narray'
 end

README.md

@@ -3,7 +3,8 @@ kremalicious3
 
 > [kremalicious.com](http://kremalicious.com) based on [Jekyll](http://jekyllrb.com). Neat.
 
-[ ![Codeship Status for kremalicious/kremalicious3](https://www.codeship.io/projects/f6973090-9f04-0131-a2b7-625e8177ce9a/status?branch=master)](https://www.codeship.io/projects/18092) [![Dependency Status](https://gemnasium.com/kremalicious/kremalicious3.svg)](https://gemnasium.com/kremalicious/kremalicious3)
+[ ![Codeship Status for kremalicious/kremalicious3](https://www.codeship.io/projects/f6973090-9f04-0131-a2b7-625e8177ce9a/status?branch=master)](https://www.codeship.io/projects/18092)
+[![Dependency Status](https://gemnasium.com/kremalicious/kremalicious3.svg)](https://gemnasium.com/kremalicious/kremalicious3)
 
 
 Requirements
@@ -37,7 +38,7 @@ Get up and running
 Run the following command from the repository's root folder to install all dependencies.
 
 ```bash
-npm install
+npm install && bower install && bundle install
 ```
 
 ### Development build

_src/_assets/js/app.js

@@ -15,9 +15,9 @@ var siteNavigation = {
 
     siteSearch: function() {
 
-        var $content = $('.content'),
+        var $content = $('.site__content'),
             $searchlink = $('.search-btn'),
-            $searcharea = $('.topbar .search-area'),
+            $searcharea = $('.search-area'),
             $searchfield = $('#search-input'),
             $searchresults = $('#search-results'),
             $searchpop = $('#search-popover');
@@ -36,7 +36,7 @@ var siteNavigation = {
                 searchInput: document.getElementById('search-input'),
                 resultsContainer: document.getElementById('search-results'),
                 json: '/search.json',
-                searchResultTemplate: '<li class="col3"><a class="search-link" href="{url}">{title}</a></li>',
+                searchResultTemplate: '<li class="grid__col"><a class="search-link" href="{url}">{title}</a></li>',
                 fuzzy: false
             })
 

_src/_assets/styl/buttons.styl

@@ -154,24 +154,25 @@ a.btn-primary
     .icon
         width: 15px
         height: 15px
-        margin: 1px 0 0 0
+        margin: 1px 3px 0 0
         fill: #0089cb
+        float: left
 
 
 // Close button
 /////////////////////////////////////
 
 .close
-    @extend .textcenter
+    @extend .textcenter, .transition
-    width: 16px
+    width: 14px
-    height: 16px
+    height: 14px
-    line-height: 12px
-    font-size: $font-size-small
     padding: 0
-    border-radius: 16px
+    border-radius: 50%
     display: block
-    background: $brand-grey-light
+    background: lighten($brand-grey-light, 50%)
     color: #fff
+    line-height: 1
+    font-size: $font-size-mini
 
     &:hover,
     &:focus
@@ -185,12 +186,18 @@ a.btn-primary
 /////////////////////////////////////
 
 .content-download
-    @extend .clearfix
+    @extend .grid, .grid--gutters
+
+    display: block
+    margin-top: 0
+
+    @media $breakpoint1
+        display: flex
+        margin-top: -($gutter-space)
 
     a
-        @extend .btn
+        @extend .btn, .grid__col
-        padding-left: 15px
+        margin: $gutter-space 0 0 $gutter-space
-        padding-right: 15px
         display: block
 
         span

_src/_assets/styl/content-featured.styl

@@ -6,20 +6,20 @@
 
 .featured
     @extend .divider-bottom
-    padding-top: $line-height-computed
-    padding-bottom: $line-height-computed
-
-    @media $breakpoint2
     padding-top: ($line-height-computed*2)
     padding-bottom: ($line-height-computed*2)
 
+    @media $breakpoint2
+        padding-top: ($line-height-computed*3)
+        padding-bottom: ($line-height-computed*3)
+
+    .grid
+        margin-bottom: 0
+
 .featured-link
     display: block
-    margin-bottom: $line-height-computed
-    transition-property: none
 
     @media $breakpoint2
-        margin-bottom: 0
 
         &:hover
             transform: scale(1.03)

_src/_assets/styl/content-related.styl

@@ -17,7 +17,6 @@
     .post-title
         @extend .h5
         margin: 0
-        margin-bottom: $line-height-computed
 
     .post-title,
     .post-title-link

_src/_assets/styl/content.styl

@@ -25,18 +25,18 @@
         color: darken($page-bg, 15%)
         margin-right: 2px
 
-.hentry,
+.hentry
-.grid > .hentry
     @extend .divider-bottom
     padding-top: ($line-height-computed*2)
     padding-bottom: ($line-height-computed*2)
+    width: 100%
 
     @media $breakpoint2
         padding-top: ($line-height-computed*4)
         padding-bottom: ($line-height-computed*4)
 
         .page-index &:first-child
-        padding-top: ($line-height-computed*2)
+            padding-top: ($line-height-computed*3)
 
     .page-single &
         padding-bottom: ($line-height-computed*2)
@@ -153,8 +153,7 @@
 
 .masonry
     @media $breakpoint2
-        width: 125%
+        width: 100%
-        margin-left: -12.5%
         clearfix()
 
     .hentry

_src/_assets/styl/footer.styl

@@ -4,10 +4,11 @@
 // Footer
 //
 
-.footer
+.site__footer
     @extend .textcenter
     border-top: 1px solid rgba(255,255,255,.7)
     box-shadow: inset 0 1px 4px alpha($brand-dark, .2)
+    padding-top: ($line-height-computed*2)
 
     .gravatar
         margin-bottom: ($line-height-computed/2)

_src/_assets/styl/grid.styl

@@ -5,74 +5,185 @@
 //
 
 
-// Prevents padding to be added
+*,
-*
+*:before,
+*:after
     box-sizing: border-box
 
-.container
+//
-    padding-left: 7%
+// Base
-    padding-right: 7%
+//
-    width: 100%
-
-    @media $breakpoint2
-        padding-left: 15%
-        padding-right: 15%
-
 .grid
-    margin: auto
-    padding: 0
     display: flex
     flex-wrap: wrap
+    list-style: none
+    margin: 0
+    padding: 0
 
-    @media $breakpoint2
+.grid__col
-        max-width: 35em
-
-    > .col1,
-    > .col2,
-    > .col3,
-    > .col4,
-    > .col5,
-    > .col6
     flex: 1
-        flex: 0 0 100%
-        padding: 1em 0 0 1em
 
-    > .col6
-        padding-left: 0
 
-    > .col1-xs,
+//
-    > .col2-xs,
+// Alignment per row
-    > .col3-xs,
+//
-    > .col4-xs,
+.grid--top
-    > .col5-xs,
+    align-items: flex-start
-    > .col6-xs
+
+.grid--bottom
+    align-items: flex-end
+
+.grid--center
+    align-items: center
+
+
+//
+// Alignment per cell
+//
+.grid_col--top
+    align-self: flex-start
+
+.grid_col--bottom
+    align-self: flex-end
+
+.grid_col--center
+    align-self: center
+
+
+//
+// Gutters
+//
+.grid--gutters
+    margin: -($gutter-space) 0 $gutter-space (-($gutter-space))
+
+    > .grid__col
+        padding: $gutter-space 0 0 $gutter-space
+
+
+//
+// Columns
+//
+.grid--fit
+    > .grid__col
         flex: 1
-        padding: 1em 0 0 1em
 
-    > .col1-xs
+.grid--full
-        flex: 0 0 16.666666667%
+    > .grid__col
-    > .col2-xs
-        flex: 0 0 33.333333333%
-    > .col3-xs
-        flex: 0 0 50%
-    > .col4-xs
-        flex: 0 0 66.666666666%
-    > .col5-xs
-        flex: 0 0 83.333333333%
-    > .col6-xs
         flex: 0 0 100%
-        padding-left: 0
 
-    @media $breakpoint2
+.grid--1of6
-        > .col1
+    > .grid__col
         flex: 0 0 16.5%
-        > .col2
+
+.grid--2of6,
+.grid--third
+    > .grid__col
         flex: 0 0 33%
-        > .col3
+
+.grid--3of6,
+.grid--half
+    > .grid__col
         flex: 0 0 50%
-        > .col4
+
+.grid--4of6
+    > .grid__col
         flex: 0 0 66%
-        > .col5
+
+.grid--5of6
+    > .grid__col
         flex: 0 0 82.5%
-        > .col6
+
+
+@media $breakpoint1
+    .grid-small--fit
+        > .grid__col
+            flex: 1
+
+    .grid-small--full
+        > .grid__col
             flex: 0 0 100%
+
+    .grid-small--1of6
+        > .grid__col
+            flex: 0 0 16.5%
+
+    .grid-small--2of6,
+    .grid-small--third
+        > .grid__col
+            flex: 0 0 33%
+
+    .grid-small--3of6,
+    .grid-small--half
+        > .grid__col
+            flex: 0 0 50%
+
+    .grid-small--4of6
+        > .grid__col
+            flex: 0 0 66%
+
+    .grid-small--5of6
+        > .grid__col
+            flex: 0 0 82.5%
+
+
+@media $breakpoint2
+    .grid-medium--fit
+        > .grid__col
+            flex: 1
+
+    .grid-medium--full
+        > .grid__col
+            flex: 0 0 100%
+
+    .grid-medium--1of6
+        > .grid__col
+            flex: 0 0 16.5%
+
+    .grid-medium--2of6,
+    .grid-medium--third
+        > .grid__col
+            flex: 0 0 33%
+
+    .grid-medium--3of6,
+    .grid-medium--half
+        > .grid__col
+            flex: 0 0 50%
+
+    .grid-medium--4of6
+        > .grid__col
+            flex: 0 0 66%
+
+    .grid-medium--5of6
+        > .grid__col
+            flex: 0 0 82.5%
+
+@media $breakpoint3
+    .grid-large--fit
+        > .grid__col
+            flex: 1
+
+    .grid-large--full
+        > .grid__col
+            flex: 0 0 100%
+
+    .grid-large--1of6
+        > .grid__col
+            flex: 0 0 16.5%
+
+    .grid-large--2of6,
+    .grid-large--third
+        > .grid__col
+            flex: 0 0 33%
+
+    .grid-large--3of6,
+    .grid-large--half
+        > .grid__col
+            flex: 0 0 50%
+
+    .grid-large--4of6
+        > .grid__col
+            flex: 0 0 66%
+
+    .grid-large--5of6
+        > .grid__col
+            flex: 0 0 82.5%

_src/_assets/styl/header.styl

@@ -4,10 +4,8 @@
 // Header
 //
 
-// Topbar
+.site__header
-/////////////////////////////////////
+    width: 100%
-
-.topbar
     background: $body-bg
     margin-top: ($line-height-computed/2)
     margin-bottom: ($line-height-computed/2)
@@ -46,20 +44,13 @@
         background-image: url('../img/logo@3x.png')
         background-size: 183px 62px
 
-
+.header__title
-// Banner
-/////////////////////////////////////
-
-.banner
-    padding-top: 0
-
-    .banner-title
     margin: 0
     // display toned down logo
     // by default
     @extend .logo
 
-    .banner-logo
+.header__logo
     @extend .ir
     // repeat logo
     // but display hover version

_src/_assets/styl/kremalicious3.styl

@@ -14,8 +14,9 @@
 @import 'mixins'
 
 // Core CSS
-@import 'grid'
 @import 'scaffolding'
+@import 'grid'
+@import 'layout'
 @import 'typography'
 @import 'forms'
 @import 'buttons'

_src/_assets/styl/layout.styl

@@ -0,0 +1,62 @@
+//
+// kremalicious3
+// --------------
+// Layout
+//
+
+.site__content,
+.header__content
+.footer__content
+    padding: 0 7%
+    width: 100%
+
+    @media $breakpoint2
+        padding: 0 15%
+
+.container
+    max-width: 35em
+    margin: 0 auto
+
+
+// topbar and footer as fixed
+// site background
+/////////////////////////////////////
+
+.site__document
+    background-color: $page-bg
+    border-top: 1px solid rgba(255,255,255,.7)
+    border-bottom: 1px solid rgba(255,255,255,.7)
+    box-shadow: 0 1px 4px alpha($brand-dark, .1), 0 -1px 4px alpha($brand-dark, .2)
+
+@media only screen and (min-width: 40.625em) and (min-height: 650px)
+    .site
+        position: relative
+
+    .site__document
+        @extend .transition
+        position: relative
+        z-index: 2
+        margin-top: 80px
+        margin-bottom: 420px
+
+        .menu-open &
+            margin-top: 220px
+
+    .site__header,
+    .site__footer
+        position: fixed
+        border: none
+        width: 100%
+
+    .site__header
+        z-index: 1
+        top: 0
+        border: none
+
+    .site__footer
+        z-index: 0
+        bottom: 0
+        box-shadow: none
+
+        .menu-open &
+            hide()

_src/_assets/styl/navigation.styl

@@ -41,10 +41,14 @@
 .nav-popover
     @extend .divider-top, .list-unstyled
     padding: $line-height-computed 0
-    margin-top: 60px
+    margin-top: 30px
     margin-bottom: 0
     width: 100%
     background: $body-bg
+    display: flex
+
+    .grid__col
+        padding-top: 0
 
 .nav-link
     @extend .h6, .textcenter
@@ -73,8 +77,13 @@
 /////////////////////////////////////
 
 .paginator
+    padding-top: $line-height-computed
+    padding-bottom: $line-height-computed
+
     .icon
         margin-bottom: -3px
+    p
+        margin-bottom: 0;
 
 .paginator-next
     text-align: right

_src/_assets/styl/scaffolding.styl

@@ -26,46 +26,3 @@ textarea
     font-family: inherit
     font-size: inherit
     line-height: inherit
-
-
-// topbar and footer as fixed
-// site background
-/////////////////////////////////////
-
-.document
-    background-color: $page-bg
-    border-top: 1px solid rgba(255,255,255,.7)
-    border-bottom: 1px solid rgba(255,255,255,.7)
-    box-shadow: 0 1px 4px alpha($brand-dark, .1), 0 -1px 4px alpha($brand-dark, .2)
-
-@media only screen and (min-width: 40.625em) and (min-height: 650px)
-    body
-        position: relative
-
-    .document
-        @extend .transition
-        position: relative
-        z-index: 2
-        margin-top: 80px
-        margin-bottom: 500px
-
-        .menu-open &
-            margin-top: 220px
-
-    .topbar,
-    .footer
-        position: fixed
-        border: none
-
-    .topbar
-        z-index: 1
-        top: 0
-        border: none
-
-    .footer
-        z-index: 0
-        bottom: 0
-        box-shadow: none
-
-        .menu-open &
-            hide()

_src/_assets/styl/search.styl

@@ -5,8 +5,9 @@
 //
 
 &.search-open-blur
-    @extend .transition
     filter: blur(10px)
+    user-select: none
+    pointer-events: none
 
 .search-btn
     right: 50px
@@ -17,12 +18,12 @@
 
 .search-close
     position: absolute
-    right: 32px
+    right: 16px
 
     &,
     &:active
         top: 50%
-        margin-top: -8px
+        margin-top: -7px
 
 .search-area
     @extend .transition
@@ -38,10 +39,29 @@
     &.ready
         display: block
 
+
+.search-popover
+    position: absolute
+    left: 0
+    top: 71px
+    z-index: 6
+    width: 100%
+    padding-top: ($line-height-computed/2)
+    background: lighten($page-bg, 3%)
+    border-bottom: 1px solid rgba(255,255,255,.7)
+    box-shadow: 0 1px 4px alpha($brand-dark, .1)
+
+    @media $breakpoint2
+        top: 0
+
+
 .search-results
-    @extend .list-unstyled, .textcenter
+    @extend .list-unstyled
     display: flex
 
+    .grid__col
+        padding-top: 0
+
     @media $breakpoint2
         margin-top: ($line-height-computed/2)
         margin-bottom: ($line-height-computed/2)
@@ -63,17 +83,3 @@
         border: none
         &:before
             display: none
-
-.search-popover
-    position: absolute
-    left: 0
-    top: 71px
-    z-index: 6
-    width: 100%
-    padding-top: ($line-height-computed/2)
-    background: lighten($page-bg, 3%)
-    border-bottom: 1px solid rgba(255,255,255,.7)
-    box-shadow: 0 1px 4px alpha($brand-dark, .1)
-
-    @media $breakpoint2
-        top: 0

_src/_assets/styl/variables.styl

@@ -94,6 +94,11 @@ $link-color                 = lighten($brand-cyan, 5%)
 $link-color-hover           = lighten($link-color, 10%)
 
 
+// Grid
+/////////////////////////////////////
+
+$gutter-space               = $line-height-computed
+
 // Components spacing
 /////////////////////////////////////
 

_src/_includes/articles.html

@@ -1,7 +1,7 @@
 
 {% if post.layout == "link" %}
 
-    <article class="hentry format-link col6">
+    <article class="hentry format-link">
         <header>
             <h1 class="entry-title">
                 <a href="{{ post.linkurl }}" title="Go to source: {{ post.linkurl | remove:'http://' | remove:'https://' | remove:'www.' }}">
@@ -33,7 +33,7 @@
 
 {% elsif post.layout == "photo" %}
 
-    <article class="hentry format-photo col6">
+    <article class="hentry format-photo">
 
         <a class="photo-link" href="{{ post.url }}">
             <figure class="hmedia">
@@ -48,7 +48,7 @@
 
 {% else %}
 
-    <article class="hentry format-post col6">
+    <article class="hentry format-post">
         <header>
             <h1 class="entry-title"><a href="{{ post.url }}">{{ post.title | titlecase }}</a></h1>
         </header>

_src/_includes/featured.html

@@ -1,8 +1,9 @@
 
-<aside class="grid featured">
+<aside class="featured">
+    <div class="grid grid--full grid-small--fit grid--gutters">
         {% for post in site.posts %}
             {% if post.featured %}
-        <article class="col2">
+            <article class="grid__col">
                 <a class="featured-link" href="{{ post.url }}" title="{{ post.title }}">
                     {% picture featured {{ post.image }} %}
                     <h1 class="featured-title">{{ post.title | titlecase }}</h1>
@@ -10,4 +11,5 @@
             </article>
             {% endif %}
         {% endfor %}
+    </div>
 </aside>

_src/_includes/footer.html

@@ -1,13 +1,14 @@
-<footer role="contentinfo" class="footer container">
+<footer role="contentinfo" class="site__footer">
+    <div class="footer__content">
 
-    <div class="grid">
+        <div class="container">
 
-        <div class="vcard author col6">
+            <div class="vcard author">
                 <img class="avatar photo" src="/assets/img/avatar.jpeg" />
                 <p class="footer-description">Blog of designer &amp; developer <a class="fn" rel="author" href="/about/">{{ site.author.name }}</a>
             </div>
 
-        <aside class="subscribe col6">
+            <aside class="subscribe">
                 <h1 class="subscribe-title">Subscribe</h1>
                 <p>
                     <a class="btn rss" href="http://kremalicious.com/feed">
@@ -33,10 +34,7 @@
                 </p>
             </aside>
 
-    </div>
+            <section class="footer-copyright">
-
-    <section class="footer-copyright" class="grid">
-        <div class="col6">
                 <p>© 2007 &ndash; {{ site.time | date: "%Y" }} <a href="http://matthiaskretschmann.com" rel="me">Matthias Kretschmann</a></p>
 
                 <p>
@@ -47,9 +45,11 @@
                         View source
                     </a>
                 </p>
-        </div>
             </section>
 
+        </div>
+
+    </div>
 </footer>
 
 <script src="/assets/js/kremalicious3.min.js" async></script>

_src/_includes/header.html

@@ -1,14 +1,17 @@
 
-<div class="topbar container">
+<header role="banner" class="site__header">
-    <div class="grid">
+    <div class="header__content">
+        <div class="container">
 
-        <header role="banner" class="banner col3-xs">
+            <div class="grid grid--half">
-            <h1 class="banner-title">
+
-                <a class="banner-logo" href="/">kremalicious</a>
+                <div class="grid__col">
+                    <h1 class="header__title">
+                        <a class="header__logo" href="/">kremalicious</a>
                     </h1>
-        </header>
+                </div>
 
-        <nav role="navigation" class="nav-main col3-xs">
+                <nav role="navigation" class="nav-main grid__col">
                     <button type="button" class="menu-btn">
                         <svg class="icon icon-entypo icon-entypo-menu" role="img" aria-labelledby="title">
                             <title id="title">Menu</title>
@@ -32,9 +35,9 @@
 
             </div>
 
-    <ul class="nav-popover grid hide">
+            <ul class="nav-popover grid grid--gutters grid--half grid-medium--third hide">
                 {% for category in site.categories %}
-            <li class="col3-xs col2">
+                    <li class="grid__col">
                         <a class="nav-link" href="/{{ category | first }}/">
                             {{ category | first }}
                         </a>
@@ -42,8 +45,12 @@
                 {% endfor %}
             </ul>
 
-</div>
+        </div>
+    </div>
+</header>
 
-<div id="search-popover" class="search-popover container hide">
+<div id="search-popover" class="search-popover hide">
-    <ul id="search-results" class="search-results grid"></ul>
+    <div class="container">
+        <ul id="search-results" class="search-results grid grid--gutters grid-medium--half"></ul>
+    </div>
 </div>

_src/_includes/paginator.html

@@ -2,7 +2,7 @@
 
     <nav class="paginator grid">
 
-        <p class="paginator-previous col2-xs">
+        <p class="paginator-previous grid__col">
             {% if paginator.previous_page %}
             <a
                 {% if page.category %}
@@ -27,11 +27,11 @@
             {% endif %}
         </p>
 
-        <p class="paginator-pages col2-xs">
+        <p class="paginator-pages grid__col">
             <span class="paginator-number">{{ paginator.page }}</span> of <span class="paginator-number">{{ paginator.total_pages }}</span>
         </p>
 
-        <p class="paginator-next col2-xs">
+        <p class="paginator-next grid__col">
             {% if paginator.next_page %}
             <a
                 {% if page.category %}

_src/_includes/relatedphotos.html

@@ -1,10 +1,10 @@
 <aside class="related-photos">
 
-    <div class="grid">
+    <div class="grid grid--gutters grid--half grid-medium--third">
 
         {% for post in site.categories['photos'] limit:6 %}
 
-            <article class="related-photo col3-xs col2">
+            <article class="related-photo grid__col">
                 <a class="photo-link" href="{{ post.url }}">
                     {% picture photothumb {{ post.image }} %}
                 </a>

_src/_includes/relatedposts.html

@@ -3,11 +3,11 @@
 
         <h1 class="related-posts-title">Related</h1>
 
-        <div class="grid">
+        <div class="grid grid--gutters grid--full grid-small--half grid-medium--third">
 
             {% for post in site.related_posts limit:6 %}
 
-                <article class="related-post col2">
+                <article class="related-post grid__col">
                     <a class="post-title-link" href="{{ post.url }}">
                         <h1 class="post-title">{{ post.title }}</h1>
                     </a>

_src/_layouts/base.html

@@ -3,14 +3,16 @@
 
 {% capture id %}{{ page.url | replace:'/','-' | replace_first:'-','' | replace:'.html','' | replace:'-index','' }}{% endcapture %}
 
-<body class="page-{{ id | remove:'-' }}">
+<body class="page-{{ id | remove:'-' }} site">
 
     {% include header.html %}
 
-    <section role="document" class="document container">
+    <section role="document" class="site__document">
-        <div class="content">
+        <div class="site__content">
+            <div class="container">
                 {{ content }}
             </div>
+        </div>
     </section>
 
 </body>

_src/_posts/2010-07-03-momcorp.md

@@ -25,6 +25,6 @@ The wallpaper comes in four versions with two color variations and two text vari
 You can grab the full zip-package with versions for Desktop, iPad, iPhone & Android included:
 
 <p class="content-download">
-    <a class="btn-primary icon-download col3" href="/media/momcorp_wall_by_kremalicious.zip">Download</a>
+    <a class="btn-primary icon-download" href="/media/momcorp_wall_by_kremalicious.zip">Download</a>
-    <a href="http://krlc.us/givecoffee" class="icon-heart col3">Donate</a>
+    <a href="http://krlc.us/givecoffee" class="icon-heart">Donate</a>
 </p>

_src/_posts/2011-12-15-badged.md

@@ -28,7 +28,7 @@ The plugin is localized in english, german & spanish (thanks to Andrew Kurtis fr
 You can just install the plugin via the automatic backend installer under _Plugins > Add New_, activate and enjoy the red badges.
 
 <p class="content-download">
-<a href="http://wordpress.org/extend/plugins/badged" class="btn-primary icon-wordpress col2">Plugin Page</a> <a class="btn-primary icon-github col2" href="https://github.com/kremalicious/Badged">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart btn col2">Donate</a>
+<a href="http://wordpress.org/extend/plugins/badged" class="btn-primary icon-wordpress">Plugin Page</a> <a class="btn-primary icon-github" href="https://github.com/kremalicious/Badged">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart btn">Donate</a>
 </p>
 
 The plugin is hosted on GitHub and will always be mirrored in the WordPress plugins directory. But in case you want to install the plugin manually:

_src/_posts/2012-05-15-wp-icons-template.md

@@ -35,7 +35,7 @@ So if you value quality and want pixel perfect icons in your admin area you need
 I’ve put the template along with the implementation examples from the next section on [github](https://github.com/kremalicious/wp-icons-template). You can just download the whole package right away:
 
 <p class="content-download">
-    <a href="https://github.com/kremalicious/wp-icons-template/zipball/master" class="btn-primary icon-download col2">Download</a> <a href="https://github.com/kremalicious/wp-icons-template" class="icon-github col2">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart col2">Donate</a>
+    <a href="https://github.com/kremalicious/wp-icons-template/zipball/master" class="btn-primary icon-download">Download</a> <a href="https://github.com/kremalicious/wp-icons-template" class="icon-github">GitHub</a> <a href="http://krlc.us/givecoffee" class="icon-heart">Donate</a>
 </p>
 
 ### Usage

_src/_posts/2012-07-16-using-kbd-for-fun-and-profit.md

@@ -23,8 +23,8 @@ The above picture might be blurry depending on the device you're using so here's
 They are completely styled with CSS3 so they're sharp on all screens no matter how high the dpi. Have a look at the [full demo](http://lab.kremalicious.com/kbdfun/) or grab the project folder with the CSS & LESS files from GitHub. The code is under the MIT license so you're free to use it in any personal or commercial project.
 
 <p class="content-download">
-	<a class="btn-primary icon-eye col3" href="http://lab.kremalicious.com/kbdfun/">Demo</a>
+    <a class="btn-primary icon-eye" href="http://lab.kremalicious.com/kbdfun/">Demo</a>
-	<a class="icon-github col3" href="https://github.com/kremalicious/kbdfun/">Github</a>
+    <a class="icon-github" href="https://github.com/kremalicious/kbdfun/">Github</a>
 </p>
 
 ## Usage

package.json

@@ -9,9 +9,6 @@
   "version": "3.0.0",
   "license": "MIT",
   "main": "gulpfile.js",
-  "scripts": {
-    "postinstall": "bower install && bundle install"
-  },
   "dependencies": {
     "imagesloaded": ">=3.1.8",
     "jquery": ">=2.1.4",