feat(card): Initial implementation

Implements initial cards, sans expansion and side-placed media.
google · Aug 4, 2016 · 5ab8646 · 5ab8646
1 parent 0df2a39
commit 5ab8646
Show file tree

Hide file tree

Showing 10 changed files with 410 additions and 0 deletions.
diff --git a/demos/card.html b/demos/card.html
@@ -0,0 +1,172 @@
+<!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 */
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
+              0 3px 1px -2px rgba(0, 0, 0, 0.2),
+              0 1px 5px 0 rgba(0, 0, 0, 0.12);
+        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/sunset.jpg");
+        background-size: 100%;
+        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">
+          <div class="mdl-card__media demo-card__16-9-media"></div>
+          <div class="mdl-card__supporting-text">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
+          </div>
+        </div>
+
+        <div class="mdl-card demo-card demo-card--with-avatar">
+          <div class="mdl-card__primary">
+            <div class="demo-card__avatar"></div>
+            <div class="mdl-card--title">Title</div>
+            <div class="mdl-card--subtitle">Subhead</div>
+          </div>
+          <div class="mdl-card__media demo-card__16-9-media"></div>
+          <div class="mdl-card__supporting-text">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.
+          </div>
+          <div class="mdl-card__actions">
+            <button class="mdl-button">Action 1</button>
+            <button class="mdl-button">Action 2</button>
+          </div>
+        </div>
+
+        <div class="mdl-card demo-card demo-card--with-avatar">
+          <div class="mdl-card__primary">
+            <div class="demo-card__avatar"></div>
+            <div class="demo-card__text">
+              <div class="mdl-card--title">Title</div>
+              <div class="mdl-card--subtitle">Subhead</div>
+            </div>
+          </div>
+          <div class="mdl-card__media demo-card__16-9-media"></div>
+          <div class="mdl-card__actions mdl-card__actions--vertical">
+            <button class="mdl-button">Action 1</button>
+            <button class="mdl-button">Action 2</button>
+          </div>
+        </div>
+
+        <div class="mdl-card demo-card">
+          <div class="mdl-card__media demo-card__16-9-media"></div>
+          <div class="mdl-card__primary">
+            <div class="mdl-card--large-title">Title goes here</div>
+            <div class="mdl-card--subtitle">Subtitle here</div>
+          </div>
+          <div class="mdl-card__actions">
+            <button class="mdl-button">Action 1</button>
+            <button class="mdl-button">Action 2</button>
+          </div>
+        </div>
+
+        <div class="mdl-card demo-card">
+          <div class="mdl-card__primary">
+            <div class="mdl-card--large-title">Title goes here</div>
+            <div class="mdl-card--subtitle">Subtitle here</div>
+          </div>
+          <div 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.
+          </div>
+          <div class="mdl-card__actions">
+            <button class="mdl-button">Action 1</button>
+            <button class="mdl-button">Action 2</button>
+          </div>
+        </div>
+
+        <style>
+          .demo-card--bg-demo {
+            height: 21.875rem; /* 350sp */
+            background-image: url("images/bamboo.jpg");
+            background-size: 100%;
+          }
+
+          .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 demo-card demo-card--bg-demo">
+          <div class="mdl-card__primary">
+            <div class="mdl-card--large-title mdl-typography--color-primary-light">Title goes here</div>
+            <div class="mdl-card--subtitle mdl-typography--color-primary-light">Subtitle here</div>
+          </div>
+          <div class="mdl-card__actions">
+            <button class="mdl-button mdl-typography--color-primary-light">Action 1</button>
+            <button class="mdl-button mdl-typography--color-primary-light">Action 2</button>
+          </div>
+        </div>
+
+        <style>
+          .demo-card--small {
+            max-width: 10.938rem; /* 175sp */
+          }
+
+          .demo-card--small .mdl-card__media {
+            background-image: url("images/bamboo.jpg");
+            background-size: 100%;
+            height: 10.938rem; /* 175sp, for 1:1 ratio with 175sp demo card width */
+          }
+        </style>
+        <div class="mdl-card demo-card demo-card--small">
+          <div class="mdl-card__media">
+            <div class="mdl-card--large-title mdl-typography--color-primary-light">Title</div>
+          </div>
+          <div class="mdl-card__actions">
+            <button class="mdl-button">Action 1</button>
+          </div>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/demos/images/bamboo.jpg b/demos/images/bamboo.jpg
diff --git a/demos/images/sunset.jpg b/demos/images/sunset.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,110 @@
+# 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">
+  <div class="mdl-card__primary">
+    <div class="mdl-card--large-title">Title goes here</div>
+    <div class="mdl-card--subtitle">Subtitle here</div>
+  </div>
+  <div 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.
+  </div>
+  <div class="mdl-card__actions">
+    <button class="mdl-button">Action 1</button>
+    <button class="mdl-button">Action 2</button>
+  </div>
+</div>
+```
+
+### 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: 100%;
+  height: 90px;
+}
+```
+
+```html
+<div class="mdl-card__media"></div>
+```
+
+This area is used for showing rich media in cards. Use the `mdl-card__media` CSS class.
+
+
+#### Actions
+
+```html
+<div class="mdl-card__actions">
+  <button class="mdl-button">Action 1</button>
+  <button class="mdl-button">Action 2</button>
+</div>
+```
+
+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
+<div class="mdl-card__actions mdl-card__actions--vertical">
+  <button class="mdl-button">Action 1</button>
+  <button class="mdl-button">Action 2</button>
+</div>
+```
+
+#### Primary title / text
+
+```html
+<div class="mdl-card__primary">
+  <div class="mdl-card--large-title">Title goes here</div>
+  <div class="mdl-card--subtitle">Subtitle here</div>
+</div>
+```
+
+This area is used for titles and subtitles:
+
+| Class                   | Description                                     |
+| ----------------------- | ----------------------------------------------- |
+| `mdl-card__primary`     | Defines the primary text / title content block. |
+| `mdl-card--large-title` | A large, 24sp title.                            |
+| `mdl-card--title`       | A regular 14sp title.                           |
+| `mdl-card--subtitle`    | A 14sp subtitle.                                |
+
+Note that the title and subtitle classes can also be used outside of the primary title / text content block.
+
+
+#### Supporting text
+
+```html
+<div 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.
+</div>
+```
+
+This area is used for displaying the bulk of the textual content of the card. Use the `mdl-card__supporting-text` CSS
+class.