google / material-design-lite Goto Github PK
View Code? Open in Web Editor NEWMaterial Design Components in HTML/CSS/JS
Home Page: https://getmdl.io
License: Apache License 2.0
Material Design Components in HTML/CSS/JS
Home Page: https://getmdl.io
License: Apache License 2.0
So how are we going to handle images with material-design-lite? I see for example the checkbox still loads from url("../checkbox/tick.svg"), but that's not going to work for the minified version
We could include images/..
as one of the directories synthetically served during 'gulp serve' and just copy assets over to that directory during both gulp serve
and the normal gulp
build.
I still need to write a patch demonstrating how this could work.
So I changed the background color of my header, with this:
header.wsk-layout__header {
background-color: #0288D1;
}
but, when the hamburger menu pops up, its background is still dark blue.
Why does .wsk-layout__header .wsk-layout__drawer-button
define its own background-color? Can it inherit?
Ideally, I wouldn't have to reset the background-color twice.
Thanks!
Check out https://github.com/google/material-design-lite/tree/master/src/layout
Scroll down to Example under wsk-layout__tab-bar.
I see this tag: <div class="demo-container">
which wraps the example.
Can we remove that div? For a n00b like me, I question why any and every tag and class is there... it's hard to tell what is required. :) Removing anything that's not actually part of the module/example helps eliminate possibilities to mess something up by people like me.
Thanks again for the awesome toolkit!
Please see for a video of the behavior: https://dl.dropboxusercontent.com/u/316685/scrolling.mov
Here's the code. Looks like you need to be on a macbook air with a full-height window. If I resize the window, I don't see the jitters. Perhaps it's because the content is just about the size of the window.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dartdoc</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/material.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="wsk-layout wsk-js-layout">
<div class="wsk-layout__header wsk-layout__header--multi-row wsk-layout__header--tall wsk-layout__header--waterfall">
<div class="wsk-layout__header-row">
<img class="wsk-layout-icon" src="dart-logo-64.png">
<span class="wsk-layout-title">Dart API</span>
<div class="wsk-layout-spacer"></div>
<nav class="wsk-layout-navigation">
<a class="wsk-navigation__link" href="">Hello</a>
</nav>
</div>
</div>
<div class="wsk-layout__drawer">
<span class="wsk-layout-title">Web Starter Kit</span>
<nav class="wsk-layout-navigation">
<a class="wsk-navigation__link" href="">Hello</a>
</nav>
</div>
<div class="wsk-layout__content">
<div class="container">
<section class="desc markdown" id="description">
<h1>WOW FAKE PACKAGE IS <strong>BEST</strong> <a href="http://example.org">PACKAGE</a></h1>
<p>If you don't have this package yet, get it.
Don't ask questions.</p>
<p>My favorite class is <a href="fake/Cool.html"> Cool</a>.</p>
<p><em>Why should you get this package?</em></p><ul><li>We told you so.</li><li>Everyone is doing it.</li><li>It smells nice.</li></ul>
</section>
<section class="summary" id="classes">
<h2>Classes</h2>
<dl class="dl-horizontal">
<dt id="Annotation">
<a href="fake/Annotation.html">Annotation</a>
</dt>
<dd>
Useful for annotations.
</dd>
<dt id="ConstantClass">
<a href="fake/ConstantClass.html">ConstantClass</a>
</dt>
<dd>
For make-better testing of constants.
</dd>
<dt id="Cool">
<a href="fake/Cool.html">Cool</a>
</dt>
<dd>
This class is cool!
</dd>
<dt id="MixMeIn">
<a href="fake/MixMeIn.html">MixMeIn</a>
</dt>
<dd>
Perfect for mix-ins.
</dd>
<dt id="Interface">
<a href="fake/Interface.html">Interface</a>
</dt>
<dd>
An interface that can be implemented.
</dd>
<dt id="AnotherInterface">
<a href="fake/AnotherInterface.html">AnotherInterface</a>
</dt>
<dd>
Yet another interface that can be implemented.
</dd>
<dt id="SuperAwesomeClass">
<a href="fake/SuperAwesomeClass.html">SuperAwesomeClass</a>
</dt>
<dd>
A super class, with many powers.
</dd>
<dt id="LongFirstLine">
<a href="fake/LongFirstLine.html">LongFirstLine</a>
</dt>
<dd>
This is a very long line spread across... wait for it... two physical lines.
</dd>
<dt id="Foo2">
<a href="fake/Foo2.html">Foo2</a>
</dt>
<dd>
</dd>
</dl>
</section> <!-- summary classes -->
</div> <!-- container -->
</div> <!-- wsk-layout__content" -->
</div> <!-- wek-layout -->
<script src="js/material.js"></script>
</body>
</html>
Currently the only thing indicating our official browser support I see are the autoprefixer settings. It's handy to have it in the readme both for users of the library and for potential contributors.
Something similar to this table would be fine.
I think it would be much simpler if all the image files were directly in images/
directory.
Right now, every component defines its own transition points between mobile / tablet / desktop. We should stardardize these in a single file.
They're currently minified. Is this what you would expect pulling it in as a dependency?
Hoping we can converge on <header>
instead of div class="wsk-layout__header"
.
Also, hoping the layout's README/demo includes a full header, main/content, and footer example. That would be sweet!
I'd like my body's content to have a fixed-width, centered container. What is the best way to accomplish this with MDL?
Thanks!
(Similar to bootstrap's container
class)
I felt I had to do a lot of work in making a page with simple content, h1..3 p pre etc. look reasonable with regards white space around elements. Maybe I just don't get material's beauty. I felt the original wsk was much better. Please advise.
Templates! Let's try to ship with at least 3 x templates. Ideally 5 if we have cycles. Requirements: Mocks from UX for what these should look like.
Current priorities:
We could use gulp-sourcemaps for this. By default, gulp-sourcemaps writes the source maps inline in the compiled CSS files. To write them to a separate file, specify a relative file path in the sourcemaps.write() function.
gulp.src('./src/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write('./css'))
.pipe(gulp.dest('./css'));
// will write the source maps to ./dest/css/maps
See screenshot:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dartdoc</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/material.css">
<link rel="stylesheet" href="skeleton-grid.css">
<link rel="stylesheet" href="other_styles.css">
</head>
<body>
<div class="wsk-layout wsk-js-layout wsk-layout--fixed-header">
<header class="wsk-layout__header">
<div class="wsk-layout__header-row">
<span class="wsk-layout-title">fake package</span>
<div class="wsk-layout-spacer"></div>
<div
<div class="wsk-textfield wsk-js-textfield wsk-textfield--expandable wsk-textfield--floating-label wsk-textfield--align-right">
<label class="wsk-button wsk-js-button wsk-button--icon" for="sample-expclean2">
<span class="wsk-icon wsk-icon--search"/>
</label>
<div class="wsk-textfield__expandable-holder">
<input class="wsk-textfield__input" type="text" name="sample" id="sample-expclean2" />
</div>
</div>
</div>
</header>
<div class="wsk-layout__drawer">
<span class="wsk-layout-title">dartdocs</span>
<nav class="wsk-navigation">
<a class="wsk-navigation__link" href="#">fake package</a>
<a class="wsk-navigation__link" href="#">LongFirstLine class</a>
<a class="wsk-navigation__link" href="#">cool method</a>
</nav>
</div>
<div class="wsk-layout__content">
<div class="container">
<section class="desc markdown" id="description">
<h1>WOW FAKE PACKAGE IS <strong>BEST</strong> <a href="http://example.org">PACKAGE</a></h1>
<p>If you don't have this package yet, get it.
Don't ask questions.</p>
<p>My favorite class is <a href="fake/Cool.html"> Cool</a>.</p>
<p><em>Why should you get this package?</em></p><ul><li>We told you so.</li><li>Everyone is doing it.</li><li>It smells nice.</li></ul>
</section>
<section class="summary" id="classes">
<h4>Classes</h4>
<dl class="dl-horizontal">
<dt id="Annotation">
<a href="fake/Annotation.html">Annotation</a>
</dt>
<dd>
Useful for annotations.
</dd>
<dt id="ConstantClass">
<a href="fake/ConstantClass.html">ConstantClass</a>
</dt>
<dd>
For make-better testing of constants.
</dd>
<dt id="Cool">
<a href="fake/Cool.html">Cool</a>
</dt>
<dd>
This class is cool!
</dd>
<dt id="MixMeIn">
<a href="fake/MixMeIn.html">MixMeIn</a>
</dt>
<dd>
Perfect for mix-ins.
</dd>
<dt id="Interface">
<a href="fake/Interface.html">Interface</a>
</dt>
<dd>
An interface that can be implemented.
</dd>
<dt id="AnotherInterface">
<a href="fake/AnotherInterface.html">AnotherInterface</a>
</dt>
<dd>
Yet another interface that can be implemented.
</dd>
<dt id="SuperAwesomeClass">
<a href="fake/SuperAwesomeClass.html">SuperAwesomeClass</a>
</dt>
<dd>
A super class, with many powers.
</dd>
<dt id="LongFirstLine">
<a href="fake/LongFirstLine.html">LongFirstLine</a>
</dt>
<dd>
This is a very long line spread across... wait for it... two physical lines.
</dd>
<dt id="Foo2">
<a href="fake/Foo2.html">Foo2</a>
</dt>
<dd>
</dd>
</dl>
</section> <!-- summary classes -->
<section class="summary" id="enums">
<h4>Enums</h4>
<dl class="dl-horizontal">
<dt id="Color">
<a href="fake/Color.html">Color</a>
</dt>
<dd>
ROYGBIV
</dd>
</dl>
</section>
<section class="summary" id="properties">
<h4>Properties</h4>
<dl class="withreturntypes">
<dt id="meaningOfLife">
<span class="returntype">int</span>
<span class="name">meaningOfLife</span>
</dt>
<dd>
<div>
<span class="has-it getter">read</span>
<span class=" setter">write</span>
</div>
Final property.
</dd>
<dt id="simpleProperty">
<span class="returntype">String</span>
<span class="name">simpleProperty</span>
</dt>
<dd>
<div>
<span class="has-it getter">read</span>
<span class="has-it setter">write</span>
</div>
Simple property
</dd>
<dt id="justSetter">
<span class="returntype">int</span>
<span class="name">justSetter</span>
</dt>
<dd>
<div>
<span class=" getter">read</span>
<span class="has-it setter">write</span>
</div>
</dd>
<dt id="justGetter">
<span class="returntype">bool</span>
<span class="name">justGetter</span>
</dt>
<dd>
<div>
<span class="has-it getter">read</span>
<span class=" setter">write</span>
</div>
</dd>
<dt id="setAndGet">
<span class="returntype">String</span>
<span class="name">setAndGet</span>
</dt>
<dd>
<div>
<span class="has-it getter">read</span>
<span class="has-it setter">write</span>
</div>
</dd>
<dt id="dynamicGetter">
<span class="returntype">dynamic</span>
<span class="name">dynamicGetter</span>
</dt>
<dd>
<div>
<span class="has-it getter">read</span>
<span class=" setter">write</span>
</div>
</dd>
</dl>
</section>
<section class="summary" id="constants">
<h4>Constants</h4>
<dl class="withreturntypes">
<dt id="CUSTOM_CLASS">
<span class="returntype"><a href="fake/ConstantClass.html">ConstantClass</a></span>
<span class="name">CUSTOM_CLASS</span>
=
<span class="constant-value">const ConstantClass('custom')</span>
</dt>
<dd>
</dd>
<dt id="UP">
<span class="returntype">String</span>
<span class="name">UP</span>
=
<span class="constant-value">'up'</span>
</dt>
<dd>
Up is a direction.
</dd>
<dt id="DOWN">
<span class="returntype">dynamic</span>
<span class="name">DOWN</span>
=
<span class="constant-value">'down'</span>
</dt>
<dd>
Dynamic-typed down.
</dd>
<dt id="ZERO">
<span class="returntype">int</span>
<span class="name">ZERO</span>
=
<span class="constant-value">0</span>
</dt>
<dd>
A constant integer value,
which is a bit redundant.
</dd>
<dt id="PI">
<span class="returntype">double</span>
<span class="name">PI</span>
=
<span class="constant-value">3.14159</span>
</dt>
<dd>
Constant property.
</dd>
</dl>
</section>
<section class="summary" id="functions">
<h4>Functions</h4>
<dl class="withreturntypes">
<dt id="topLevelFunction">
<span class="returntype">String</span>
<span class="name-and-params">
<a href="fake/topLevelFunction.html"><span class="name">topLevelFunction</span></a>(<span class="type-annotation">int</span> <span class="parameter-name">param1</span>, <span class="type-annotation">bool</span> <span class="parameter-name">param2</span>, <span class="type-annotation"><a href="fake/Cool.html">Cool</a></span> <span class="parameter-name">coolBeans</span>, [<span class="type-annotation">double</span> <span class="parameter-name">optionalPositional</span>= <span class="default-value">0.0</span>])
</span>
</dt>
<dd>
Top-level function 3 params and 1 optional positional param.
</dd>
<dt id="onlyPositionalWithNoDefaultNoType">
<span class="returntype">void</span>
<span class="name-and-params">
<a href="fake/onlyPositionalWithNoDefaultNoType.html"><span class="name">onlyPositionalWithNoDefaultNoType</span></a>([<span class="type-annotation">dynamic</span> <span class="parameter-name">anything</span>])
</span>
</dt>
<dd>
A single optional positional param, no type annotation, no default value.
</dd>
<dt id="soIntense">
<span class="returntype">void</span>
<span class="name-and-params">
<a href="fake/soIntense.html"><span class="name">soIntense</span></a>(<span class="type-annotation">dynamic</span> <span class="parameter-name">anything</span>, {<span class="type-annotation">bool</span> <span class="parameter-name">flag</span>: <span class="default-value">true</span>, <span class="type-annotation">int</span> <span class="parameter-name">value</span>})
</span>
</dt>
<dd>
Top-level function with 1 param and 2 optional named params, 1 with a
default value.
</dd>
<dt id="paramFromAnotherLib">
<span class="returntype">void</span>
<span class="name-and-params">
<a href="fake/paramFromAnotherLib.html"><span class="name">paramFromAnotherLib</span></a>(<span class="type-annotation"><a href="ex/Apple.html">Apple</a></span> <span class="parameter-name">thing</span>)
</span>
</dt>
<dd>
A comes from another library.
</dd>
<dt id="thisIsAsync">
<span class="returntype">Future</span>
<span class="name-and-params">
<a href="fake/thisIsAsync.html"><span class="name">thisIsAsync</span></a>()
</span>
</dt>
<dd>
An async function. It should look like I return a Future.
</dd>
<dt id="thisIsAlsoAsync">
<span class="returntype">Future</span>
<span class="name-and-params">
<a href="fake/thisIsAlsoAsync.html"><span class="name">thisIsAlsoAsync</span></a>()
</span>
</dt>
<dd>
Explicitly returns a Future and is marked async.
</dd>
</dl>
</section>
<section class="summary" id="exceptions">
<h4>Exceptions/Errors</h4>
<dl class="dl-horizontal">
<dt id="Oops">
<a href="fake/Oops.html">Oops</a>
</dt>
<dd>
My bad!
</dd>
<dt id="Doh">
<a href="fake/Doh.html">Doh</a>
</dt>
<dd>
Also, my bad.
</dd>
</dl>
</section>
</div> <!-- container -->
</div> <!-- wsk-layout__content" -->
<footer class="wsk-mini-footer">
<div class="wsk-mini-footer--left-section">
<div class="wsk-logo">
Dart API docs
</div>
<ul class="wsk-mini-footer--link-list">
<li><a href="#">Privacy & Terms</a></li>
</ul>
</div>
<div class="wsk-mini-footer--right-section">
<button class="wsk-mini-footer--social-btn"></button>
<button class="wsk-mini-footer--social-btn"></button>
<button class="wsk-mini-footer--social-btn"></button>
</div>
</footer>
</div> <!-- wek-layout -->
<script src="js/material.js"></script>
</body>
</html>
I am not sure it is a goal of this library to provide these elements from the original wsk, but they were useful. Are there any plans?
https://developers.google.com/web/fundamentals/resources/styleguide/index
Editorial header
Highlights
Article section
Guides section
etc etc...
Open-question. This was requested by an early user this week and wasn't something included in the refactor. I guess we could spit out fairly independent:
if we moved to a model with:
/dist
----/css/material.min.js
----/js/material.min.js
----/individual/button/
----/individual/spinner/
etc.
However, I'm not sure how desirable that is. @google/material-styleguide any thoughts?
Per discussion:
images
directoryimages
, but it will use the global images one instead.While reading https://github.com/google/material-design-lite/tree/master/src/layout it would be helpful to link over to column-layout. They seem like related concepts.
For example, after I'm done putting my header/nav together, I want to know how to layout my body/content. I especially want to know how to keep my body centered on the desktop, with a max width, and have it gracefully adapt to mobile.
Curious, as we're evaluating using it in an open source project.
The README on https://github.com/google/material-design-lite/tree/master/src/layout doesn't mention the super cool wsk-js-layout
class, which makes the header collapse when scrolled.
Just tying out MDL. Really excited!
The anchor tag doesn't seem to be styled by default. Should it be? I would expect something like white, by default.
Check out this screenshot, and notice that the world Hello is purple.
The source:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Dartdoc</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&lang=en' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/material.min.css">
</head>
<body>
<div class="wsk-layout">
<div class="wsk-layout__header wsk-layout__header--tall">
<!-- Title -->
<span class="wsk-layout-title">Web Starter Kit</span>
<!-- Add spacer, to align navigation to the right -->
<div class="wsk-layout-spacer"></div>
<!-- Navigation -->
<nav class="wsk-layout-navigation">
<a class="wsk-layout-navigation-link" href="">Hello</a>
</nav>
</div>
<div class="wsk-layout__drawer">
<span class="wsk-layout-title">Web Starter Kit</span>
<nav class="wsk-layout-navigation">
<a class="wsk-layout-navigation-link" href="">Hello</a>
</nav>
</div>
<div class="wsk-layout__content">
Cool
</div>
</div>
<script src="js/material.min.js"></script>
</body>
</html>
Expected: page scrolls
Actual: page does not scroll
(if you put your cursor into main content, below the header, and try to scroll, it works)
@devnook has been kind enough to explore this project, which we'll land in a new repo.
Just posting an issue here for us to cross-reference :)
New issue from #36 so that we can track creating the tool over in this one :)
Here's what Sergio will be prototyping:
- Generating a
material.min.css.template
file as part of our build process, and offering this as a base file in the repo (just like we do formaterial.min.css
and friends).- Writing client-side JS code that takes the template file and produces a
material.min.css
file with the user's chosen palettes.- Creating a small page that does the above generation and previews it.
- Making it available in our github.io page somewhere, and linking to it from the README.
If this works, the user flow would thus just be "go to site, choose colours, get customisedmaterial.min.css
".
Assume my system doesn't use Sass and I can't use the awesome SCSS capabilities for coloring. How do I, in the best and most efficient way, color and theme my page?
For example, assume I'm using wsk-layout (header, content, etc). What's the best way to change all the colors?
thanks!
Right now the page is flickering when clicking on links in the examples. href="#"
may solve that.
For the layout/demo.html file, I'd love to see an example/demo of header/side-panel technique from http://www.google.com/design/spec/style/typography.html#
(I assume that http://www.google.com/design/spec/style/typography.html# is a "best practice" :)
Check out layout/demo.html
Scroll down to the multi-row layout example.
View the source.
See a mention of the wsk-layout__container
class.
Go to https://github.com/google/material-design-lite/tree/master/src/layout
Expected: a mention of wsk-layout__container
Actual: no mention of wsk-layout__container
Not sure what wsk-layout__container
is or when I'd want to use it. Can we add to the README in src/layout?
Thanks!
This involves all wsk-
instances becoming mdl-
ones and all WSK
constants becoming MDL
.
Programmatic changes to components don't trigger events, so we need a way of letting objects know their properties have been changed.
Since object observers are infeasible to use on every component, we should have a method that the developer can call after making changes to a component (e.g., disabling it) to make sure its state is consistent.
We may also want to add methods for programmatically doing all of the most common tasks (disabling, toggling, etc.) and update the object, so that the user doesn't need to do direct DOM manipulation.
gulp
fails with Error: Module did not self-register
under node v0.12.
This is probably due to sass/node-sass#653, which will be resolved in node-sass
v2.0.0.
I know we are using the polyfill, but what is the reason for not using the proper requestAnimationFrame name? It is forcing me to include the requestAnim polyfill (specifically because I am including ripple.js) and it is not clear that there is this mandatory a dependency (in my project it is unneeded)
From @PaulKinlan
Maybe this on purpose (I'm still new to MD and MDL) but notice the differences in shadow sizes between the MD site's header and a header from WSK/MDL:
(official site on the right, MDL on the left)
MDL: box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 1.5px 0px, rgba(0, 0, 0, 0.239216) 0px 1px 1px 0px;
Official MD site: box-shadow: rgba(0, 0, 0, 0.258824) 0px 2px 5px 0px;
(Official MD site example page http://www.google.com/design/spec/style/typography.html#)
We are currently waiting on the Material icon font. As this hasn't been created yet, we either need to include a community created icon font and substitute for now or switch to using SVGs.
I would favor using a community icon font and updating our components. It would make switching to an official one easier later on. Any thoughts?
Current advice from the Material team:
- the keylines should still be used. desktop keylines are 24 and 80 from the edge of the screen and/or container.
- gutters and margins between content or containers can be 4, 8, 16, 24, 40
- We're still defining a responsive page layout system, but... it's complicated, and we're still refining breakpoints, testing different grid strategies across a variety of layouts. There will be a responsive layout section that will eventually get added to spec once we feel that the rules we're defining work well.
As 3. is important for us and the ETAs are not yet defined, one option is to research what breakpoints other Google domains have opted for and review if they make sense as a stop-gap for our own recommendations.
Also completely open to suggestions for alternative approaches to deciding our breakpoint strategy.
Make the default behavior for the layout component on desktop with .wsk-layout--fixed-drawer match the main material spec site where:
This will essentially match the experience currently found on mobile.
The layout demos/examples use words (hello, world). I'd love to see an example that uses icons/images.
Similar to the Search field, but more icons in a row.
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.