feat(layout): support for md-layout-css directive

* implement directive to disable all conversions of Layout attributes to classnames
  * requires loading stylesheet `angular-material.layout.css`
* generation of attribute-only layout-css using
*  fix css generation
  *  layout-offset-33 -> margin-left:33%
  *  layout-offset-34 -> margin-left:34%
  *  layout-offset-66 -> margin-left:66%
  *  layout-offset-67 -> margin-left:67%
* support for Layout configuration
* removal of useless $mdLayout service
* update docs to use `.md-api-table` and bold the first-column text.

docs/app/css/style.css

@@ -14,7 +14,7 @@ body {
 }
 
 .md-api-table {
-  margin-bottom: 8px;
+  margin-bottom: 16px;
   max-width: 100%;
   width: 100%;
   border-spacing: 0;
@@ -103,6 +103,7 @@ strong {
   background-color: #4C9EF0;
   color: white;
 }
+
 blockquote {
   border-left: 3px solid rgba(0, 0, 0, 0.12);
   font-style: italic;
@@ -858,9 +859,9 @@ docs-demo .doc-demo-content {
   transition:         none !important;
 }
 
-table.attributes {
+table.attributes, table.md-api-table {
   padding-left:15px;
-  margin-bottom: 10px;
+  margin-bottom: 20px;
 }
 table.attributes  tr  td:first-child {
   font-weight: bold;
@@ -869,3 +870,7 @@ table.attributes  tr  td:first-child {
 table.attributes  tr  td:last-child {
   padding-left: 10px;
 }
+
+table.md-api-table  tr  td:first-child {
+  font-weight: bold;
+}

docs/app/partials/layout-alignment.tmpl.html

@@ -7,7 +7,7 @@
     <p>Only one word is required for the attribute. For example, <code>layout="row" layout-align="center"</code> would make the elements center horizontally and use the default behavior vertically.</p>
 
     <p><code>layout="column" layout-align="center end"</code> would make
-    children align along the center vertically and along the end (right) horizontally.</p>
+    children align along the center vertically and along the end (right) horizontally. </p>
   <table class="md-api-table">
     <tr>
       <td>layout-align</td>

docs/app/partials/layout-grid.tmpl.html

@@ -99,7 +99,7 @@
     There are additional flex values provided by Angular Material to improve flexibility and to make the API
     easier to understand.
   </p>
-  <table class="attributes">
+  <table class="md-api-table">
     <tr>
       <td >flex</td>
       <td >Will grow and shrink as needed. Starts with a size of 0%.</td>
@@ -151,7 +151,7 @@
     Add the <code>flex-order</code> attribute to a layout child to set its
     position within the layout. Any value from 0-9 is accepted.
   </p>
-  <table class="attributes">
+  <table class="md-api-table">
     <tr>
       <td>flex-order</td>
       <td>Sets element order.</td>
@@ -203,7 +203,7 @@
     offset percentage within the layout. Values must be multiples 
     of <code>5</code>, or <code>33</code>, <code>34</code>, <code>66</code>, <code>67</code>.
   </p>
-  <table class="attributes">
+  <table class="md-api-table">
     <tr>
       <td>offset</td>
       <td>Sets element offset.</td>

gulp/config.js

@@ -32,7 +32,7 @@ module.exports = {
     'src/core/services/layout/layout.scss'
   ],
   scssStandaloneFiles: [
-    'src/core/services/layout/layout.scss'
+    'src/core/services/layout/layout.attributes.scss'
   ],
   scssTestFiles: [
     'src/core/services/layout/layout.scss'

gulp/tasks/build-scss.js

@@ -39,7 +39,7 @@ exports.task = function() {
       gulp.src(paths)
           .pipe(util.filterNonCodeFiles())
           .pipe(filter(['**', '!**/*-theme.scss']))
-          .pipe(filter(['**', '!**/standalone.scss']))
+          .pipe(filter(['**', '!**/attributes.scss']))
           .pipe(concat('angular-material.scss'))
           .pipe(sass())
           .pipe(rename({ basename: filename }))
@@ -55,10 +55,13 @@ exports.task = function() {
           .pipe(insert.prepend(baseVars))
           .pipe(sass())
           .pipe(util.autoprefix())
-          .pipe(insert.prepend(config.banner))
           .pipe(rename({ basename: "layouts" }))
-          .pipe(rename({prefix: 'angular-material-'}))
-          .pipe(gulp.dest(path.join(dest, 'modules', 'css')))
+          .pipe(rename({ prefix: 'angular-material.'}))
+          .pipe(insert.prepend(config.banner))
+          .pipe(gulp.dest(dest))
+          .pipe(gulpif(!IS_DEV, minifyCss()))
+          .pipe(rename({extname: '.min.css'}))
+          .pipe(gulp.dest(dest))
   );
 
   return series(streams);