jQuery Mobile 1.4 4Themes

Flat UI

https://github.com/tlkh/jquery-mobile-flat-ui-theme

Open License(The WTFPL License)

1.4.5
Original repository

Flat UI original repository have not been updated to 1.4. Other person forked.

Nativedroid

http://nativedroid.godesign.ch/

Link bback or 15$

1.4.2

This theme looks like android. This theme have some new components.

Graphite

Original repository
Graphite was beautiful theme. But it have not been updated to 1.4. Other developers forked.

ios8 Theme

jquery-mobile-ios8-theme
1.4.5
not free 13$
demo

Navibar 6 buttons

http://stackoverflow.com/questions/6161377/more-than-5-items-per-line-in-jquery-mobile-navbar

jQuery Mobile 1.4 needs some additional changes.

li.ui-block-f,
li.ui-block-g {
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  list-style: none;
}

.ui-grid-e,
.ui-grid-f {
  overflow: hidden;
}

.ui-block-f,
.ui-block-g {
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  min-height: 1px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* grid e: 16/16/16/16/16/16 */
.ui-grid-e .ui-block-a,
.ui-grid-e .ui-block-b,
.ui-grid-e .ui-block-c,
.ui-grid-e .ui-block-d,
.ui-grid-e .ui-block-e,
.ui-grid-e .ui-block-f { width: 16.65%; }
.ui-grid-e .ui-block-a { clear: left; }

/* grid f: 14/14/14/14/14/14/14 */
.ui-grid-f .ui-block-a,
.ui-grid-f .ui-block-b,
.ui-grid-f .ui-block-c,
.ui-grid-f .ui-block-d,
.ui-grid-f .ui-block-e,
.ui-grid-f .ui-block-f,
.ui-grid-f .ui-block-g { width: 14.2857%; }
.ui-grid-f .ui-block-a { clear: left; } 

[BUG] iOS hover position

I don't know how to fix this problem.

Performance improvement

I wrote what I got to know as my experience.

All widgets

• Use "vclick"
• Not use "transitions" as much as possible
• Move common parts(panels, popups) to out of div(data-role="page").

Popup

• Remove "ui-overlay-shadow" 

Form

•  Reduce "select" tags

Reference sites

• jQuery Mobile Optimizing Peformance 

Change Listview icons size

The size of Listview icons is 16px. But often I wish show bigger size icons. So I wrote some css.

.ui-listview .ui-li-icon {
  position: absolute !important;
  max-height: 24px !important;
  max-width: 24px !important;
  left: 10px !important;
  top: 10px !important;
}

16px

24px