google
/
material-design-lite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adding images to the typography demo

master
Matt Gaunt 2014-09-03 17:37:42 +01:00
parent c768f17d92
commit 64db8062d4
6 changed files with 200 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/material-styleguide.html
View File

@ -32,15 +32,15 @@
<link rel="stylesheet" href="styleguide/styleguide.css">
</head>
<body>
<h1>Buttons</h1>
<iframe src="./styleguide/typography/demo.html" scrolling="no"></iframe>
<iframe src="./styleguide/button/demo.html" scrolling="no"></iframe>
<h1>Shadows</h1>
<iframe src="./styleguide/shadow/demo.html" scrolling="no"></iframe>
<h1>Palette</h1>
<iframe src="./styleguide/palette/demo.html" scrolling="no"></iframe>
<!-- Script to handle sizing the iFrames -->
<script>
sizeIframes();

48
app/styleguide/typography/_typography.scss
View File

@ -212,46 +212,94 @@ a {
@include typo-display-4();
}
.display-4.colorContrast {
@include typo-display-4($colorContrast:true);
}
.display-3 {
@include typo-display-3();
}
.display-3.colorContrast {
@include typo-display-3($colorContrast:true);
}
.display-2 {
@include typo-display-2();
}
.display-2.colorContrast {
@include typo-display-2($colorContrast:true);
}
.display-1 {
@include typo-display-1();
}
.display-1.colorContrast {
@include typo-display-1($colorContrast:true);
}
.headline {
@include typo-headline();
}
.headline.colorContrast {
@include typo-headline($colorContrast:true);
}
.title {
@include typo-title();
}
.title.colorContrast {
@include typo-title($colorContrast:true);
}
.subhead {
@include typo-subhead();
}
.subhead.colorContrast {
@include typo-subhead($colorContrast:true);
}
.body-2 {
@include typo-body-2();
}
.body-2.colorContrast {
@include typo-body-2($colorContrast:true);
}
.body-1 {
@include typo-body-1();
}
.body-1.colorContrast {
@include typo-body-1($colorContrast:true);
}
.caption {
@include typo-caption();
}
.caption.colorContrast {
@include typo-caption($colorContrast:true);
}
.menu {
@include typo-menu();
}
.menu.colorContrast {
@include typo-menu($colorContrast:true);
}
.button {
@include typo-button();
}
.button.colorContrast {
@include typo-button($colorContrast:true);
}

180
app/styleguide/typography/demo.html
View File

