Merge pull request #32 from bixgomez/9-10-11--header-elements--03

9 10 11  header elements  03

design-library/config/config.yml

@@ -56,14 +56,18 @@ plugins:
           - source/_patterns/01-atoms/05-list-posted-on
           - source/_patterns/01-atoms/06-section-heading
           - source/_patterns/01-atoms/07-section-content
+          - source/_patterns/01-atoms/08-logo
+          - source/_patterns/01-atoms/09-social-icon
       molecules:
         paths:
           - source/_patterns/02-molecules/01-blog-tags
           - source/_patterns/02-molecules/02-list-element
           - source/_patterns/02-molecules/03-section
+          - source/_patterns/02-molecules/04-social-icons
       organisms:
         paths:
           - source/_patterns/03-organisms/01-blog-list
+          - source/_patterns/03-organisms/02-header
       #pages:
         #paths:
           #- source/_patterns/04-pages

design-library/source/_patterns/01-atoms/08-logo/_logo.scss

@@ -0,0 +1,18 @@
+.logo--wrapper {
+  display: block;
+  padding: 0;
+  margin: 0;
+  width: 10em;
+  height: 10em;
+}
+
+.logo--link {
+  display: block;
+  padding: 0;
+  margin: 0;
+  width: inherit;
+  height: inherit;
+  background-size: contain;
+  background-repeat: no-repeat;
+  text-indent: -9999px;
+}

design-library/source/_patterns/01-atoms/08-logo/logo.json

@@ -0,0 +1,5 @@
+{
+  "image_url": "/images/nerdstein_11.png",
+  "image_alt": "Nerdstein Logo",
+  "image_link": "#"
+}

design-library/source/_patterns/01-atoms/08-logo/logo.md

@@ -0,0 +1,5 @@
+# Atom: Logo
+
+*Belongs to*
+
+* Organism: Header

design-library/source/_patterns/01-atoms/08-logo/logo.twig

@@ -0,0 +1,8 @@
+<div class="logo--wrapper">
+  <a
+    href="{{ image_link }}"
+    class="logo--link"
+    style="background-image: url({{ image_url }})">
+    {{ image_alt }}
+  </a>
+</div>

design-library/source/_patterns/01-atoms/09-social-icon/_social-icon.scss

@@ -0,0 +1,25 @@
+li.social_media--item {
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  height: 2em;
+  width: 2em;
+}
+
+a.social_media--icon {
+  display: block;
+  text-indent: -9999px;
+  height: inherit;
+  width: inherit;
+  background-repeat: no-repeat;
+  background-size: contain;
+  &.Twitter {
+    background-image: url('../images/social_media_icons/social_twitter.png');
+  }
+  &.Facebook {
+    background-image: url('../images/social_media_icons/social_facebook.png');
+  }
+  &.LinkedIn {
+    background-image: url('../images/social_media_icons/social_linkedin.png');
+  }
+}

design-library/source/_patterns/01-atoms/09-social-icon/social-icon.json

@@ -0,0 +1,6 @@
+{
+  "name":"Twitter",
+  "message":"Follow us on Twitter",
+  "image":"/images/social_media_icons/social_twitter.png",
+  "link":"http://www.twitter.com"
+}

design-library/source/_patterns/01-atoms/09-social-icon/social-icon.md

@@ -0,0 +1,5 @@
+# Atom: Social Icon
+
+*Belongs to*
+
+* Molecule: Social Icons

design-library/source/_patterns/01-atoms/09-social-icon/social-icon.twig

@@ -0,0 +1,3 @@
+<li class="social_media--item">
+  <a href="{{ link }}" title="{{ message }}" class="social_media--icon {{ name }}">{{ message }}</a>
+</li>

design-library/source/_patterns/02-molecules/04-social-icons/_social-icons.scss

