Merge pull request #33 from bixgomez/16-add-header-to-page-01

16 add header to page 01

design-library/source/_patterns/02-molecules/01-blog-tags/_blog-tags.scss

@@ -1,4 +1,4 @@
 .blog-tags {
   border-bottom: 1px solid $light-gray;
-  margin-bottom: 1.5em;
-}
+  margin-bottom: 1em;
+}

design-library/source/_patterns/02-molecules/02-list-element/_list-element.scss

@@ -1,13 +1,12 @@
 .list-element {
-  margin-top: 15px;
-  margin-bottom: 15px;
+  margin-bottom: 1em;
 
   .list-element-body {
     display: block;
     .list-element-image {
       float: left;
       clear: left;
-      margin: 15px;
+      margin: 1em;
       margin-left: 0px;
       margin-top: 0px;
     }

design-library/source/_patterns/03-organisms/01-blog-list/_blog-list.scss

@@ -1,4 +1,3 @@
 .blog-list {
-  padding-top: 40px;
-  padding-bottom: 40px;
+  margin-bottom: 2em;
 }

design-library/source/_patterns/04-pages/01-one-sidebar/_one-sidebar.scss

@@ -0,0 +1,51 @@
+
+.page-wrapper {
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+.section {
+  width: 100%;
+  padding: 0;
+  margin: 0 0 1em 0;
+}
+
+.section-header {
+
+}
+
+.section-main {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  grid-gap: 1em;
+
+  grid-template-areas:
+      "a"
+      "b";
+
+  @include breakpoint($md-up) {
+    grid-template-columns: repeat(8, 1fr);
+    grid-template-areas:
+        "a a a a a b b b";
+  }
+
+  @include breakpoint($lg-up) {
+    grid-template-columns: repeat(8, 1fr);
+    grid-template-areas:
+        "a a a a a a b b";
+  }
+
+  .content {
+    grid-area: a;
+  }
+
+  .sidebar {
+    grid-area: b;
+  }
+}
+
+.section-footer {
+
+}

design-library/source/_patterns/04-pages/01-one-sidebar/one-sidebar.json

@@ -0,0 +1,84 @@
+{
+
+  "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"
+    }
+  ],
+
+  "sections": [
+    {
+      "heading": "Categories",
+      "content": "<ul><li><a href=\"\">Tech</a></li><li><a href=\"\">News</a></li><li><a href=\"\">Tutorials</a></li><li><a href=\"\">Sports</a></li><ul>"
+    },
+    {
+      "heading": "Sign Up!",
+      "content": "<p>Subscribe to our RSS feed today and be the first to get new updates</p>"
+    }
+  ],
+
+  "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"
+    }
+  }
+
+}

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

@@ -0,0 +1,30 @@
+<div class="page-wrapper">
+  <header class="section section-header">
+    {% include "@organisms/header.twig" with {
+    "image_url":image_url,
+    "image_alt":image_alt,
+    "image_link":image_link,
+    "social_media":social_media
+    } %}
+  </header>
+  <div class="section section-main">
+    <div class="content">
+      {% include "@organisms/blog-list.twig" with {
+      "blog_list":blog_list
+      } %}
+    </div>
+    <div class="sidebar">
+      {% for section in sections %}
+        {% include "@molecules/section.twig" with {
+        "heading":section.heading,
+        "content":section.content
+        } %}
+      {% endfor %}
+    </div>
+  </div>
+  <footer class="section section-footer">
+
+  </footer>
+</div>
+
+

design-library/source/scss/base/_breakpoints.scss

@@ -0,0 +1,36 @@
+/**
+ * Partial for adding standard breakpoint variables
+ */
+// @import "breakpoint";
+// Breakpoint control variables
+// $breakpoint-to-ems: true;
+
+$xxs: 0px;
+$xs: 320px;
+$sm: 544px;
+$md: 768px;
+$lg: 960px;
+$xl: 1200px;
+
+//Breakpoint variables
+$xxs-only: $xxs ($xs - 1);
+$xxs-up: $xxs;
+
+$xs-only: $xs ($sm - 1);
+$xs-up: $xs;
+$xs-down: 0px $xs;
+
+$sm-only: $sm ($md - 1);
+$sm-up: $sm;
+$sm-down: 0px ($md - 1);
+
+$md-only: $md ($lg - 1);
+$md-up: $md;
+$md-down: 0px ($lg - 1);
+
+$lg-only: $lg ($xl - 1);
+$lg-up: $lg;
+$lg-down: 0px ($xl - 1);
+
+$xl-only: $xl;
+$xl-up: $xl;

design-library/source/scss/base/base.scss

@@ -1,2 +1,3 @@
 @import 'variables';
+@import 'breakpoints';
 @import 'basics';

design-library/source/scss/scss.scss

@@ -1,2 +1,3 @@
+@import 'breakpoint';
 @import 'base/base';
 @import '../_patterns/**/*.scss';