Addy Osmani
commit
c1fdf5a588
|
|
@ -0,0 +1,26 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="174px" height="279px" viewBox="0 0 174 279" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.3.1 (12005) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>components</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="components" sketch:type="MSLayerGroup">
|
||||
<g id="Page-1" transform="translate(2.000000, 3.000000)" stroke-width="3" sketch:type="MSShapeGroup">
|
||||
<g id="About">
|
||||
<g id="mo">
|
||||
<g id="Group">
|
||||
<ellipse id="Oval-1" stroke="#F6A623" cx="85" cy="45.5" rx="85" ry="45.5"></ellipse>
|
||||
<path d="M85,36 L85,59" id="Line" stroke="#FFFFFF"></path>
|
||||
<path d="M105,48 L66,48" id="Line-2" stroke="#FFFFFF"></path>
|
||||
<path d="M169,227 C169,252.405098 131.168061,273 84.5,273 C37.8319386,273 0,252.405098 0,227" id="Oval-2" stroke="#F6A623"></path>
|
||||
<path d="M0.5,51.2018141 L0.5,228.928853" id="Line-3" stroke="#F6A623"></path>
|
||||
<path d="M169.5,51.2018141 L169.5,228.928853" id="Line" stroke="#F6A623"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<rect id="Rectangle-1" stroke-opacity="0.01" stroke="#979797" sketch:type="MSShapeGroup" x="0" y="0" width="174" height="279"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,26 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="174px" height="279px" viewBox="0 0 174 279" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.3.1 (12005) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>components_mo</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="components_mo" sketch:type="MSLayerGroup">
|
||||
<g id="Page-1" transform="translate(2.000000, 110.000000)" stroke-width="3" sketch:type="MSShapeGroup">
|
||||
<g id="About">
|
||||
<g id="mo">
|
||||
<g id="Group">
|
||||
<ellipse id="Oval-1" stroke="#F6A623" cx="85" cy="45.5" rx="85" ry="45.5"></ellipse>
|
||||
<path d="M85,36 L85,59" id="Line" stroke="#FFFFFF"></path>
|
||||
<path d="M105,48 L66,48" id="Line-2" stroke="#FFFFFF"></path>
|
||||
<path d="M169,120 C169,145.405098 131.168061,166 84.5,166 C37.8319386,166 0,145.405098 0,120" id="Oval-2" stroke="#F6A623"></path>
|
||||
<path d="M0,52.0793651 L0,121.972021" id="Line-3" stroke="#F6A623"></path>
|
||||
<path d="M169,52.0793651 L169,121.972021" id="Line" stroke="#F6A623"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<rect id="Rectangle-1" stroke-opacity="0.01" stroke="#979797" sketch:type="MSShapeGroup" x="0" y="0" width="174" height="279"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,23 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="156px" height="171px" viewBox="0 0 156 171" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.3 (11970) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Group</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="About" sketch:type="MSArtboardGroup" transform="translate(-637.000000, -2280.000000)" stroke-linecap="square" stroke="#FFCCBA" stroke-width="2.43">
|
||||
<g id="Group" sketch:type="MSLayerGroup" transform="translate(0.000000, 2187.000000)">
|
||||
<g transform="translate(637.000000, 93.000000)" id="Line" sketch:type="MSShapeGroup">
|
||||
<path d="M78.3506806,80.2458245 L119.421309,122.314653"></path>
|
||||
<path d="M74.3449812,169.273813 L119.686418,122.830374"></path>
|
||||
<path d="M40.2965361,122.08867 L2.18972151,83.0556888"></path>
|
||||
<path d="M1.7583555,60.5428316 L1.7583555,5.15157666"></path>
|
||||
<path d="M42.2993859,44.1306079 L76.3478309,7.20310462"></path>
|
||||
<path d="M100.382027,1.2483711 L154.496048,1.2483711"></path>
|
||||
<path d="M114.401975,44.1306079 L150.675128,81.2853613"></path>
|
||||
<path d="M152.070856,105.676447 L152.070856,156.964646"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,23 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="176px" height="201px" viewBox="0 0 176 201" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.3 (11970) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>mo</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="About" sketch:type="MSArtboardGroup" transform="translate(-656.000000, -2263.000000)" stroke-linecap="square" stroke="#FFCCBA" stroke-width="2.43">
|
||||
<g id="Group" sketch:type="MSLayerGroup" transform="translate(0.000000, 2187.000000)">
|
||||
<g id="mo" transform="translate(715.000000, 212.500000) rotate(22.000000) translate(-715.000000, -212.500000) translate(637.000000, 93.000000)" sketch:type="MSShapeGroup">
|
||||
<path d="M78.3506806,80.2458245 L119.421309,122.314653" id="Line"></path>
|
||||
<path d="M74.3449812,169.273813 L119.686418,122.830374" id="Line"></path>
|
||||
<path d="M40.2965361,122.08867 L2.18972151,83.0556888" id="Line"></path>
|
||||
<path d="M1.7583555,60.5428316 L1.7583555,5.15157666" id="Line"></path>
|
||||
<path d="M42.2993859,44.1306079 L76.3478309,7.20310462" id="Line"></path>
|
||||
<path d="M100.382027,1.2483711 L154.496048,1.2483711" id="Line"></path>
|
||||
<path d="M114.401975,44.1306079 L150.675128,81.2853613" id="Line"></path>
|
||||
<path d="M152.070856,105.676447 L152.070856,156.964646" id="Line"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,8 @@
|
|||
(function() {
|
||||
Array.prototype.forEach.call(document.querySelectorAll('[data-target]'), function(el) {
|
||||
var target = el.getAttribute('data-target');
|
||||
el.addEventListener('click', function() {
|
||||
location.href = target;
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="35px" height="35px" viewBox="0 0 35 35" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.3 (11970) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>MDL logo</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="Template-1---Left-nav" sketch:type="MSArtboardGroup" transform="translate(-56.000000, -56.000000)" stroke-width="3" stroke="#FFFFFF">
|
||||
<g id="Header-icons-+-logo" sketch:type="MSLayerGroup" transform="translate(56.000000, 56.000000)">
|
||||
<g id="MDL-logo" sketch:type="MSShapeGroup">
|
||||
<path d="M0,0 L35,0 L35,35 L0,35 L0,0 Z" id="Shape"></path>
|
||||
<path d="M35,0 L17.5,35 L0,0 L35,0 Z" id="Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -1,6 +1,241 @@
|
|||
.mdl-layout__content {
|
||||
padding: 20px;
|
||||
html > body {
|
||||
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
|
||||
}
|
||||
.mdl-layout__header {
|
||||
height: 50vh;
|
||||
align-items: flex-start;
|
||||
padding: 32px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.mdl-layout-title {
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.5em;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.mdl-layout-title a {
|
||||
font-weight: inherit;
|
||||
}
|
||||
.mdl-layout__header {
|
||||
background-size: auto 30%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.about .mdl-layout__header {
|
||||
background-color: #37474f;
|
||||
background-image: url('logo.svg');
|
||||
}
|
||||
.about .mdl-navigation {
|
||||
background-color: #37474f;
|
||||
}
|
||||
.templates .mdl-layout__header {
|
||||
background-color: #00ACC2;
|
||||
background-image: url('templates.svg');
|
||||
}
|
||||
.templates .mdl-navigation {
|
||||
background-color: #00ACC2;
|
||||
}
|
||||
.components .mdl-layout__header {
|
||||
background-color: #E90974;
|
||||
background-image: url('components.svg');
|
||||
}
|
||||
.components .mdl-navigation {
|
||||
background-color: #E90974;
|
||||
}
|
||||
.styles .mdl-layout__header {
|
||||
background-color: #8F4099;
|
||||
background-image: url('styles.svg');
|
||||
}
|
||||
.styles .mdl-navigation {
|
||||
background-color: #8F4099;
|
||||
}
|
||||
.customize .mdl-layout__header {
|
||||
background-color: #191E80;
|
||||
background-image: url('customize.svg');
|
||||
}
|
||||
.customize .mdl-navigation {
|
||||
background-color: #191E80;
|
||||
}
|
||||
.mdl-navigation {
|
||||
box-shadow: none !important;
|
||||
border: 0 !important;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.mdl-navigation a {
|
||||
font-weight: 300;
|
||||
line-height: 64px;
|
||||
padding: 0 24px;
|
||||
color: white;
|
||||
box-sizing: border-box;
|
||||
border-bottom: 3px solid transparent;
|
||||
}
|
||||
.mdl-navigation a:hover {
|
||||
background-color: inherit;
|
||||
}
|
||||
.mdl-navigation a:not(.download) {
|
||||
opacity: 0.65;
|
||||
}
|
||||
.mdl-navigation a.download {
|
||||
text-decoration: none;
|
||||
margin-right: 24px;
|
||||
}
|
||||
.mdl-navigation a.download button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
.mdl-navigation a.download .mdl-icon {
|
||||
color: black;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.about .mdl-navigation .about,
|
||||
.templates .mdl-navigation .templates,
|
||||
.components .mdl-navigation .components,
|
||||
.styles .mdl-navigation .styles,
|
||||
.customize .mdl-navigation .customize {
|
||||
opacity: 1;
|
||||
border-bottom-color: #18FFFF;
|
||||
}
|
||||
.mdl-layout__content {
|
||||
overflow: visible;
|
||||
}
|
||||
.mdl-layout__content > section.download {
|
||||
width: 100%;
|
||||
height: 6rem;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.mdl-layout__content > section.download > a {
|
||||
font-weight: 300;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.mdl-layout__content > footer {
|
||||
height: 120px;
|
||||
}
|
||||
.mdl-mini-footer {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
}
|
||||
.mdl-mini-footer ul {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.mdl-mini-footer ul > * {
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.about-panel {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.about-panel--text {
|
||||
padding: 100px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
line-height: 2em;
|
||||
}
|
||||
.about-panel--text dl {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
}
|
||||
.about-panel--text dl dt {
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
width: 33%;
|
||||
margin-right: 24px;
|
||||
}
|
||||
.about-panel--text dl dd {
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
width: 66%;
|
||||
margin: 0;
|
||||
margin-left: 24px;
|
||||
}
|
||||
.about-panel--components,
|
||||
.about-panel--styles,
|
||||
.about-panel--customize,
|
||||
.about-panel--templates {
|
||||
height: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 40px;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.6rem;
|
||||
width: auto;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: auto 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.about-panel--templates {
|
||||
background-color: #B3E0E1;
|
||||
background-image: url(/assets/templates.svg);
|
||||
}
|
||||
.about-panel--templates:hover {
|
||||
background-image: url(/assets/templates_mo.svg);
|
||||
}
|
||||
.about-panel--components {
|
||||
background-color: #E90974;
|
||||
background-image: url(/assets/components.svg);
|
||||
}
|
||||
.about-panel--components:hover {
|
||||
background-image: url(/assets/components_mo.svg);
|
||||
}
|
||||
.about-panel--styles {
|
||||
background-color: #8F4099;
|
||||
background-image: url(/assets/styles.svg);
|
||||
}
|
||||
.about-panel--styles:hover {
|
||||
background-image: url(/assets/styles_mo.svg);
|
||||
}
|
||||
.about-panel--customize {
|
||||
background-color: #191E80;
|
||||
background-image: url(/assets/customize.svg);
|
||||
}
|
||||
.about-panel--customize:hover {
|
||||
background-image: url(/assets/customize_mo.svg);
|
||||
}
|
||||
|
||||
.templates .content {
|
||||
max-width: 1280px;
|
||||
}
|
||||
.templates .mdl-layout__content .content {
|
||||
padding: 72px 0;
|
||||
}
|
||||
.template {
|
||||
width: 100%;
|
||||
margin-bottom: 72px;
|
||||
}
|
||||
.template > .template__meta a {
|
||||
color:inherit;
|
||||
}
|
||||
.template > .template__preview {
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
min-height: 30vh;
|
||||
}
|
||||
.template.template--product > .template__preview {
|
||||
background-image: url('/assets/template_product.jpg');
|
||||
}
|
||||
.template.template--general > .template__preview {
|
||||
background-image: url('/assets/template_general.jpg');
|
||||
}
|
||||
|
||||
|
||||
.mdl-layout__content p {
|
||||
font-size: 15px;
|
||||
|
|
@ -46,33 +281,3 @@ button a {
|
|||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* TOC */
|
||||
|
||||
.chapter-toc h1 {
|
||||
font-size: 15px;
|
||||
line-height: 16px;
|
||||
padding-bottom: 12px;
|
||||
font-weight: 400;
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.chapter-toc {
|
||||
border-left: 5px solid #e1bee7;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.chapter-toc ul {
|
||||
list-style: none;
|
||||
margin-top: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.chapter-toc li:last-child {
|
||||
line-height: 20px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.chapter-toc li {
|
||||
line-height: 40px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="174px" height="277px" viewBox="0 0 174 277" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.3 (11970) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>mo</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="About" sketch:type="MSArtboardGroup" transform="translate(-273.000000, -1765.000000)">
|
||||
<g id="mo" sketch:type="MSLayerGroup" transform="translate(274.000000, 1767.000000)">
|
||||
<g id="Group" sketch:type="MSShapeGroup">
|
||||
<ellipse id="Oval-1" stroke="#F6A623" stroke-width="3" cx="86" cy="45.5" rx="85" ry="45.5"></ellipse>
|
||||
<path d="M86,36 L86,59" id="Line" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square"></path>
|
||||
<path d="M106,48 L67,48" id="Line-2" stroke="#FFFFFF" stroke-width="3" stroke-linecap="square"></path>
|
||||
<path d="M170,227 C170,252.405098 132.168061,273 85.5,273 C38.8319386,273 1,252.405098 1,227" id="Oval-2" stroke="#F6A623" stroke-width="3"></path>
|
||||
<path d="M26.5,157.5 L28,159" id="Line-2" stroke="#F6A623" stroke-linecap="square"></path>
|
||||
<path d="M1.5,51.2018141 L1.5,228.928853" id="Line-3" stroke="#F6A623" stroke-width="3" stroke-linecap="square"></path>
|
||||
<path d="M170.5,51.2018141 L170.5,228.928853" id="Line" stroke="#F6A623" stroke-width="3" stroke-linecap="square"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -0,0 +1,24 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="333px" height="297px" viewBox="0 0 333 297" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.3.1 (12005) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>styles</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="styles" sketch:type="MSLayerGroup" transform="translate(2.000000, 0.000000)">
|
||||
<g id="Page-1" transform="translate(2.000000, 2.000000)" stroke-width="3" sketch:type="MSShapeGroup">
|
||||
<g id="About">
|
||||
<g id="Group-5">
|
||||
<path d="M125,136.297592 L125,291.5" id="Line-3" stroke="#EA5B61"></path>
|
||||
<path d="M247,61.2975922 L247,216.5" id="Line-3" stroke="#EA5B61"></path>
|
||||
<path d="M0,77.2975922 L0,232.5" id="Line-3" stroke="#EA5B61"></path>
|
||||
<path d="M0.5,233.5 L126,293" id="Line" stroke="#EA5B61"></path>
|
||||
<path d="M126.5,292.5 L245.5,218.5" id="Line" stroke="#EA5B61"></path>
|
||||
<path d="M0,76 L124,0 L246,59 L124,135 L0,76 L0,76 Z" id="Path-3" stroke="#FFFFFF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<rect id="Rectangle-2" stroke-opacity="0.01" stroke="#979797" sketch:type="MSShapeGroup" x="0" y="0" width="331" height="297"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -0,0 +1,24 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="333px" height="297px" viewBox="0 0 333 297" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.3.1 (12005) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>styles_mo</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="styles_mo" sketch:type="MSLayerGroup" transform="translate(2.000000, 0.000000)">
|
||||
<g id="Page-1" transform="translate(2.000000, 2.000000)" stroke-width="3" sketch:type="MSShapeGroup">
|
||||
<g id="About">
|
||||
<g id="mo">
|
||||
<path d="M125,136.297592 L205,291.5" id="Line-3" stroke="#EA5B61"></path>
|
||||
<path d="M247,61.2975922 L327,216.5" id="Line-3" stroke="#EA5B61"></path>
|
||||
<path d="M0,77.2975922 L80,232.5" id="Line-3" stroke="#EA5B61"></path>
|
||||
<path d="M80.5,233.5 L206,293" id="Line" stroke="#EA5B61"></path>
|
||||
<path d="M206.5,292.5 L325.5,218.5" id="Line" stroke="#EA5B61"></path>
|
||||
<path d="M0,76 L124,0 L246,59 L124,135 L0,76 L0,76 Z" id="Path-3" stroke="#FFFFFF"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<rect id="Rectangle-2" stroke-opacity="0.01" stroke="#979797" sketch:type="MSShapeGroup" x="0" y="0" width="331" height="297"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
|
|
@ -0,0 +1,16 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="279px" height="251px" viewBox="0 0 279 251" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.3 (11970) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Path 1 + Path 1 + Path 1</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="About" sketch:type="MSArtboardGroup" transform="translate(-582.000000, -1056.000000)" stroke-width="3">
|
||||
<g id="Path-1-+-Path-1-+-Path-1" sketch:type="MSLayerGroup" transform="translate(582.000000, 1056.000000)">
|
||||
<path d="M123.409063,112 L279,180.394072 L155.590937,251 L0,182.605928 L123.409063,112 L123.409063,112 Z" id="Rectangle-8" stroke="#204489" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M279,124.394072 L155.590937,195 L0,126.605928 L123.409063,56 L279,124.394072 Z" id="Rectangle-8" stroke="#18BFD6" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M279,68.3940718 L155.590937,139 L0,70.6059282 L123.409063,0 L279,68.3940718 Z" id="Rectangle-8" stroke="#FFFFFF" sketch:type="MSShapeGroup"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,16 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg width="279px" height="251px" viewBox="0 0 279 251" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
|
||||
<!-- Generator: Sketch 3.3 (11970) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Path 1 + Path 1 + Path 1</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
|
||||
<g id="About" sketch:type="MSArtboardGroup" transform="translate(-582.000000, -1056.000000)" stroke-width="3">
|
||||
<g id="Path-1-+-Path-1-+-Path-1" sketch:type="MSLayerGroup" transform="translate(582.000000, 1056.000000)">
|
||||
<path d="M123.409063,112 L279,180.394072 L155.590937,251 L0,182.605928 L123.409063,112 L123.409063,112 Z" id="Rectangle-8" stroke="#204489" fill="#204489" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M279,124.394072 L155.590937,195 L0,126.605928 L123.409063,56 L279,124.394072 Z" id="Rectangle-8" stroke="#18BFD6" fill="#18BFD6" sketch:type="MSShapeGroup"></path>
|
||||
<path d="M279,68.3940718 L155.590937,139 L0,70.6059282 L123.409063,0 L279,68.3940718 Z" id="Rectangle-8" stroke="#FFFFFF" fill="#FFFFFF" sketch:type="MSShapeGroup"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
layout: components
|
||||
title: Components
|
||||
bodyclass: components
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
layout: customize
|
||||
title: Customize & Download
|
||||
bodyclass: customize
|
||||
---
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,24 +1,36 @@
|
|||
---
|
||||
layout: page
|
||||
title: Welcome
|
||||
layout: layout
|
||||
bodyclass: about
|
||||
---
|
||||
<!-- TODO: Try to separate markup and content -->
|
||||
<section class="about-panel about-panel--text mdl-cell mdl-cell--12-col">
|
||||
<dl>
|
||||
<dt>Material Design Lite</dt>
|
||||
<dd>
|
||||
Material Design Lite lets you add a [Material Design](http://google.com/design/spec) look and feel to your static content websites. It doesn’t rely on any JavaScript frameworks and aims to optimise for cross-device use, gracefully degrade in older browsers and offer an experience that is accessible from the get-go.
|
||||
</dd>
|
||||
</dl>
|
||||
</section>
|
||||
|
||||
<section class="about-panel about-panel--templates mdl-cell mdl-cell--12-col" data-target="/templates">
|
||||
Templates
|
||||
</section>
|
||||
|
||||
Material Design Lite lets you add a [Material Design](http://google.com/design/spec) look and feel to your static content websites. It doesn’t rely on any JavaScript frameworks and aims to optimise for cross-device use, gracefully degrade in older browsers and offer an experience that is accessible from the get-go.
|
||||
<section class="about-panel about-panel--text mdl-cell mdl-cell--12-col">
|
||||
Esse dolor ullamco ipsum enim aliquip minim. Sunt ullamco excepteur laboris nulla sunt. Consequat labore irure sint cillum aute labore est cupidatat eu. Culpa sint do non amet quis quis fugiat laboris sit sint id Lorem. Dolor adipisicing eu nostrud eiusmod sint consequat enim est velit et non mollit minim.
|
||||
</section>
|
||||
|
||||
<a href="https://github.com/google/material-design-lite/archive/master.zip" class="mdl-download mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Download Package</a>
|
||||
<section class="about-panel about-panel--components mdl-color-text--white mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col" data-target="/components">
|
||||
Components
|
||||
</section>
|
||||
<section class="about-panel about-panel--styles mdl-color-text--white mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col" data-target="/styles">
|
||||
Styles
|
||||
</section>
|
||||
<section class="about-panel about-panel--customize mdl-color-text--white mdl-cell mdl-cell--12-col" data-target="/customize">
|
||||
Customize
|
||||
</section>
|
||||
|
||||
|
||||
<img src="assets/shapes.svg" alt="Material Shapes">
|
||||
|
||||
## Cross-device by default
|
||||
|
||||
Develop with a single underlying system for your site that allows for a unified experience across platforms and device sizes. Mobile precepts are fundamental, but touch, mouse, and keyboard are all first-class input methods.
|
||||
|
||||
## Built with <abbr title="Block Element Modifier">BEM</abbr> & Sass
|
||||
|
||||
Material Design Lite provides vanilla CSS. Our source utilises Sass, the popular CSS preprocessor and BEM - [the front-end naming methodology](https://github.com/google/material-design-lite/wiki/Understanding-BEM). Quickly get started with the pre-built CSS or build the source yourself.
|
||||
|
||||
## Components
|
||||
|
||||
With Material Design Lite, you get dozens of custom HTML and CSS components. They're documented, lightweight and bring the beauty of Material Design to content sites.
|
||||
<section class="about-panel about-panel--text mdl-cell--12-col">
|
||||
Cillum magna sit ea exercitation excepteur enim pariatur ex deserunt. Deserunt aute nisi in laboris anim proident sunt enim pariatur quis. Aliqua anim voluptate veniam ad eiusmod ullamco deserunt. Laborum duis proident ipsum ex velit sint sint veniam amet eu Lorem. Nostrud adipisicing consequat deserunt magna consectetur pariatur culpa qui do. Ex dolor incididunt laborum ex ea non ea incididunt labore laboris minim consequat cillum. Proident nisi pariatur amet velit exercitation Lorem officia irure occaecat in deserunt. Tempor enim culpa do eu ipsum consequat irure amet officia.
|
||||
</section>
|
||||
<script src="assets/index.js" async></script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
layout: layout
|
||||
title: Styles
|
||||
bodyclass: styles
|
||||
---
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
layout: templates
|
||||
title: Templates
|
||||
bodyclass: templates
|
||||
templates:
|
||||
- name: product
|
||||
title: Product
|
||||
description: Laborum quis laboris veniam minim labore id excepteur.
|
||||
- name: blog
|
||||
title: Blog
|
||||
description: Deserunt dolor dolore ut excepteur tempor occaecat aliqua sunt eu velit incididunt irure irure in.
|
||||
- name: general
|
||||
title: Universal
|
||||
description: Esse irure aliqua amet ullamco aliqua ullamco est exercitation adipisicing nisi laborum sit labore voluptate.
|
||||
- name: dashboard
|
||||
title: Dashboard
|
||||
description: Non laboris consequat ullamco aute cillum ad.
|
||||
---
|
||||
|
|
@ -37,43 +37,56 @@
|
|||
<link rel="stylesheet" href="/assets/main.css">
|
||||
<script src="/material.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo-layout">
|
||||
<div class="mdl-layout mdl-js-layout">
|
||||
<header class="mdl-layout__header">
|
||||
<!-- Icon -->
|
||||
<img class="mdl-layout-icon" src="/assets/app-icon.png">
|
||||
<!-- Title -->
|
||||
<span class="mdl-layout-title"><a href="/">Material Design Lite</a></span>
|
||||
<!-- Add spacer, to align navigation to the right -->
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<!-- Navigation -->
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="/">Home
|
||||
<a class="mdl-navigation__link" href="/getting_started">Getting started
|
||||
</a>
|
||||
<a class="mdl-navigation__link" href="/components">Components</a>
|
||||
<a class="mdl-navigation__link" href="/customize">Customize</a>
|
||||
<a class="mdl-navigation__link" href="http://github.com/google/material-design-lite">Github</a>
|
||||
</nav>
|
||||
</header>
|
||||
<div class="mdl-layout__drawer">
|
||||
<span class="mdl-layout-title">Material Design Lite</span>
|
||||
<nav class="mdl-navigation">
|
||||
<a class="mdl-navigation__link" href="/">Home
|
||||
</a>
|
||||
<a class="mdl-navigation__link" href="/getting_started">Getting started
|
||||
</a>
|
||||
<a class="mdl-navigation__link" href="/components">Components</a>
|
||||
<a class="mdl-navigation__link" href="/customize">Customize</a>
|
||||
<a class="mdl-navigation__link" href="http://github.com/google/material-design-lite">Github</a>
|
||||
</nav>
|
||||
<body class="{{page.bodyclass}}">
|
||||
<div class="mdl-layout mdl-js-layout">
|
||||
<header class="mdl-layout__header">
|
||||
<span class="mdl-layout-title"><a href="/">Material<br>Design<br>Lite</a></span>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
|
||||
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
|
||||
<span class="mdl-icon mdl-icon--search"></span>
|
||||
</label>
|
||||
<div class="mdl-textfield__expandable-holder">
|
||||
<input class="mdl-textfield__input" type="text" id="search" />
|
||||
<label class="mdl-textfield__label" for="expando1">Enter your query...</label>
|
||||
</div>
|
||||
</div>
|
||||
<main class="mdl-layout__content">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
</div>
|
||||
</header>
|
||||
<nav class="mdl-navigation mdl-js-ripple-effect">
|
||||
<a href="/" class="mdl-navigation__link frontpage">About</a>
|
||||
<a href="/templates" class="mdl-navigation__link templates">Templates</a>
|
||||
<a href="/components" class="mdl-navigation__link components">Components</a>
|
||||
<a href="/styles" class="mdl-navigation__link styles">Styles</a>
|
||||
<a href="/customize" class="mdl-navigation__link customize">Customize</a>
|
||||
<a href="https://github.com/google/material-design-lite" class="mdl-navigation__link">GitHub</a>
|
||||
<div class="mdl-layout-spacer"></div>
|
||||
<a href="#" class="download">
|
||||
Download
|
||||
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--fab mdl-button--mini-fab mdl-color--lime-A200"><span class="mdl-icon mdl-icon--file-download"></span></button>
|
||||
</a>
|
||||
</nav>
|
||||
<main class="mdl-layout__content mdl-color-text--grey-600">
|
||||
<div class="content mdl-grid mdl-grid--no-spacing">
|
||||
{% block content %}
|
||||
{{content|safe}}
|
||||
{% endblock %}
|
||||
</div>
|
||||
<section class="download mdl-color--grey-800">
|
||||
<a href="#" class="mdl-color-text--grey-50">Download Kit</a>
|
||||
</section>
|
||||
<footer class="mdl-mini-footer mdl-color--grey-900">
|
||||
<ul>
|
||||
<button class="mdl-mini-footer--social-btn"></button>
|
||||
<button class="mdl-mini-footer--social-btn"></button>
|
||||
<button class="mdl-mini-footer--social-btn"></button>
|
||||
</ul>
|
||||
<ul>
|
||||
<a href="https://developers.google.com/web/starter-kit/">Web Starter Kit</a>
|
||||
<a href="#">Help</a>
|
||||
<a href="#">Privacy & Terms</a>
|
||||
</ul>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
{% extends 'layout.html' %}
|
||||
{% block content %}
|
||||
{% for template in page.templates %}
|
||||
<section class="template template--{{ template.name }} mdl-grid mdl-cell mdl-cell--12-col">
|
||||
<div class="template__meta mdl-cell mdl-cell--4-col mdl-grid mdl-grid--no-spacing">
|
||||
<h3 class="template__header mdl-cell mdl-cell--12-col">{{ template.title }}</h3>
|
||||
<p class="mdl-cell mdl-cell--12-col">
|
||||
{{ template.description }}
|
||||
</p>
|
||||
<a href="#" class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
|
||||
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
|
||||
<span class="mdl-icon mdl-icon--file-download"></span>
|
||||
</button>
|
||||
Download
|
||||
</a>
|
||||
<a href="/templates/{{ template.name }}" target="_blank" class="mdl-cell mdl-cell--6-col-desktop mdl-cell--4-col-tablet mdl-cell--2-col-phone">
|
||||
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
|
||||
<span class="mdl-icon mdl-icon--arrow-forward"></span>
|
||||
</button>
|
||||
Preview
|
||||
</a>
|
||||
</div>
|
||||
<div class="template__preview mdl-cell mdl-cell--8-col" style="background-image: url('/assets/template_{{ template.name }}.jpg');">
|
||||
</div>
|
||||
</section>
|
||||
{% endfor %}
|
||||
{% endblock %}
|
||||
29
gulpfile.js
29
gulpfile.js
|
|
@ -245,14 +245,6 @@ gulp.task('test:visual', function() {
|
|||
*/
|
||||
var site = {};
|
||||
|
||||
|
||||
/**
|
||||
* Compiled swig templates cache.
|
||||
* @type {Object}
|
||||
*/
|
||||
var templates = {};
|
||||
|
||||
|
||||
/**
|
||||
* Generates an HTML file based on a template and file metadata.
|
||||
*/
|
||||
|
|
@ -263,14 +255,10 @@ function applyTemplate() {
|
|||
page: file.page,
|
||||
content: file.contents.toString()
|
||||
};
|
||||
// If template not in template cache, compile and add it.
|
||||
if (!templates[file.page.layout]) {
|
||||
var templateFile = path.join(
|
||||
__dirname, 'docs', '_templates', file.page.layout + '.html');
|
||||
$.util.log('Compiling template:', $.util.colors.yellow(file.page.layout));
|
||||
templates[file.page.layout] = swig.compileFile(templateFile);
|
||||
}
|
||||
var tpl = templates[file.page.layout];
|
||||
|
||||
var templateFile = path.join(
|
||||
__dirname, 'docs', '_templates', file.page.layout + '.html');
|
||||
var tpl = swig.compileFile(templateFile, {cache: false});
|
||||
file.contents = new Buffer(tpl(data), 'utf8');
|
||||
this.push(file);
|
||||
cb();
|
||||
|
|
@ -284,7 +272,7 @@ function applyTemplate() {
|
|||
gulp.task('components', function() {
|
||||
return gulp.src('./src/**/README.md', {base: './src'})
|
||||
// Add basic front matter.
|
||||
.pipe($.header('---\nlayout: component\n---\n\n'))
|
||||
.pipe($.header('---\nlayout: component\nbodyclass: components\n---\n\n'))
|
||||
.pipe($.frontMatter({property: 'page', remove: true}))
|
||||
.pipe($.marked())
|
||||
.pipe((function () {
|
||||
|
|
@ -351,6 +339,10 @@ gulp.task('pages', ['components'], function() {
|
|||
*/
|
||||
gulp.task('assets', function () {
|
||||
return gulp.src(['docs/_assets/**'])
|
||||
.pipe($.if(/\.(svg|jpg|png)$/i, $.imagemin({
|
||||
progressive: true,
|
||||
interlaced: true
|
||||
})))
|
||||
.pipe(gulp.dest('docs/out/assets'));
|
||||
});
|
||||
|
||||
|
|
@ -358,7 +350,7 @@ gulp.task('assets', function () {
|
|||
/**
|
||||
* Serves the landing page from "out" directory.
|
||||
*/
|
||||
gulp.task('serve', ['assets', 'pages', 'demos', 'templates'], function () {
|
||||
gulp.task('serve', ['scripts', 'styles', 'assets', 'pages', 'demos', 'templates'], function () {
|
||||
browserSync({
|
||||
notify: false,
|
||||
server: {
|
||||
|
|
@ -375,6 +367,7 @@ gulp.task('serve', ['assets', 'pages', 'demos', 'templates'], function () {
|
|||
gulp.watch(['src/**/*.html'], ['demos', reload]);
|
||||
gulp.watch(['src/**/README.md'], ['components', reload]);
|
||||
gulp.watch(['templates/**/*'], ['templates', reload]);
|
||||
gulp.watch(['docs/**/*', '!docs/out/**/*'], ['pages', 'assets', reload]);
|
||||
});
|
||||
|
||||
gulp.task('publish', ['default', 'templates', 'assets', 'pages', 'demos'], function() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue