From 2c98db3725aae5574ef74c359a47bc60346c8df7 Mon Sep 17 00:00:00 2001 From: Markus Amalthea Magnuson Date: Wed, 10 Apr 2013 15:37:49 +0200 Subject: [PATCH 1/3] Style fixes to the jQuery Mobile section. Code changes: * Spaces to tabs. * Lower-case doctype tag. * Always use self-closing HTML elements. * Fix incorrect "/header" comment. --- page/jquery-mobile/getting-started.md | 65 +++++++++++++-------------- page/jquery-mobile/theme-roller.md | 18 ++++---- 2 files changed, 40 insertions(+), 43 deletions(-) diff --git a/page/jquery-mobile/getting-started.md b/page/jquery-mobile/getting-started.md index 1f86c2ee..d9414ad8 100644 --- a/page/jquery-mobile/getting-started.md +++ b/page/jquery-mobile/getting-started.md @@ -14,33 +14,32 @@ In the `head` of this template, a meta `viewport` tag sets the screen width to t 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. ``` - + - - My Page - - - - - - - -

My Title

- -

Hello world

- -

My Footer

- -

- - + + My Page + + + + + + +

+ +

My Title

+ +

Hello world

+ +

My Footer

+ +

+ ``` @@ -55,11 +54,11 @@ jQuery Mobile includes a diverse set of common listviews that are coded as lists ```

``` @@ -69,8 +68,8 @@ The framework contains a full set of form elements that automatically are enhanc ``` ``` diff --git a/page/jquery-mobile/theme-roller.md b/page/jquery-mobile/theme-roller.md index eeeab4f0..a857218c 100644 --- a/page/jquery-mobile/theme-roller.md +++ b/page/jquery-mobile/theme-roller.md @@ -57,18 +57,16 @@ The theme gets downloaded on your local machine as a zip file. This contains an To start using your theme, you can either start from the provided `index.html` or start from scratch. As explained in the theme download popup window, all you need is to add your theme to the head of your page before the jquery.mobile.structure file, like this: ``` - + - - jQuery Mobile page - - - - - - - + jQuery Mobile page + + + + + + ``` From d5992f0344d913fdd59383e273d2def1824b9744 Mon Sep 17 00:00:00 2001 From: Markus Amalthea Magnuson Date: Wed, 10 Apr 2013 15:41:36 +0200 Subject: [PATCH 2/3] Style fixes to the jQuery Mobile section. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Style fixes: * Oxford commas. * Title case headers. * `` instead of `tagname` for inline HTML code. * A few word reshuffles for sentence clarity. * Double instead of single quotes in body text. * …various bits and pieces. --- page/jquery-mobile.md | 3 +- page/jquery-mobile/getting-started.md | 27 ++++++++--------- page/jquery-mobile/theme-roller.md | 43 +++++++++++++-------------- 3 files changed, 35 insertions(+), 38 deletions(-) diff --git a/page/jquery-mobile.md b/page/jquery-mobile.md index 8c2877bd..f30e102e 100644 --- a/page/jquery-mobile.md +++ b/page/jquery-mobile.md @@ -6,5 +6,4 @@ customFields: value: "th-large" --- -jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet and desktop devices. This frameworks provides a set of touch-friendly UI widgets and an AJAX-powered navigation system to support animated page transitions. - +jQuery Mobile is the easiest way to build sites and apps that are accessible on all popular smartphone, tablet, and desktop devices. This framework provides a set of touch-friendly UI widgets and an AJAX-powered navigation system to support animated page transitions. diff --git a/page/jquery-mobile/getting-started.md b/page/jquery-mobile/getting-started.md index d9414ad8..cc215440 100644 --- a/page/jquery-mobile/getting-started.md +++ b/page/jquery-mobile/getting-started.md @@ -5,13 +5,13 @@ level: Beginner jQuery Mobile provides a set of touch-friendly UI widgets and an AJAX-powered navigation system to support animated page transitions. This guide will show you how you can build your first jQuery Mobile application. -## Create a basic page template +## 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 `` 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 ``, 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. ``` @@ -43,12 +43,11 @@ In the `body`, a div with a `data-role` of `page` is the wrapper used to delinea ``` +### Add Content -### 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 `` 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 +### 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. @@ -62,9 +61,9 @@ jQuery Mobile includes a diverse set of common listviews that are coded as lists ``` -### Add a slider +### 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 are automatically 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 `` and the group of form elements be wrapped in a ` ``` -### Make a button +### 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. @@ -81,9 +80,9 @@ There are a few ways to make buttons. A common one is to turn a link into a butt Star button ``` -### Choose a theme swatch +### 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 from a-e in the default theme 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"). @@ -93,7 +92,7 @@ If you add the theme swatch to the page, all the widgets inside the content will 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. diff --git a/page/jquery-mobile/theme-roller.md b/page/jquery-mobile/theme-roller.md index a857218c..e4f23e1c 100644 --- a/page/jquery-mobile/theme-roller.md +++ b/page/jquery-mobile/theme-roller.md @@ -1,29 +1,29 @@ --- -title: Creating a custom theme with ThemeRoller +title: Creating a Custom Theme with ThemeRoller level: Beginner --- ## Theming Overview -jQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content and button colors, called a "swatch". The framework comes with five defined themes (swatches 'a' to 'e') which can be used readily, removed or overwritten. +jQuery Mobile has a robust theme framework that supports up to 26 sets of toolbar, content, and button colors, called a "swatch". The framework comes with five defined themes (swatches "a" to "e") which can be used readily, removed, or overwritten. -### Default theme swatch mapping for components +### Default Theme Swatch Mapping for Components -If no theme swatch letter is set at all, the framework uses the 'a' swatch (black in the default theme) for headers and footers and the 'c' swatch (light gray in the default theme) for the page content to maximize contrast between the both. +If no theme swatch letter is set at all, the framework uses the "a" swatch (black in the default theme) for headers and footers and the "c" swatch (light gray in the default theme) for the page content to maximize contrast between the both. -All items in containers inherit the swatch from their parent. Exceptions to this rule are the listdivider in listviews, the header of nested list pages, and the button of split button lists, which all default to 'b' (blue in the default theme). Count bubbles default to 'c' (silver in the default theme). +All items in containers inherit the swatch from their parent. Exceptions to this rule are the listdivider in listviews, the header of nested list pages, and the button of split button lists, which all default to "b" (blue in the default theme). Count bubbles default to "c" (silver in the default theme). -Note that there is also a swatch named "active" (bright blue in the default theme) which is used to indicate an active selected item. See the Global "Active" state further down this page for further information on the active swatch. +Note that there is also a swatch named "active" (bright blue in the default theme) which is used to indicate an active selected item. See the global "Active" state further down this page for more information on the active swatch. -The page loading dialog and error message don't inherit a swatch theme. The loading dialog defaults to swatch 'a' (black in the default theme) and the error message to swatch 'e' (yellow in the default theme). You can configure those defaults globally. +The page loading dialog and error message don't inherit a swatch theme. The loading dialog defaults to swatch "a" (black in the default theme) and the error message to swatch "e" (yellow in the default theme). You can configure those defaults globally. -### Themes and swatches +### Themes and Swatches The theme system separates color and texture from structural styles that define things like padding and dimensions. This allows theme colors and textures to be defined once in the stylesheet and to be mixed, matched, and combined to achieve a wide range of visual effects. Each theme includes several global settings, including font family, drop shadows for overlays, and corner radius values for buttons and boxes. In addition, the theme can include multiple color swatches, each with color values for bars, content blocks, buttons and list items, and font text-shadow. -The default theme includes 5 swatches that are given letters (a, b, c, d, e) for quick reference. To make mapping of color swatches consistent across our widgets, we have followed the convention that swatch 'a' is the highest level of visual priority (black in our default theme), 'b' is secondary level (blue) and 'c' is the baseline level (gray) that we use by default in many situations, 'd' for an alternate secondary level and 'e' as an accent swatch. Themes may have additional swatches for accent colors or specific situations. For example, you could add a new theme swatch 'f' that has a red bar and button for use in error situations. +The default theme includes five swatches that are given letters (a, b, c, d, e) for quick reference. To make mapping of color swatches consistent across our widgets, we have followed the convention that swatch "a" is the highest level of visual priority (black in our default theme), "b" is secondary level (blue), "c" is the baseline level (gray) that we use by default in many situations, "d" for an alternate secondary level, and "e" as an accent swatch. Themes may have additional swatches for accent colors or specific situations. For example, you could add a new theme swatch "f" that has a red bar and button for use in error situations. Most theme changes can be done using ThemeRoller, but it is also fairly simple to manually edit the base swatches in the default theme and/or add additional swatches by editing the theme CSS file. Just copy a block of swatch styles, rename the classes with the new swatch letter name, and tweak colors as you see fit. @@ -31,30 +31,29 @@ Most theme changes can be done using ThemeRoller, but it is also fairly simple t ![picture Theme Roller Logo](/resources/jquery-mobile/themeroller-mobile-logo.png "Theme Roller") -The easiest way to create custom themes is with the ThemeRoller tool. It allows you to build a theme composed of up to 26 swatches, download a the newly created CSS file, and use it in your project. +The easiest way to create custom themes is with the ThemeRoller tool. It allows you to build a theme composed of up to 26 swatches, download the newly created CSS file, and use it in your project. +### Creating the Theme Swatches -### Creating the Theme swatches +The [ThemeRoller](http://jquerymobile.com/themeroller/) allows users to create their own theme through an easy to use drag and drop interface. By default, ThemeRoller offers three swatches (a, b and c). You can use the offered default colors, the Adobe kuler colors, or create your own. You will create your theme by dragging the chosen color onto the chosen element in the swatch of your choice. You can add more swatches by pressing the "+" sign near the "A", "B", and "C" tabs, in the left-hand side menu. -The [ThemeRoller](http://jquerymobile.com/themeroller/) allows users to create their own theme through an easy to use drag and drop interface. By default, ThemeRoller offers three swatches (a, b and c). You can use the offered default colors, the Adobe kuler colors, or create your own. You will create your theme by dragging the chosen color onto the chosen element in the swatch of your choice. You can add more swatches by pressing the '+' sign near the 'A', 'B', and 'C' tabs, in the left hand-side menu. +You can further edit your swatch from the menu. For example, you can expand the various element parts and carry out detailed editing. This will allow you to change text color, text shadow size, position and color, etc. You can also edit the gradient used on each element. -You can further edit your swatch from the menu. For example, you can expand the various element parts and carry out detailed editing. For example, this will allow you to text color, text shadow size, position and color, etc. You can also edit the gradient used on each element. +Here are two examples of theme swatches created, one with the default colors, and one with the kuler colors: -Here are two examples of theme swatches created, the first one with the default colors and with the kuler colors: +![picture Default colors theme example](/resources/jquery-mobile/Theme.png "Default colors theme example") ![picture Kuler theme example](/resources/jquery-mobile/Kuler.png "Kuler theme example") -![picture Default colors theme example](/resources/jquery-mobile/Theme.png "Default colors theme example") ![picture Kuler theme example](/resources/jquery-mobile/Kuler.png "Kuler theme example") +### Downloading the Created Theme -### Downloading the created Theme - -Once you are satisfied with the various swatches that you have created in your theme, you can download this theme to be able to start using it in your project. You will simply need to press the 'Download theme zip file button', and enter the name of your theme in the popup window. Then, press the 'Download Zip' button on the download popup window, see below: +Once you are satisfied with the various swatches that you have created in your theme, you can download this theme to be able to start using it in your project. You will simply need to press the "Download theme zip file button", and enter the name of your theme in the popup window. Then, press the "Download Zip" button on the download popup window, see below: ![picture Download Theme](/resources/jquery-mobile/downloadTheme.png "Download Theme") -### Using the downloaded Theme +### Using the Downloaded Theme -The theme gets downloaded on your local machine as a zip file. This contains an `index.html` file, and a `themes` folder. The `index.html` file is an example of how you can now se your theme. The `themes` folder contains your theme CSS files, and the icons that are used by jQuery Mobile. +The theme gets downloaded on your local machine as a zip file. This contains an `index.html` file, and a `themes` folder. The `index.html` file is an example of how you can now use your theme. The `themes` folder contains your theme CSS files, and the icons that are used by jQuery Mobile. -To start using your theme, you can either start from the provided `index.html` or start from scratch. As explained in the theme download popup window, all you need is to add your theme to the head of your page before the jquery.mobile.structure file, like this: +To start using your theme, you can either start from the provided `index.html`, or start from scratch. As explained in the theme download popup window, all you need is to add your theme to the head of your page before the jquery.mobile.structure file, like this: ``` @@ -72,4 +71,4 @@ To start using your theme, you can either start from the provided `index.html` o ### Final Note -You need to be aware that jQuery Mobile will default to certain swatches when none are specified. For example, page content will default to swatch 'c', list dividers to swatch 'b', etc. As the full jQuery Mobile CSS is replaced by your custom theme CSS and the jQuery Mobile structure CSS, the only swatches available are the ones that you have provided as part of your custom theme. Therefore, you need to either always specify a swatch letter for all your elements or their parent using for example the `data-theme` attribute, or you will need to provide a swatch in your custom theme for the possible defaults. Additionally, the error messages use the swatch 'e', so this should also be specified in your theme. +You need to be aware that jQuery Mobile will default to certain swatches when none are specified. For example, page content will default to swatch "c", list dividers to swatch "b", etc. As the full jQuery Mobile CSS is replaced by your custom theme CSS and the jQuery Mobile structure CSS, the only swatches available are the ones that you have provided as part of your custom theme. Therefore, you need to either always specify a swatch letter for all your elements or their parent using for example the `data-theme` attribute, or you will need to provide a swatch in your custom theme for the possible defaults. Additionally, the error messages use the swatch "e", so this should also be specified in your theme. From 69d76ee4d244b8f79ef803a9b689d11c60629eb5 Mon Sep 17 00:00:00 2001 From: Markus Amalthea Magnuson Date: Fri, 17 May 2013 16:47:58 +0200 Subject: [PATCH 3/3] No self-closing tags. --- page/jquery-mobile/getting-started.md | 4 ++-- page/jquery-mobile/theme-roller.md | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/page/jquery-mobile/getting-started.md b/page/jquery-mobile/getting-started.md index cc215440..fc5720b6 100644 --- a/page/jquery-mobile/getting-started.md +++ b/page/jquery-mobile/getting-started.md @@ -18,8 +18,8 @@ In the ``, a div with a `data-role` of `page` is the wrapper used to delin My Page - - + + diff --git a/page/jquery-mobile/theme-roller.md b/page/jquery-mobile/theme-roller.md index e4f23e1c..4211b31c 100644 --- a/page/jquery-mobile/theme-roller.md +++ b/page/jquery-mobile/theme-roller.md @@ -60,10 +60,10 @@ To start using your theme, you can either start from the provided `index.html`, jQuery Mobile page - - - - + + + +