feat(card): Initial implementation

Implements initial cards, sans expansion and side-placed media.
google · Aug 5, 2016 · d898284 · d898284
1 parent 009d148
commit d898284
Show file tree

Hide file tree

Showing 10 changed files with 461 additions and 0 deletions.
diff --git a/demos/card.html b/demos/card.html
@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<!--
+  Copyright 2016 Google Inc. All rights reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>MDL Card Demo</title>
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <script src="assets/material-design-lite.css.js" charset="utf-8"></script>
+    <style>
+      .demo-card {
+        max-width: 21.875rem; /* 350sp */
+        margin-bottom: 24px;
+      }
+
+      .demo-card--with-avatar .mdl-card__primary {
+        position: relative;
+      }
+
+      .demo-card--with-avatar .demo-card__avatar {
+        position: absolute;
+        background: #bdbdbd;
+        height: 2.5rem; /* 40sp */
+        width: 2.5rem; /* 40sp */
+        border-radius: 50%;
+      }
+
+      .demo-card--with-avatar .mdl-card__title,
+      .demo-card--with-avatar .mdl-card__subtitle {
+        margin-left: 56px;
+      }
+
+      .demo-card__16-9-media {
+        background-image: url("images/16-9.jpg");
+        background-size: cover;
+        background-repeat: no-repeat;
+        height: 12.313rem; /* 197sp, for 16:9 ratio with 350sp demo card width */
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>MDL Cards</h1>
+      <section class="demo-typography--section mdl-typography">
+        <div class="mdl-card demo-card">
+          <section class="mdl-card__media demo-card__16-9-media"></section>
+          <section class="mdl-card__supporting-text">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
+          </section>
+        </div>
+
+        <div class="mdl-card demo-card demo-card--with-avatar">
+          <section class="mdl-card__primary">
+            <div class="demo-card__avatar"></div>
+            <h1 class="mdl-card__title">Title</h1>
+            <h2 class="mdl-card__subtitle">Subhead</h2>
+          </section>
+          <section class="mdl-card__media demo-card__16-9-media"></section>
+          <section class="mdl-card__supporting-text">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
+          </section>
+          <section class="mdl-card__actions">
+            <button class="mdl-button">Action 1</button>
+            <button class="mdl-button">Action 2</button>
+          </section>
+        </div>
+
+        <div class="mdl-card demo-card demo-card--with-avatar">
+          <section class="mdl-card__primary">
+            <div class="demo-card__avatar"></div>
+            <h1 class="mdl-card__title">Title</h1>
+            <h2 class="mdl-card__subtitle">Subhead</h2>
+          </section>
+          <section class="mdl-card__media demo-card__16-9-media"></section>
+          <section class="mdl-card__actions mdl-card__actions--vertical">
+            <button class="mdl-button">Action 1</button>
+            <button class="mdl-button">Action 2</button>
+          </section>
+        </div>
+
+        <div class="mdl-card demo-card">
+          <section class="mdl-card__media demo-card__16-9-media"></section>
+          <section class="mdl-card__primary">
+            <h1 class="mdl-card__title mdl-card__title--large">Title goes here</h1>
+            <h2 class="mdl-card__subtitle">Subtitle here</h2>
+          </section>
+          <section class="mdl-card__actions">
+            <button class="mdl-button">Action 1</button>
+            <button class="mdl-button">Action 2</button>
+          </section>
+        </div>
+
+        <div class="mdl-card demo-card">
+          <section class="mdl-card__primary">
+            <h1 class="mdl-card__title mdl-card__title--large">Title goes here</h1>
+            <h2 class="mdl-card__subtitle">Subtitle here</h2>
+          </section>
+          <section class="mdl-card__supporting-text">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
+            ea commodo consequat.
+          </section>
+          <section class="mdl-card__actions">
+            <button class="mdl-button">Action 1</button>
+            <button class="mdl-button">Action 2</button>
+          </section>
+        </div>
+
+        <style>
+          .demo-card--bg-demo {
+            height: 21.875rem; /* 350sp */
+            background-image: url("images/1-1.jpg");
+            background-size: cover;
+            background-repeat: no-repeat;
+          }
+
+          .demo-card--bg-demo .mdl-card__primary,
+          .demo-card--bg-demo .mdl-card__actions {
+            background: rgba(0, 0, 0, .4);
+          }
+        </style>
+        <div class="mdl-card mdl-card--dark-theme demo-card demo-card--bg-demo">
+          <section class="mdl-card__primary">
+            <h1 class="mdl-card__title mdl-card__title--large">Title goes here</h1>
+            <h2 class="mdl-card__subtitle">Subtitle here</h2>
+          </section>
+          <section class="mdl-card__actions">
+            <button class="mdl-button mdl-button--dark-theme">Action 1</button>
+            <button class="mdl-button mdl-button--dark-theme">Action 2</button>
+          </section>
+        </div>
+
+        <style>
+          .demo-card--small {
+            max-width: 10.938rem; /* 175sp */
+          }
+
+          .demo-card--small .mdl-card__media {
+            background-image: url("images/1-1.jpg");
+            background-size: cover;
+            background-repeat: no-repeat;
+            height: 10.938rem; /* 175sp, for 1:1 ratio with 175sp demo card width */
+          }
+        </style>
+        <div class="mdl-card demo-card demo-card--small">
+          <section class="mdl-card__media">
+            <h1 class="mdl-card__title mdl-card__title--large">Title</h1>
+          </section>
+          <section class="mdl-card__actions">
+            <button class="mdl-button">Action 1</button>
+          </section>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/demos/images/1-1.jpg b/demos/images/1-1.jpg
diff --git a/demos/images/16-9.jpg b/demos/images/16-9.jpg
diff --git a/demos/index.html b/demos/index.html
@@ -25,6 +25,7 @@
       <nav>
         <ul>
           <li><a href="button.html">Button</a></li>
+          <li><a href="card.html">Card</a></li>
           <li><a href="checkbox.html">Checkbox</a></li>
           <li><a href="radio.html">Radio</a></li>
           <li><a href="ripple.html">Ripple</a></li>

diff --git a/packages/material-design-lite/material-design-lite.scss b/packages/material-design-lite/material-design-lite.scss
@@ -16,6 +16,7 @@
 
 @import "mdl-animation/mdl-animation";
 @import "mdl-button/mdl-button";
+@import "mdl-card/mdl-card";
 @import "mdl-checkbox/mdl-checkbox";
 @import "mdl-radio/mdl-radio";
 @import "mdl-ripple/mdl-ripple";

diff --git a/packages/material-design-lite/package.json b/packages/material-design-lite/package.json
@@ -8,6 +8,7 @@
     "mdl-auto-init": "^1.0.0",
     "mdl-base": "^1.0.0",
     "mdl-button": "^1.0.0",
+    "mdl-card": "^1.0.0",
     "mdl-checkbox": "^1.0.0",
     "mdl-radio": "^1.0.0",
     "mdl-ripple": "^1.0.0",

diff --git a/packages/mdl-card/README.md b/packages/mdl-card/README.md
@@ -0,0 +1,127 @@
+# mdl-card
+
+MDL card is a component that implements the
+[Material Design card component](https://material.google.com/components/cards.html), and makes it available to
+developers as a set of CSS classes.
+
+## Installation
+
+> Note: Installation via the npm registry will be available after alpha.
+
+
+## Usage
+
+```html
+<div class="mdl-card demo-card">
+  <section class="mdl-card__primary">
+    <h1 class="mdl-card--large-title">Title goes here</h1>
+    <h2 class="mdl-card--subtitle">Subtitle here</h2>
+  </section>
+  <section class="mdl-card__supporting-text">
+    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+    commodo consequat.
+  </section>
+  <section class="mdl-card__actions">
+    <button class="mdl-button">Action 1</button>
+    <button class="mdl-button">Action 2</button>
+  </section>
+</div>
+```
+
+Cards don't come with a predefined width or height. They expand horizontally to fill all available space, and vertically
+to fit their contents.
+
+If you'd like to maintain a consistent height and width across cards, you'll need to set it in your styles:
+
+```css
+.my-card-container .mdl-card {
+  height: 350px;
+  width: 350px;
+}
+```
+
+Content will be bottom-aligned if it's smaller than the height of the card.
+
+
+### Content blocks
+
+Cards are composed of different content blocks, which are typically laid out in vertical succession.
+
+
+#### Rich media
+
+```css
+#example .mdl-card__media {
+  background-image: url("pretty.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  height: 90px;
+}
+```
+
+```html
+<section class="mdl-card__media"></section>
+```
+
+This area is used for showing rich media in cards. Use the `mdl-card__media` CSS class.
+
+
+#### Actions
+
+```html
+<section class="mdl-card__actions">
+  <button class="mdl-button">Action 1</button>
+  <button class="mdl-button">Action 2</button>
+</section>
+```
+
+This area is used for showing different actions the user can take. It's typically used with buttons, as in the example
+above, or with icon buttons, as below:
+
+> TODO(sgomes): Add icon button support and example.
+
+You can use the `mdl-card__actions--vertical` option to lay actions out vertically instead of horizontally:
+
+```html
+<section class="mdl-card__actions mdl-card__actions--vertical">
+  <button class="mdl-button">Action 1</button>
+  <button class="mdl-button">Action 2</button>
+</section>
+```
+
+#### Primary title / text
+
+```html
+<section class="mdl-card__primary">
+  <h1 class="mdl-card__title mdl-card__title--large">Title goes here</h1>
+  <h2 class="mdl-card__subtitle">Subtitle here</h2>
+</section>
+```
+
+This area is used for titles and subtitles:
+
+| Class                    | Description                                     |
+| ------------------------ | ----------------------------------------------- |
+| `mdl-card__primary`      | Defines the primary text / title content block. |
+| `mdl-card__title`        | A title block.                                  |
+| `mdl-card__title--large` | An option for the title, to make it larger.     |
+| `mdl-card--subtitle`     | A subtitle block.                               |
+
+Note that the title and subtitle classes can also be used outside of the primary title / text content block.
+
+
+#### Supporting text
+
+```html
+<section class="mdl-card__supporting-text">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+  commodo consequat.
+</section>
+```
+
+This area is used for displaying the bulk of the textual content of the card. Use the `mdl-card__supporting-text` CSS
+class.