Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove trailing whitespace from all pages. #313

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 7 additions & 7 deletions CONTRIBUTING.md
@@ -1,6 +1,6 @@
---
title: Contributing
customFields:
customFields:
-
key: "is_chapter"
value: 0
Expand Down Expand Up @@ -38,7 +38,7 @@ you are probably familiar with the frustrating feeling of putting a useful tip
out there, and then wondering if it's actually making its way to the people who
need it, and what to do with that old post years and versions down the road.
You're invited to share that energy to help us bring that ecosystem together
and grow it further!
and grow it further!

If you've ever helped anyone, colleague or stranger, with a particular problem,
then you know the value of having a reference you can quickly link to that says
Expand Down Expand Up @@ -71,7 +71,7 @@ controls most of the layout for all of our sites, and there is a [child
theme](https://github.com/jquery/jquery-wp-content/tree/master/themes/learn.jquery.com)
that controls the templates and styles specific to the learn site.

[`jquery-wp-content`](http://github.com/jquery/jquery-wp-content) powers our sites in
[`jquery-wp-content`](http://github.com/jquery/jquery-wp-content) powers our sites in
production and staging environments, and can set up for local development relatively easily.

### Build
Expand All @@ -80,7 +80,7 @@ The static content in the `page` directory is deployed to a
[`jquery-wp-content`](http://github.com/jquery/jquery-wp-content) instance
using [grunt](http://gruntjs.com), specifically with two grunt plugins we've created:

* [grunt-jquery-content](http://github.com/jquery/grunt-jquery-content) - pre-processes content in a variety of formats (HTML, Markdown, XML) into HTML, applying syntax highlighting and some simple partial support, preparing it for processing by
* [grunt-jquery-content](http://github.com/jquery/grunt-jquery-content) - pre-processes content in a variety of formats (HTML, Markdown, XML) into HTML, applying syntax highlighting and some simple partial support, preparing it for processing by
* [grunt-wordpress](http://github.com/scottgonzalez/grunt-wordpress) - syncs static content to WordPress using [XML-RPC](http://codex.wordpress.org/XML-RPC_Support)


Expand Down Expand Up @@ -129,7 +129,7 @@ Once you've gotten your environment working, here are the general steps you shou

1. Create a new "feature" branch based on `master` -- `git branch <feature/issue name/number>`
2. Move onto that branch -- `git checkout <feature/issue name/number>`
3. Work on your awesome contribution.
3. Work on your awesome contribution.
4. As you work and want to preview your changes, use `grunt` to deploy them to the your site. You can also use `grunt watch` to have the site monitor the `page` directory for any changes and automatically have the changes deployed every time you save.
5. When you're done, stage the new/modified preparation for commit -- `git add page/faq/how-do-i-add-a-new-article-to-the-learn-site.md`
6. Commit the files to your local repo -- `git commit -m "add a relevant message describing the change"`
Expand All @@ -142,10 +142,10 @@ Requests](http://contribute.jquery.org/commits-and-pull-requests/) guide.

### Adding A New Article

1. Add the file to the right folder in the page folder.
1. Add the file to the right folder in the page folder.
2. Add the slug name (the filename without the extension) to the desired location `order.yml`
3. Run `grunt`
4. You should now be able to navigate to the file.
4. You should now be able to navigate to the file.

### Formatting Articles

Expand Down
2 changes: 1 addition & 1 deletion page/events/event-basics.md
Expand Up @@ -25,7 +25,7 @@ multiple events and handlers.
```
// Event setup using a convenience method
$( "p" ).click(function() {
console.log( "You clicked a paragraph!" );
console.log( "You clicked a paragraph!" );
});
```

Expand Down
2 changes: 1 addition & 1 deletion page/events/history-of-events.md
Expand Up @@ -8,7 +8,7 @@ Given the following HTML, for our example we want to log the text of the each `<

```
<div id="container">
<ul id="list">
<ul id="list">
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
Expand Down
42 changes: 21 additions & 21 deletions page/jquery-mobile/getting-started.md
Expand Up @@ -7,23 +7,23 @@ jQuery Mobile provides a set of touch-friendly UI widgets and an AJAX-powered na

## Create a basic page template

To get started, you can simply paste the template below in your favorite text editor, save and open the document in a browser.
To get started, you can simply paste the template below in your favorite text editor, save and open the document in a browser.

In the `head` of this template, a meta `viewport` tag sets the screen width to the pixel width of the device. References to jQuery, jQuery Mobile and the mobile theme stylesheet from the CDN add all the styles and scripts. jQuery Mobile 1.2 (1.2.0) works with versions of jQuery core from 1.7.0 to 1.8.2.
In the `head` of this template, a meta `viewport` tag sets the screen width to the pixel width of the device. References to jQuery, jQuery Mobile and the mobile theme stylesheet from the CDN add all the styles and scripts. jQuery Mobile 1.2 (1.2.0) works with versions of jQuery core from 1.7.0 to 1.8.2.

In the `body`, a div with a `data-role` of `page` is the wrapper used to delineate a page. A header bar (`data-role="header"`), a content region (`data-role="content"`) and a footer bar (`data-role="footer"`) are added inside to create a basic page (all three are optional). These `data-` attributes are HTML5 attributes used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget.
In the `body`, a div with a `data-role` of `page` is the wrapper used to delineate a page. A header bar (`data-role="header"`), a content region (`data-role="content"`) and a footer bar (`data-role="footer"`) are added inside to create a basic page (all three are optional). These `data-` attributes are HTML5 attributes used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget.

```
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
</head>
<body>

<div data-role="page">
<div data-role="header">
Expand All @@ -47,11 +47,11 @@ In the `body`, a div with a `data-role` of `page` is the wrapper used to delinea

### Add content

The next step is to add content inside the content container. Any standard HTML elements - headings, lists, paragraphs, etc can be added. You can write your own custom styles to create custom layouts by adding an additional stylesheet to the `head` after the jQuery Mobile stylesheet.
The next step is to add content inside the content container. Any standard HTML elements - headings, lists, paragraphs, etc can be added. You can write your own custom styles to create custom layouts by adding an additional stylesheet to the `head` after the jQuery Mobile stylesheet.

### Make a listview

jQuery Mobile includes a diverse set of common listviews that are coded as lists with a `data-role="listview"` added. Here is a simple linked list that has a role of `listview`. The `data-inset="true"` attribute makes the listview look like an inset module, while `data-filter="true"` adds a dynamic search filter.
jQuery Mobile includes a diverse set of common listviews that are coded as lists with a `data-role="listview"` added. Here is a simple linked list that has a role of `listview`. The `data-inset="true"` attribute makes the listview look like an inset module, while `data-filter="true"` adds a dynamic search filter.

```
<ul data-role="listview" data-inset="true" data-filter="true">
Expand All @@ -62,10 +62,10 @@ jQuery Mobile includes a diverse set of common listviews that are coded as lists
<li><a href="#">Ferrari</a></li>
</ul>
```

### Add a slider

The framework contains a full set of form elements that automatically are enhanced into touch-friendly styled widgets. Here's a slider made with the new HTML5 input type of range, no `data-role` needed. All form elements must always be properly associated with a `label` and the group of form elements be wrapped in a `form` tag.
The framework contains a full set of form elements that automatically are enhanced into touch-friendly styled widgets. Here's a slider made with the new HTML5 input type of range, no `data-role` needed. All form elements must always be properly associated with a `label` and the group of form elements be wrapped in a `form` tag.

```
<form>
Expand All @@ -76,28 +76,28 @@ The framework contains a full set of form elements that automatically are enhanc

### Make a button

There are a few ways to make buttons. A common one is to turn a link into a button so it's easy to click. Just start with a link and add a `data-role="button"` attribute to it. You can add an icon with the `data-icon` attribute and optionally set its position with the `data-iconpos` attribute.
There are a few ways to make buttons. A common one is to turn a link into a button so it's easy to click. Just start with a link and add a `data-role="button"` attribute to it. You can add an icon with the `data-icon` attribute and optionally set its position with the `data-iconpos` attribute.

```
<a href="#" data-role="button" data-icon="star">Star button</a>
```

### Choose a theme swatch

jQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content and button colors, called a "swatch". You can add a `data-theme="e"` attribute to any of the widgets on this page: page, header, list, input for the slider, or button to turn it yellow. Different swatch letters in default theme from a-e can be used to mix and match swatches.
jQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content and button colors, called a "swatch". You can add a `data-theme="e"` attribute to any of the widgets on this page: page, header, list, input for the slider, or button to turn it yellow. Different swatch letters in default theme from a-e can be used to mix and match swatches.

If you add the theme swatch to the page, all the widgets inside the content will automatically inherit the theme (headers and footers don't inherit and default to swatch "a").

```
<a href="#" data-role="button" data-icon="star" data-theme="a">Button</a>
```

If you would like to create a custom theme, you can use [ThemeRoller](http://jquerymobile.com/themeroller/) that allows users to create their own theme through an easy to use drag and drop interface. You will then be able to download and use your newly created theme.
If you would like to create a custom theme, you can use [ThemeRoller](http://jquerymobile.com/themeroller/) that allows users to create their own theme through an easy to use drag and drop interface. You will then be able to download and use your newly created theme.

### Go forth and build something
### Go forth and build something

This guide has provided you with a basic structure for a jQuery Mobile page and a few enhanced elements. You can explore the full [jQuery Mobile documentation](http://jquerymobile.com/demos/1.2.0/) to learn about linking pages, adding animated page transitions, and creating dialogs and popups.
This guide has provided you with a basic structure for a jQuery Mobile page and a few enhanced elements. You can explore the full [jQuery Mobile documentation](http://jquerymobile.com/demos/1.2.0/) to learn about linking pages, adding animated page transitions, and creating dialogs and popups.

If you're more of the type who prefers actually writing JavaScript to build your apps, and you don't want to use the `data-` attribute configuration system, you can take full control of everything and call plugins directly as these are all standard jQuery plugins built with the UI widget factory. Particularly useful information for such cases can be found in the global configuration, events, and methods sections.
If you're more of the type who prefers actually writing JavaScript to build your apps, and you don't want to use the `data-` attribute configuration system, you can take full control of everything and call plugins directly as these are all standard jQuery plugins built with the UI widget factory. Particularly useful information for such cases can be found in the global configuration, events, and methods sections.

Finally, you can read up on scripting pages, generating dynamic pages, and building PhoneGap apps.
Finally, you can read up on scripting pages, generating dynamic pages, and building PhoneGap apps.