Going Deeper with jQuery Mobile

What's this session about?

Custom Icons

Custom Themes

Custom Plugins

Efficiency & Workflow

and...

Today's Safe Word

Skeumorphism

Can I download your files?

Yep!

http://goo.gl/4CnpJ

Can I tweet about this session?

Absolutely!

#jqcon

Is anything off limits?

Yes

;

About Me

I write


jQuery Mobile Web Development Essentials


jQuery Mobile Cookbook

I blog

andyMatthews.net

I tweet

@commadelimited

I code

  • jQuery Mobile
    • Autocomplete
    • Icon Pack
    • Boilerplate
    • Tiny Sort
    • SwipeButton
    • Twitter Bootstrap Theme
  • InstagramCFC
  • FoursquareCFC

github.com/commadelimited

I "family"

I live in Nashville

TL;DR

  • A touch-Optimized web framework for smartphones & tablets
  • Graded browser support
  • Includes UI, URL routing and theming. Built on HTML 5
  • 5 themes and 22 icons built in
  • Originally released in October 2010
  • Current version: 1.1.0

<!-- standard include -->
<link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" />
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.0.min.js"></script>
						

<!-- custom theme include -->
<link rel="stylesheet" href="jquery.mobile.structure-1.1.0.min.css" />
<link rel="stylesheet" href="custom-theme.min.css" />
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.0.min.js"></script>
						

http://www.jqmgallery.com/

Time for participation

  • HTML
  • CSS
  • JS

Custom Icons

Default icons are nice

 

 

More icons are better

 

 

 

 

 

https://github.com/commadelimited/jQuery-Mobile-Icon-Pack

Too many are never enough!

 

https://github.com/commadelimited/jQuery-Mobile-Icon-Pack

Creating your own

Things to remember

  1. Simpler is better
  2. Work with vector shapes
  3. Subpixel rendering sucks

Adding your icon


.ui-icon-jqcon-hat {
	background: url("hat.png") no-repeat rgba(0,0,0,0.4);
}
						

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.ui-icon-jqcon-hat {
		background: url("hat@2x.png") no-repeat rgba(0,0,0,0.4);
		background-size: 18px 18px;
	}
}
						

Custom themes

Visual building blocks
of jQuery Mobile

border-radius: 10px 20px 0px 50px;

border-radius: 10px 20px 0px 50px;
linear-gradient(top, #b4df5b 0%,#b4df5b 100%);

border-radius: 10px 20px 0px 50px;
linear-gradient(top, #b4df5b 0%,#b4df5b 100%);
box-shadow: 0px 0px 40px rgba(0,0,0,.7);

border-radius: 10px 20px 0px 50px;
linear-gradient(top, #b4df5b 0%,#b4df5b 100%);
box-shadow: 0px 0px 40px rgba(0,0,0,.7);
text-shadow: 0px -4px 0 rgba(255,255,255,1);

UI framework

  • Namespacing
  • Bite-sized pieces
  • Stacked Styles

Button

  • .ui-btn-corner-all
  • border-radius: 1em;
  • .ui-shadow
  • box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  • .ui-btn
  • display: block;
  • text-align: center;
  • cursor: pointer;
  • position: relative;
  • margin: .5em 5px;
  • padding: 0;
  • .ui-btn-up-c
  • border: 1px solid #CCC;
  • background: #EEE;
  • font-weight: bold;
  • color: #222;
  • text-shadow: 0 1px 0 white;
  • background-image: linear-gradient(white,#F1F1F1);

Built in themes are great

At first i was like

Then i was all like

Themeroller to the rescue

http://jquerymobile.com/themeroller/

ThemeRoller on Github

From this...to this

And beyond...

Custom plugins

Why write my own plugin?

  • Impress your friends
  • Learn something
  • You have a need

Getting started

  1. Start with a blank page
  2. Copy existing plugin, make changes
  3. Use Grunt - build tool for javascript

How do i use it?


andymatthews$ npm install grunt
andymatthews$ mkdir jquerycon
andymatthews$ cd jquerycon
andymatthews$ grunt init:jquery
						

How do i use it?

Demo Time

Resources

The end

Questions? Comments? Snide remarks?