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!
Can I tweet about this session?
Absolutely!
#jqcon
Is anything off limits?
Yes
;
About Me
I write
I blog
I tweet
I code
 |
|
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>
Time for participation
- HTML
- CSS
- JS
Custom Icons
Default icons are nice
More icons are better
Too many are never enough!
Creating your own
Things to remember
- Simpler is better
- Work with vector shapes
- 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
From this...to this
And beyond...
Custom plugins
Why write my own plugin?
- Impress your friends
- Learn something
- You have a need
Getting started
- Start with a blank page
- Copy existing plugin, make changes
- 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?
