another grid rewrite, now exercise it

_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/content-featured.styl

@@ -7,11 +7,10 @@
 .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)
+        padding-bottom: $line-height-computed
 
 .featured-link
     display: block

_src/_assets/styl/content.styl

@@ -25,11 +25,11 @@
         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)

_src/_assets/styl/footer.styl

@@ -4,7 +4,7 @@
 // Footer
 //
 
-.footer
+.footer__content
     @extend .textcenter
     border-top: 1px solid rgba(255,255,255,.7)
     box-shadow: inset 0 1px 4px alpha($brand-dark, .2)

_src/_assets/styl/grid.styl

@@ -5,74 +5,129 @@
 //
 
 
-// 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
+    > .grid__col
         flex: 1
-        padding: 1em 0 0 1em
 
-    > .col1-xs
+.grid--1of6
-        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
-        > .col1
         flex: 0 0 16.5%
-        > .col2
+
+.grid--2of6
+    > .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%
+
+@media $breakpoint2
+    .grid-medium--1of6
+        > .grid__col
+            flex: 0 0 16.5%
+
+    .grid-medium--2of6
+        > .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--1of6
+        > .grid__col
+            flex: 0 0 16.5%
+
+    .grid-large--2of6
+        > .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%
-        > .col6
-            flex: 0 0 100%

_src/_assets/styl/header.styl

@@ -4,10 +4,8 @@
 // Header
 //
 
-// Topbar
+.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,61 @@
+//
+// 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)
+    body
+        position: relative
+
+    .site__document
+        @extend .transition
+        position: relative
+        z-index: 2
+        margin-top: 80px
+        margin-bottom: 500px
+
+        .menu-open &
+            margin-top: 220px
+
+    .header,
+    .footer
+        position: fixed
+        border: none
+
+    .header
+        z-index: 1
+        top: 0
+        border: none
+
+    .footer
+        z-index: 0
+        bottom: 0
+        box-shadow: none
+
+        .menu-open &
+            hide()

_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/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--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,13 @@
-<footer role="contentinfo" class="footer container">
+<footer role="contentinfo" 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 +33,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 +44,10 @@
                     View source
                 </a>
             </p>
-        </div>
         </section>
 
+    </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="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>
@@ -28,13 +31,16 @@
                         <input type="search" id="search-input" class="form-control input-search search-field" placeholder="Search everything">
                         <button class="close search-close">&times;</button>
                     </div>
+                    <div id="search-popover" class="search-popover hide">
+                        <ul id="search-results" class="search-results grid"></ul>
+                    </div>
                 </section>
 
             </div>
 
             <ul class="nav-popover grid hide">
                 {% for category in site.categories %}
-            <li class="col3-xs col2">
+                    <li class="grid__col grid--gutters grid-medium--half">
                         <a class="nav-link" href="/{{ category | first }}/">
                             {{ category | first }}
                         </a>
@@ -42,8 +48,6 @@
                 {% endfor %}
             </ul>
 
-</div>
+        </div>
-
+    </div>
-<div id="search-popover" class="search-popover container hide">
+</header>
-    <ul id="search-results" class="search-results grid"></ul>
-</div>

_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>