@ -18,72 +18,130 @@
<h2>Typography</h2>
<h3>Scale &amp; Basic Styles</h3>
<table>
<tr>
<th>Display 4</th>
<td class='display-4'>Light 112px</td>
</tr>
<tr>
<th>Display 3</th>
<td class='display-3'>Regular 56px</td>
</tr>
<tr>
<th>Display 2</th>
<td class='display-2'>Regular 45px</td>
</tr>
<tr>
<th>Display 1</th>
<td class='display-1'>Regular 34px</td>
</tr>
<tr>
<th>Headline</th>
<td class='headline'>Regular 24px</td>
</tr>
<tr>
<th>Title</th>
<td class='title'>Medium 20px</td>
</tr>
<tr>
<th>Subhead</th>
<td class='subhead'>Regular 16px (Device), Regular 15px (Desktop)</td>
</tr>
<tr>
<th>Body 2</th>
<td class='body-2'>Medium 14px (Device), Medium 13px (Desktop)</td>
</tr>
<tr>
<th>Body 1</th>
<td class='body-1'>Regular 14px (Device), Regular 13px (Desktop)</td>
</tr>
<tr>
<th>Caption</th>
<td class='caption'>Regular 12px</td>
</tr>
<tr>
<th>Menu</th>
<td class='menu'>Medium 14px (Device), Medium 13px (Desktop)</td>
</tr>
<tr>
<th>Button</th>
<td class='button'>Medium (All Caps) 14px</td>
</tr>
</table>
<h1>&lt;h1&gt;</h1>
<h2>&lt;h2&gt;</h2>
<h3>&lt;h3&gt;</h3>
<h4>&lt;h4&gt;</h4>
<h5>&lt;h5&gt;</h5>
<h6>&lt;h6&gt;</h6>
<div class="preview-block">
<table>
<tr>
<th>Display 4</th>
<td class='display-4'>Light 112px</td>
</tr>
<tr>
<th>Display 3</th>
<td class='display-3'>Regular 56px</td>
</tr>
<tr>
<th>Display 2</th>
<td class='display-2'>Regular 45px</td>
</tr>
<tr>
<th>Display 1</th>
<td class='display-1'>Regular 34px</td>
</tr>
<tr>
<th>Headline</th>
<td class='headline'>Regular 24px</td>
</tr>
<tr>
<th>Title</th>
<td class='title'>Medium 20px</td>
</tr>
<tr>
<th>Subhead</th>
<td class='subhead'>Regular 16px (Device), Regular 15px (Desktop)</td>
</tr>
<tr>
<th>Body 2</th>
<td class='body-2'>Medium 14px (Device), Medium 13px (Desktop)</td>
</tr>
<tr>
<th>Body 1</th>
<td class='body-1'>Regular 14px (Device), Regular 13px (Desktop)</td>
</tr>
<tr>
<th>Caption</th>
<td class='caption'>Regular 12px</td>
</tr>
<tr>
<th>Menu</th>
<td class='menu'>Medium 14px (Device), Medium 13px (Desktop)</td>
</tr>
<tr>
<th>Button</th>
<td class='button'>Medium (All Caps) 14px</td>
</tr>
</table>
</div>
<p>&lt;p&gt;</p>
<h3>HTML Elements</h3>
<p class="body-2">&lt;p class="body-2"&gt;</p>
<div class="preview-block">
<h1>&lt;h1&gt;</h1>
<h2>&lt;h2&gt;</h2>
<h3>&lt;h3&gt;</h3>
<h4>&lt;h4&gt;</h4>
<h5>&lt;h5&gt;</h5>
<h6>&lt;h6&gt;</h6>
<p class="caption">&lt;p class="caption"&gt;</p>
<p>&lt;p&gt;</p>
<p class="menu">&lt;p class="menu"&gt;</p>
<p class="body-2">&lt;p class="body-2"&gt;</p>
<p class="caption">&lt;p class="caption"&gt;</p>
<p class="menu">&lt;p class="menu"&gt;</p>
<p class="button">&lt;p class="button"&gt;</p>
</div>
<h3>Color Contrasts</h3>
<div class="preview-block preview-block-white">
<p class="caption colorContrast">Caption</p>
<p class="body-2 colorContrast">Body</p>
<p class="subhead colorContrast">Subhead</p>
<p class="title colorContrast">Title</p>
<p class="display-1 colorContrast">Display</p>
</div>
<div class="preview-block preview-block-black">
<p class="caption colorContrast">Caption</p>
<p class="body-2 colorContrast">Body</p>
<p class="subhead colorContrast">Subhead</p>
<p class="title colorContrast">Title</p>
<p class="display-1 colorContrast">Display</p>
</div>
<div class="preview-block preview-block-img-1">
<p class="caption colorContrast">Caption</p>
<p class="body-2 colorContrast">Body</p>
<p class="subhead colorContrast">Subhead</p>
<p class="title colorContrast">Title</p>
<p class="display-1 colorContrast">Display</p>
</div>
<div class="preview-block preview-block-img-2">
<p class="caption colorContrast">Caption</p>
<p class="body-2 colorContrast">Body</p>
<p class="subhead colorContrast">Subhead</p>
<p class="title colorContrast">Title</p>
<p class="display-1 colorContrast">Display</p>
</div>
<p class="button">&lt;p class="button"&gt;</p>
</body>
</html>

31
app/styleguide/typography/demo.scss
View File

@ -2,8 +2,37 @@
@import 'typography';
table th {
@include typo-caption($colorContrast: true);
padding-right: 80px;
@include typo-body-1();
vertical-align: top;
text-align: left;
}
.preview-block-white {
background-color: white;
color: black;
}
.preview-block-black {
background-color: black;
color: white;
}
.preview-block-white, .preview-block-black, .preview-block-img-1, .preview-block-img-2 {
width: 360px;
height: 272px;
box-sizing: border-box;
}
.preview-block-img-1 {
background-image: url(images/img-1.png);
color: white;
}
.preview-block-img-2 {
background-image: url(images/img-2.png);
color: white;
}

BIN
app/styleguide/typography/images/img-1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 118 KiB

BIN
app/styleguide/typography/images/img-2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 174 KiB