@@ -0,0 +1,32 @@
+ul.social_media--list {
+  display: block;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+li.social_media--item {
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  height: 2em;
+  width: 2em;
+}
+
+a.social_media--icon {
+  display: block;
+  text-indent: -9999px;
+  height: inherit;
+  width: inherit;
+  background-repeat: no-repeat;
+  background-size: contain;
+  &.Twitter {
+    background-image: url('../images/social_media_icons/social_twitter.png');
+  }
+  &.Facebook {
+    background-image: url('../images/social_media_icons/social_facebook.png');
+  }
+  &.LinkedIn {
+    background-image: url('../images/social_media_icons/social_linkedin.png');
+  }
+}

design-library/source/_patterns/02-molecules/04-social-icons/social-icons.json

@@ -0,0 +1,22 @@
+{
+  "social_media": [
+    {
+	    "name":"Twitter",
+	    "message":"Follow us on Twitter",
+	    "image":"/images/social_media_icons/social_twitter.png",
+	    "link":"http://www.twitter.com"
+    },
+    {
+	    "name":"Facebook",
+	    "message":"Like us on Facebook",
+	    "image":"/images/social_media_icons/social_facebook.png",
+	    "link":"http://www.facebook.com"
+    },
+    {
+	    "name":"LinkedIn",
+	    "message":"Follow us on LinkedIn",
+	    "image":"/images/social_media_icons/social_linkedin.png",
+	    "link":"http://www.linkedIn.com"
+    }
+  ]
+}

design-library/source/_patterns/02-molecules/04-social-icons/social-icons.md

@@ -0,0 +1,5 @@
+# Atom: Social Icons
+
+*Belongs to*
+
+* Organism: Header

design-library/source/_patterns/02-molecules/04-social-icons/social-icons.twig

@@ -0,0 +1,10 @@
+<ul class="social_media--list">
+  {% for social_media__item in social_media %}
+    {% include "@atoms/social-icon.twig" with {
+      "name":social_media__item.name,
+      "message":social_media__item.message,
+      "image":social_media__item.image,
+      "link":social_media__item.link
+    } %}
+  {% endfor %}
+</ul>

design-library/source/_patterns/03-organisms/02-header/_header.scss

@@ -0,0 +1,40 @@
+#site-header {
+  background-color: #eee;
+  border: 0px solid #aaa;
+  padding: 1.5vw;
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  grid-gap: 1em;
+  grid-template-areas:
+      "a a a b b b";
+  grid-template-rows: 1fr;
+
+  > .grid-cell {
+    border: 0px solid #aaa;
+    padding: 0em;
+    display: flex;
+    align-items: center;
+  }
+}
+
+.logo--wrapper {
+  width: 23vw;
+  height: 10vw;
+}
+
+.grid-cell--logo {
+  grid-area: a;
+  justify-content: left;
+}
+
+.grid-cell--social-icons {
+  grid-area: b;
+  justify-content: right;
+  .social_media--list {
+    margin-left: auto;
+    .social_media--item {
+      height: 5vw;
+      width: 5vw;
+    }
+  }
+}

design-library/source/_patterns/03-organisms/02-header/header.json

@@ -0,0 +1,25 @@
+{
+  "image_url": "/images/nerdstein_11.png",
+  "image_alt": "Nerdstein Logo",
+  "image_link": "#",
+  "social_media": [
+    {
+      "name":"Twitter",
+      "message":"Follow us on Twitter",
+      "image":"/images/social_media_icons/social_twitter.png",
+      "link":"http://www.twitter.com"
+    },
+    {
+      "name":"Facebook",
+      "message":"Like us on Facebook",
+      "image":"/images/social_media_icons/social_facebook.png",
+      "link":"http://www.facebook.com"
+    },
+    {
+      "name":"LinkedIn",
+      "message":"Follow us on LinkedIn",
+      "image":"/images/social_media_icons/social_linkedin.png",
+      "link":"http://www.linkedIn.com"
+    }
+  ]
+}

design-library/source/_patterns/03-organisms/02-header/header.md

@@ -0,0 +1,6 @@
+# Organism: Site Header
+
+*Depends on*
+
+* Atom: Logo
+* Molecule: Social Icons

design-library/source/_patterns/03-organisms/02-header/header.twig

@@ -0,0 +1,14 @@
+<header id="site-header" class="grid">
+  <div class="grid-cell grid-cell--logo">
+    {% include "@atoms/logo.twig" with {
+      "image_url":image_url,
+      "image_alt":image_alt,
+      "image_link":image_link
+    } %}
+  </div>
+  <div class="grid-cell grid-cell--social-icons">
+    {% include "@molecules/social-icons.twig" with {
+      "social_media":social_media
+    }  %}
+  </div>
+</header>

