Merge pull request #598 from google/issue-573

Implement components scaffolding review (fixes #573)

docs/_assets/components.css

@@ -47,6 +47,7 @@ mdl-components-dd {
   box-sizing: border-box;
   padding: 24px 0;
   flex-shrink: 0;
+  z-index: 1;
 }
 
 .mdl-components .mdl-components__pages {
@@ -88,6 +89,13 @@ mdl-components-dd {
   margin-top: 30px;
 }
 
+.mdl-components .component-title h3 {
+  font-size: 16px;
+  font-weight: 500;
+  margin-top: 80px;
+  text-transform: uppercase;
+}
+
 .mdl-components .mdl-components__page.is-active {
   display: block;
 }
@@ -113,7 +121,34 @@ mdl-components-dd {
       0 3px 3px -2px rgba(0, 0, 0, 0.2),
       0 1px 8px 0 rgba(0, 0, 0, 0.12);
 }
+.docs-readme {
+  width: 100%;
+  max-width: 640px;
+  margin: 0 auto;
+}
+.docs-readme h2, h3, h4 {
+  font-size: 16px;
+  color: rgba(0, 0, 0, 0.54);
+  font-weight: 500;
+  text-transform: uppercase;
+}
+.docs-readme .language-markup {
+  width: 100%;
+}
+.docs-readme ul {
+  list-style-type: none;
 
+}
+.docs-readme li {
+  position: relative;
+}
+.docs-readme li:before {
+  position: absolute;
+  top: 2px;
+  left: -28px;
+  content: '•';
+  font-size: 32px;
+}
 @media (max-width: 850px) {
   .docs-layout-content {
     position: relative;

docs/_assets/main.css

@@ -513,6 +513,7 @@ body:not(.about) .mdl-navigation__link.download > button {
 }
 .snippet-group .snippet-captions {
   background-color: white;
+  height: 48px;
 }
 .snippet-group .snippet-demo .snippet-demo-container {
   text-align: left;
@@ -530,7 +531,7 @@ body:not(.about) .mdl-navigation__link.download > button {
 }
 .snippet-group .snippet-caption {
   font-size: 13px;
-  padding: 20px 40px;
+  padding: 0px 40px;
   white-space: nowrap;
   text-align: center;
   position: relative;
@@ -1181,3 +1182,12 @@ code[class*=language-], pre[class*=language-] {
 .docs-navigation .spacer {
   flex-grow: 1;
 }
+.docs-layout.is-small-screen .docs-text-styling pre {
+  margin: 0 -16px;
+  width: 100vw;
+  max-width: 640px;
+}
+.docs-text-styling p {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}

docs/_templates/components.html

@@ -8,7 +8,7 @@
 <link rel="stylesheet" href="{{page.include_prefix}}components/demos.css">
 
 <div class="mdl-components mdl-js-components mdl-cell mdl-cell--12-col">
-  <aside class="mdl-components__nav docs-text-styling">
+  <aside class="mdl-components__nav docs-text-styling mdl-shadow--4dp">
     {% for category in page.categories %}
     <a href="#{{ category.name }}-section" class="mdl-components__link mdl-component {{ category.name }}">
       <div class="mdl-components__link-image"
@@ -37,7 +37,7 @@
     <section id="{{ category.name }}-section" class="mdl-components__page mdl-grid">
       <div class="mdl-cell mdl-cell--12-col">
         <div class="docs-text-styling component-title">
-          <div class="mdl-typography--display-2">{{ category.title }}</div>
+          <h3>{{ category.title }}</h3>
           <p>{{ category.description }}</p>
         </div>
 
@@ -76,10 +76,10 @@
           </script>
           {% set demo = "../../src/" + component.name + "/demo.html" %}
           {% include demo ignore missing %}
-          <span class="docs-text-styling">
+          <div class="docs-text-styling docs-readme">
             {% set doc = "../../dist/components/" + component.name + "/index.html" %}
             {% include doc ignore missing %}
-          </span>
+          </div>
         {%- endfor %}
         <img class="mdl-components-img" src="{{page.include_prefix}}/assets/compindex_2x.png">
       </div>