Skip to content

Commit a9da925

Browse files
appsforartiststraviskaufman
authored andcommitted
docs(getting-started): Fix typos (google#4936)
1 parent f1c3db7 commit a9da925

File tree

1 file changed

+14
-16
lines changed

1 file changed

+14
-16
lines changed

docs/getting-started.md

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ This guide will help you get started using MDLv2 on your own sites and within yo
88
> If you are interested in integrating MDLv2 into a framework, or building a component library for
99
your framework that wraps MDLv2, check out our [framework integration guide](./integrating-into-frameworks.md).
1010

11-
## MDL Quickstart: Building a simple greeting app
11+
## MDL Quick Start: Building a simple greeting app
1212

1313
The best way to learn any new technology is to get your hands dirty and build something with it, so
1414
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
2424
[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
2525
tool like [nvm](https://github.com/creationix/nvm) to install it.
2626

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.
2828

2929
```
3030
mkdir greeting-app
@@ -48,7 +48,7 @@ will be available on your path.
4848

4949
### Creating the skeleton index.html file
5050

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
5252
the assets needed for MDLv2. Put the following within `index.html` in the `greeting-app` directory:
5353

5454
```html
@@ -75,28 +75,27 @@ the duration of this guide.
7575

7676
Let's take a look at a few aspects of the above HTML.
7777

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.
8383
* **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
8685
complex applications.
8786
* **Elements are not natively styled** - Notice how above, we give the `<html>` element a class of
8887
`mdl-typography`, the `<h1>` element a class of `mdl-typography--display1`, and the button a class
8988
of `mdl-button`, along with multiple _modifier classes_. We _never_ make any assumptions about
9089
which elements are being used for our components, instead relying on CSS classes for maximum
9190
flexibility. Our CSS class names follow a slightly modified version of the [BEM](http://getbem.com/) system.
9291

93-
### Adding in javascript for dynamic components
92+
### Adding in JavaScript for dynamic components
9493

9594
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
9897
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.
10099

101100
> Note that we currently have an [issue out](https://github.com/google/material-design-lite/issues/4614) to integrate ripples directly into buttons.
102101
@@ -146,8 +145,7 @@ Replace the contents of the `<body>` tag in `index.html` with the following:
146145
```
147146

148147
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
151149
what we just wrote.
152150

153151
The two main things to notice are the `data-mdl-auto-init` attributes, as well as the final script

0 commit comments

Comments
 (0)