Styling and formatting clean up pass

Went over styles with Carl. Some notes:
renamed tutorial button tutorial tag as it’s not really a button and is unique to ttt.
Found out why cols4 wasn’t working - if your browser default font isn’t 16px, rem isn’t 16px. Opening a separate issue and using cols4 where it should be.

src/components/masonrygrid/masonrygrid.jsx

@@ -18,16 +18,16 @@ var MasonryGrid = React.createClass({
         var a3 = [];
         var i = 0;
         //only implemented for 2 and 3 columns so far - easy to extend if needed
-        if (cols >1 && cols < 4) {
+        if (cols > 1 && cols < 4) {
             for (i=0;i<items.length;i++){
                 var col = (i+cols)%cols;
-                if (col==0) {
+                if (col === 0) {
                     a1.push(items[i]);
                 }
-                else if (col==1) {
+                else if (col === 1) {
                     a2.push(items[i]);
                 }
-                else if (col==2) {
+                else if (col === 2) {
                     a3.push(items[i]);
                 }
             }

src/components/masonrygrid/masonrygrid.scss

@@ -1,10 +1,10 @@
 @import "../../frameless";
-$tile-width: 18.75rem;
 
 .masonry {
     column-gap: $gutter;
-    column-width: $tile-width;
+    column-width: $cols4;
     -webkit-perspective: 1;
+    padding-bottom: 50px;
 }
 
 // working around Firefox issue that requires column-count, using explicit -moz-column-count

src/components/ttt-tile/ttt-tile.jsx

@@ -10,7 +10,7 @@ var TTTTile = React.createClass({
     propTypes: {
         title: React.PropTypes.string.isRequired,
         description: React.PropTypes.string.isRequired,
-        imageUrl: React.PropTypes.string.isRequired,
+        thumbUrl: React.PropTypes.string.isRequired,
         tutorialLoc: React.PropTypes.string.isRequired
     },
     handleClick: function () {
@@ -26,7 +26,7 @@ var TTTTile = React.createClass({
                 <a href={this.props.tutorialLoc}>
                     <div className="ttt-tile-tutorial">
                         <div className="ttt-tile-image">
-                            <img className="ttt-tile-image-img" src={this.props.imageUrl} alt="" />
+                            <img className="ttt-tile-image-img" src={this.props.thumbUrl} alt="" />
                             <div className="ttt-tile-image-try">
                                 <div className="button mod-ttt-tile-image-try-button">
                                     Try it
@@ -35,7 +35,7 @@ var TTTTile = React.createClass({
                         </div>
                         <div className="ttt-tile-info">
 
-                            <div className="button mod-ttt-tile-button">
+                            <div className="ttt-tile-tag">
                                 <FormattedMessage id='tile.tutorial' defaultMessage='Tutorial'/>
                             </div>
                             <h4 className="ttt-tile-title">{this.props.title}</h4>
@@ -48,7 +48,7 @@ var TTTTile = React.createClass({
                 </a>
                 <div className="ttt-tile-guides" onClick={this.handleClick}>
                     <FormattedMessage id='tile.guides' defaultMessage='See Cards and Guides'/>
-                    &nbsp;<img src="/svgs/ttt/see-more.svg" />
+                    <img className="ttt-tile-see-more" src="/svgs/ttt/see-more.svg" />
                 </div>
             </div>
         );

src/components/ttt-tile/ttt-tile.scss

@@ -1,6 +1,5 @@
 @import "../../colors";
 @import "../../frameless";
-$tile-width: 18.75rem;
 
 .ttt-tile {
     display: inline-block;
@@ -10,9 +9,9 @@ $tile-width: 18.75rem;
     margin-bottom: calc(1.25rem - 1px);
 
     border-radius: 1rem;
-    box-shadow: 0 0 0 1px $box-shadow-gray;
-    // cols4 is not working - calculate width instead
-    width: $tile-width;
+    box-shadow: 0 0 0 1px $active-gray;
+    width: $cols4;
+    text-align: center;
 }
 
 .ttt-tile-tutorial {
@@ -51,7 +50,7 @@ $tile-width: 18.75rem;
 .ttt-tile-image-try {
     display: none;
     position: absolute;
-    top: 3rem;
+    top: 4rem;
     left: 50%;
     transform: translate(-50%, 0);
     text-align: center;
@@ -69,19 +68,30 @@ $tile-width: 18.75rem;
     padding: 1rem 0;
 }
 
-.mod-ttt-tile-button {
+.ttt-tile-tag {
+    display: inline-block;
     position: absolute;
     top: -1rem;
     left: 1rem;
+    margin: .5em 0;
+    border: 0;
     border-radius: 1rem;
+    background-color: $ui-blue;
     padding: .25rem 1rem;
+    color: $type-white;
+    font-size: .8rem;
+    font-weight: bold;
+}
+
+.ttt-tile-title {
+    margin: .5rem auto;
+    width: calc(100% - 3rem);
 }
 
 .ttt-tile-description {
     margin: auto;
-    width: calc(100% - 2rem);
+    width: calc(100% - 3rem);
     font-size: .875rem;
-
 }
 
 .ttt-tile-guides {
@@ -100,3 +110,9 @@ $tile-width: 18.75rem;
         background-color: lighten($link-blue, 40%);
     }
 }
+
+.ttt-tile-see-more {
+    display: inline-block;
+    padding: 0 .25rem;
+    vertical-align: middle;
+}

src/views/thingstotry/thingstotry.jsx

@@ -30,21 +30,20 @@ var ThingsToTry = injectIntl(React.createClass({
 
         return (
             <div className="ttt">
-                <TitleBanner className="masthead">
-                    <section className="ttt-section mod-title-banner">
-                        <img src="/svgs/ttt/resources.svg" />
+                <TitleBanner className="masthead mod-ttt">
+                    <section className="ttt-section">
+                        <img className="ttt-banner-image" src="/svgs/ttt/resources.svg" alt=""/>
                     </section>
                     <h1>
-                        <FormattedMessage id='ttt.title' />
+                        <FormattedMessage id="ttt.title" />
                     </h1>
-                        <p>
-                            <FormattedHTMLMessage id='ttt.subTitle' />
-                        </p>
+                    <p className="intro">
+                        <FormattedHTMLMessage id="ttt.subTitle" />
+                    </p>
                 </TitleBanner>
 
                 <div className="inner">
                     <section className="ttt-section">
-
                         <MasonryGrid >
                             {Tiles.map(function (tile) {
                                 return (
@@ -52,15 +51,15 @@ var ThingsToTry = injectIntl(React.createClass({
                                         key={tile.title}
                                         title={formatMessage({id: tile.title})}
                                         description={formatMessage({id: tile.description})}
-                                        imageUrl={tile.thumbUrl}
+                                        thumbUrl={tile.thumbUrl}
                                         tutorialLoc={formatMessage({id: tile.tutorialLoc})}
                                     />
                                 );
                             })}
 
-                    </MasonryGrid>
-
+                        </MasonryGrid>
                     </section>
+
                 </div>
             </div>
         );

src/views/thingstotry/thingstotry.scss

@@ -7,38 +7,23 @@ $base-bg: $ui-white;
     padding: 0;
 }
 
-.ttt {
-    .title-banner {
-        &.masthead {
-            background-color: $ui-blue;
-            padding-bottom: 0;
-
-            h1 {
-                margin: 0;
-                color: $ui-white;
-            }
-
-        }
-    }
+.title-banner.mod-ttt {
+    background-color: $ui-blue;
 }
 
 .ttt-section {
     display: flex;
     margin: 0 auto;
-    padding: 50px 0;
     text-align: center;
     justify-content: center;
     flex-wrap: wrap;
     align-items: center;
 }
 
-.ttt-section.mod-title-banner {
-    border: 0;
-    padding: 10px 0;
-    max-width: $desktop;
+.ttt-banner-image {
+    max-width: calc(100% - 2rem);
 }
 
-
 //4 columns
 @media only screen and (max-width: $mobile - 1) {
 
@@ -51,6 +36,10 @@ $base-bg: $ui-white;
             }
         }
     }
+
+    .ttt-section.mod-title-banner {
+        max-width: $mobile;
+    }
 }
 
 //6 columns
@@ -81,6 +70,10 @@ $base-bg: $ui-white;
             }
         }
     }
+
+    .ttt-section.mod-title-banner {
+        max-width: $tablet;
+    }
 }
 
 // 12 columns
@@ -88,7 +81,7 @@ $base-bg: $ui-white;
     .title-banner {
         &.masthead {
             padding-bottom: 2rem;
-            
+
             p {
                 max-width: $cols8;
             }