You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/getting-started.md
+14-16Lines changed: 14 additions & 16 deletions
Original file line number
Diff line number
Diff line change
@@ -8,7 +8,7 @@ This guide will help you get started using MDLv2 on your own sites and within yo
8
8
> If you are interested in integrating MDLv2 into a framework, or building a component library for
9
9
your framework that wraps MDLv2, check out our [framework integration guide](./integrating-into-frameworks.md).
10
10
11
-
## MDL Quickstart: Building a simple greeting app
11
+
## MDL Quick Start: Building a simple greeting app
12
12
13
13
The best way to learn any new technology is to get your hands dirty and build something with it, so
14
14
that's what we'll do here! We'll be building a simple web page which lets you enter a first and/or
@@ -24,7 +24,7 @@ First, let's set up our project. Throughout this guide, we'll assume you have a
24
24
[NodeJS](https://nodejs.org/en/) and [npm](https://www.npmjs.com/) available on your `$PATH`. You can get the latest NodeJS download [here](https://nodejs.org/en/download/), or use a
25
25
tool like [nvm](https://github.com/creationix/nvm) to install it.
26
26
27
-
Once node is installed, create a directory for the site and install MDLv2 inside of it.
27
+
Once node is installed, create a directory for the site, and install MDLv2 inside of it.
28
28
29
29
```
30
30
mkdir greeting-app
@@ -48,7 +48,7 @@ will be available on your path.
48
48
49
49
### Creating the skeleton index.html file
50
50
51
-
Now that we have a sane environment set up, let's create a simple `index.html` file and include
51
+
Now that we have a sane environment set up, let's create a simple `index.html` file, and include
52
52
the assets needed for MDLv2. Put the following within `index.html` in the `greeting-app` directory:
53
53
54
54
```html
@@ -75,28 +75,27 @@ the duration of this guide.
75
75
76
76
Let's take a look at a few aspects of the above HTML.
77
77
78
-
***No javascript necessary (yet)** - Because we aren't using any dynamic components, we only need
79
-
to include the MDLv2 CSS so that we can apply the proper CSS classes to our elements. With MDLv2,
80
-
javascript is only necessary for dynamic components whose UI needs to be made aware of events
81
-
happening on the page which can't be hooked into using CSS. As we develop our greeting app, we'll
82
-
add in the necessary javascript.
78
+
***No JavaScript necessary (yet)** - Because we aren't using any dynamic components, we only need
79
+
to include the MDLv2 CSS, so that we can apply the proper CSS classes to our elements. With MDLv2,
80
+
JavaScript is only necessary for dynamic components whose UI needs to be made aware of events
81
+
happening on the page. As we develop our greeting app, we'll
82
+
add in the necessary JavaScript.
83
83
***No automatic DOM rendering** - For all components, MDL does not render _any_ DOM elements
84
-
itself. MDLv2 is similar to [Bootsrap](http://getbootstrap.com/) in this respect; it expects rhe end user to render the DOM
85
-
and provide the proper CSS classes. This avoids a litany of problems for integrating MDL into
84
+
itself. MDLv2 is similar to [Bootstrap](http://getbootstrap.com/) in this respect; it expects you to render the DOM using the proper CSS classes. This avoids a litany of problems for integrating MDL into
86
85
complex applications.
87
86
***Elements are not natively styled** - Notice how above, we give the `<html>` element a class of
88
87
`mdl-typography`, the `<h1>` element a class of `mdl-typography--display1`, and the button a class
89
88
of `mdl-button`, along with multiple _modifier classes_. We _never_ make any assumptions about
90
89
which elements are being used for our components, instead relying on CSS classes for maximum
91
90
flexibility. Our CSS class names follow a slightly modified version of the [BEM](http://getbem.com/) system.
92
91
93
-
### Adding in javascript for dynamic components
92
+
### Adding in JavaScript for dynamic components
94
93
95
94
Now that we've gotten the gist of MDLv2, let's build our greeting app. The app consists of
96
-
two input fields for a first and last name, as well as a submit button. Because Material Design
97
-
text input fields contain a lot of functionality, we must include javascript to provide a
95
+
two input fields (for first and last name) and a submit button. Because Material Design
96
+
text input fields contain a lot of functionality, we must include JavaScript to provide a
98
97
full-fidelity experience for them. Furthermore, it would be nice if our submit button featured a
99
-
ripple effect. We can include that using javascript as well.
98
+
ripple effect. We can include that using JavaScript as well.
100
99
101
100
> Note that we currently have an [issue out](https://github.com/google/material-design-lite/issues/4614) to integrate ripples directly into buttons.
102
101
@@ -146,8 +145,7 @@ Replace the contents of the `<body>` tag in `index.html` with the following:
146
145
```
147
146
148
147
If you save the file return to your browser, you'll now see that we have two very nicely styled
149
-
form fields, as well as a button that - when pressed - displays a material ink ripple, albeit a
150
-
very subtle one. We'll be taking care of that shortly. For now, let's go back and take a look at
148
+
form fields, as well as a button that - when pressed - displays a material ink ripple. The ripple is a bit subtle though - we'll address that shortly. For now, let's go back and take a look at
151
149
what we just wrote.
152
150
153
151
The two main things to notice are the `data-mdl-auto-init` attributes, as well as the final script
0 commit comments