Add new tile view for gallery

README.md

@@ -21,7 +21,7 @@ With an initial seed of ~200 spot illustrations that exist as a cohesive set, na
 
 ### What is the structure of these libraries?
 
-Foundry's library architecture will be similar to that of a type foundry. As one foundry might have half a dozen font families, with weights and alternates within them, each finite family can have a particular style, a set of goals, and potential applications. We could have a few established families or groups that are built out over time. Then, as the need and availability arises, more families will be added that blaze new territory in visual direction or theme.
+Foundry's library architecture will be similar to that of a type foundry. As one foundry might have half a dozen font families, with weights and alternates within them, each foundry family can have a particular style, a set of goals, and potential applications. We could have a few established families or groups that are built out over time. Then, as the need and availability arises, more families will be added that blaze new territory in visual direction or theme.
 
 ### Initial Project Goals
 

bower.json

@@ -1,7 +1,7 @@
 {
   "name": "Foundry",
   "version": "0.0.8",
-  "homepage": "https://github.com/thoughtbot/finite",
+  "homepage": "https://thoughtbot.github.io/foundry",
   "authors": [
     "Will H McMahan <will@thoughtbot.com>"
   ],

package.json

@@ -16,7 +16,7 @@
   ],
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/thoughtbot/finite/issues"
+    "url": "https://github.com/thoughtbot/foundry/issues"
   },
-  "homepage": "https://thoughtbot.github.io/finite"
+  "homepage": "https://thoughtbot.github.io/foundry"
 }

source/assets/stylesheets/app.scss

@@ -5,5 +5,8 @@
 @import 'bourbon';
 @import 'base/base';
 
+// Patterns
+@import 'patterns/**/*';
+
 // Views
-@import 'pages/index';
+@import 'pages/**/*';

source/assets/stylesheets/base/_base.scss

@@ -10,10 +10,8 @@
 
 // Typography and Elements
 @import "typography";
-@import "families-list";
 @import "forms";
 @import "tables";
 @import "lists";
 @import "buttons";
 @import "grids";
-@import "footer";

source/assets/stylesheets/base/_typography.scss

@@ -61,6 +61,10 @@ a {
     color: $hover-link-color;
     outline: none;
   }