design-library/source/_patterns/04-pages/01-sidebar/sidebar.twig

@@ -10,50 +10,50 @@
 </div>
 <div class="content">
     {% include "@organisms/blog-list.twig" with {
-    "blog_list": {
-    "1": {
-    "title": "The category manager enforces our risk appetites.",
-    "link_url": "http://nerdstein.net",
-    "body": "The preemptive commitment leads to an agile feedback, while the game changer connects the dots to the end game. Our under-the-radar business platforms energize the market thinker.",
-    "tag_list": {
-    "1": {
-    "tag_name": "Cloud"
-    },
-    "2": {
-    "tag_name": "Drupal"
-    }
-    },
-    "posted_date": "January 5, 2017"
-    },
-    "2": {
-    "title": "Our improved focus on speed facilitates our next step.",
-    "link_url": "http://nerdstein.net",
-    "body": "Our dashboards conservatively strengthen the Chief IT Operations Catalyst. The senior support staff whiteboards our enterprise risk management.",
-    "tag_list": {
-    "1": {
-    "tag_name": "Security"
-    },
-    "2": {
-    "tag_name": "DevOps"
-    }
-    },
-    "image_url": "/images/dog-cello.jpg",
-    "posted_date": "March 19, 2017"
-    },
-    "3": {
-    "title": "The policy makers consistently showcase a stellar measurement.",
-    "link_url": "http://nerdstein.net",
-    "body": "Predictability, best practice and responsive design empower a bandwidth. The Chief Business Operations Officer learns a big-bang approach by leveraging value creations. The attackers re-content our consistencies; nevertheless the Global Chief Technical Futurist re-imagines the vital, cross-industry, pre-plans. The game changers incentivize our coordinated sales targets; nevertheless the profit-maximizing markets aggressively empower the team players. To continue our growth, we must table go-to-market consistencies. In the same time, the human resources deliver a ROE.",
-    "tag_list": {
-    "1": {
-    "tag_name": "Responsive"
-    },
-    "2": {
-    "tag_name": "Agile"
-    }
-    },
-    "posted_date": "June 25, 2017"
-    }
-    }
+      "blog_list": {
+      "1": {
+      "title": "The category manager enforces our risk appetites.",
+      "link_url": "http://nerdstein.net",
+      "body": "The preemptive commitment leads to an agile feedback, while the game changer connects the dots to the end game. Our under-the-radar business platforms energize the market thinker.",
+      "tag_list": {
+      "1": {
+      "tag_name": "Cloud"
+      },
+      "2": {
+      "tag_name": "Drupal"
+      }
+      },
+      "posted_date": "January 5, 2017"
+      },
+      "2": {
+      "title": "Our improved focus on speed facilitates our next step.",
+      "link_url": "http://nerdstein.net",
+      "body": "Our dashboards conservatively strengthen the Chief IT Operations Catalyst. The senior support staff whiteboards our enterprise risk management.",
+      "tag_list": {
+      "1": {
+      "tag_name": "Security"
+      },
+          "2": {
+            "tag_name": "DevOps"
+          }
+        },
+        "image_url": "/images/dog-cello.jpg",
+        "posted_date": "March 19, 2017"
+      },
+      "3": {
+        "title": "The policy makers consistently showcase a stellar measurement.",
+        "link_url": "http://nerdstein.net",
+        "body": "Predictability, best practice and responsive design empower a bandwidth. The Chief Business Operations Officer learns a big-bang approach by leveraging value creations. The attackers re-content our consistencies; nevertheless the Global Chief Technical Futurist re-imagines the vital, cross-industry, pre-plans. The game changers incentivize our coordinated sales targets; nevertheless the profit-maximizing markets aggressively empower the team players. To continue our growth, we must table go-to-market consistencies. In the same time, the human resources deliver a ROE.",
+        "tag_list": {
+          "1": {
+            "tag_name": "Responsive"
+          },
+          "2": {
+            "tag_name": "Agile"
+          }
+        },
+        "posted_date": "June 25, 2017"
+        }
+      }
     } %}
 </div>