+
+  &.thoughtbot:hover {
+    color: $thoughtbot-red;
+  }
 }
 
 hr {

source/assets/stylesheets/base/_variables.scss

@@ -81,6 +81,7 @@ $light-red: #fbe3e4;
 $light-yellow: #fff6bf;
 $light-green: #e6efc2;
 
+$thoughtbot-red: rgb(197, 45, 47);
 $thoughtbot-gray: rgba(46, 48, 58, 0.96);
 
 // Background Color

source/assets/stylesheets/pages/_index.scss

@@ -31,27 +31,28 @@
 .subtitle-linktodescription {
   background: 0;
   color: $base-font-color;
+  display: inline;
   font-family: $base-font-family;
   font-size: 1rem;
-  padding: 0;
   margin: 0 1em;
-  display: inline;
+  outline: none;
+  padding: 0;
   vertical-align: baseline;
 
-  &.more:after,
-  &.less:before {
-    margin: 0 0.125em;
+  &.more::after,
+  &.less::before {
     display: inline-block;
+    margin: 0 0.125em;
+    outline: none;
     text-decoration: none;
     transition: transform 300ms ease-in-out;
-    outline: none;
   }
 
-  &.more:after {
+  &.more::after {
     content: "→";
   }
 
-  &.less:before {
+  &.less::before {
     content: "←";
   }
 
@@ -75,8 +76,8 @@
 }
 
 .header-linktogallery {
-  margin-top: 0.5em;
   font-size: $h4-font-size;
+  margin-top: 0.5em;
   position: relative;
   transition: all 200ms ease-in-out;
 
@@ -127,7 +128,7 @@
   text-decoration: none;
 
   &:hover {
+    color: $base-font-color;
     text-decoration: underline;
-    color: $base-font-color
   }
 }

source/assets/stylesheets/patterns/_families-list.scss

@@ -0,0 +1,58 @@
+.families-list-item {
+  border-bottom: $base-border;
+  position: relative;
+}
+
+.families-list-item-gallery {
+  @include clearfix;
+  border-top: $base-border;
+}
+
+.family-header {
+  @include clearfix;
+  @include simple-column;
+  padding-bottom: 2em;
+  padding-top: 2.5em;
+  width: 100%;
+}
+
+.families-list-item-gallery-item {
+  border-bottom: $base-border;
+  border-right: $base-border;
+  float: left;
+  margin-bottom: 0;
+  padding: 3em 2em;
+  position: relative;
+  text-align: center;
+  width: 50%;
+
+  @media #{$small} {
+    padding: 3em 4em;
+    width: percentage(1/3);
+  }
+
+  @media #{$medium} {
+    width: percentage(1/4);
+  }
+
+  .centered-content-inner {
+    @include position(absolute, 50% 0 null 0);
+    transform: translateY(-50%);
+  }
+
+  img,
+  .download-link {
+    display: block;
+    margin: 0 auto;
+    width: 100%;
+  }
+}
+.family-title,
+.family-links,
+.family-description {
+  display: inline;
+}
+
+.family-description {
+  display: block;
+}

source/index.haml

@@ -9,7 +9,10 @@ title: Foundry ∞
       Foundry ∞
     %section.header-content
       %h2.header-subtitle{ data: { toggle_content: "less" } }
-        Providing a new generation of vector assets and infinite possibility for the interactive web and mobile applications.
+        Providing a new generation of vector assets and infinite possibility for the interactive web and mobile applications from the designers at
+        = succeed "." do
+          %a.thoughtbot{ href: "http://thoughtbot.com" }<
+            thoughtbot
         %button.subtitle-linktodescription.more{ data: { toggle: "more" } }
           more
       .header-description{ data: { toggle_content: "more" } }
@@ -20,29 +23,25 @@ title: Foundry ∞
           %button.subtitle-linktodescription.less{ data: { toggle: "less" } }
             less
     %nav.header-linkto
-      %a.header-linktogallery.button{ href: "#gallery"}
-        Gallery
-%section.page-section
+      = link_to "Gallery", "#gallery", class: "header-linktogallery button"
+
 %main{ role:"main" }
   %section.page-section-families
     %ol.families-list#gallery
       - families.each do |family|
         %li.families-list-item
+          %header.family-header
+            %h3.family-title
+              = family.title
+            %h6.family-links
+              = link_to "GitHub", family.repo_url
+              = link_to family.author_handle, family.author_url
+            %p.family-description
+              = family.description
           %ul.families-list-item-gallery
-            %li.families-list-item-gallery-item.centered-content
-              .centered-content-inner
-                %h3.family-title
-                  = family.title
-                %h6.family-links
-                  %a{ href: family.repo_url }<
-                    GitHub
-                  %a{ href: family.author_url }
-                    = family.author_handle
-                %p.family-description
-                  = family.description
             - family.files.each do |filename|
               %li.families-list-item-gallery-item
                 %img{ src: "assets/components" + family.path + filename }
-                %a{ href: "assets/components" + family.path + filename, download: true, class: "download-link" }
-                  Download
+                = link_to "Download", "assets/components" + family.path + filename, download: true, class: "download-link"
+
 = partial "partials/footer"

source/partials/_footer.haml

@@ -1,6 +1,6 @@
 %footer.page-footer
   = partial "partials/ralph"
   %h1.footer-title
-    For thoughtbot, by thoughtbot
-    %a.footer-title-link{ href: "http://thoughtbot.com" }
+    For a better web, by thoughtbot
+    %a.footer-title-link.thoughtbot{ href: "http://thoughtbot.com" }
       thoughtbot.com