ququplay / jquery-mobile-flat-ui-theme Goto Github PK

View Code? Open in Web Editor NEW

1.6K 145.0 386.0 1.31 MB

jQuery Mobile Flat UI Theme

Home Page: http://ququplay.github.com/jquery-mobile-flat-ui-theme

JavaScript 47.62% CSS 51.61% HTML 0.78%

jquery-mobile-flat-ui-theme's Introduction

Update (04/13/2015)

Please check our new Premium Themes. We think you will like them.

jQuery Mobile Flat-UI Theme

Theme for jQuery Mobile based on Flat-UI.

Demo

http://ququplay.github.com/jquery-mobile-flat-ui-theme

Versions

We are going to use master branch to keep up to date with jQuery Mobile versions. Previous versions will be moved to corresponding branches.

Current branch layout

master - jQuery Mobile version 1.4 - currently in progress not production ready yet
jqm-1.3.1 - jQuery Mobile version 1.3.1
jqm-1.3.0 - jQuery Mobile version 1.3.0

Usage

Copy jquery.mobile.flatui.css, fonts and images from generated folder to your project. Include link to jquery.mobile.flatui.css

 <link rel="stylesheet" type="text/css" href="jquery.mobile.flatui.css" />

Setup

In order to add a new swatch or colors you can add a new stylus file under src/stylus/swatches/ and run grunt from your command line.

brew install node
npm install -g grunt-cli
cd to project's folder
npm install
grunt watch
start modifying css/stylus files

Contributors

##License:

The WTFPL License

jquery-mobile-flat-ui-theme's People

Contributors

Stargazers

Watchers

Forkers

sethwilson ghosthamlet kinow bronfman lezhangxyz twocngdagz bouchaala-sabri jbeduya merchline tinkerwell exexzian kjyreg vicktor raydive adhidp manogp vivekrp dydycloud gaurav2728 martinsv varunkaushish chrisemoulton shizmdrive yeco apushpar yashilanka bryansattler septian-bhoechie brexis hfukuda openube vinspee parkerproject fivegen leison cjyue123 sekiz pietromalerba kohichi000000 nacholemmo noda-sin webmaia itkservice jnza kaytema1 jedwood djoudi chowdhury bochenn tamcao 262media flocks tomkuk shimuraken0730 noctishsu mouafa lgsunnyvale planamatch dedi49 wibcreate phuang07 lousk0 iknowl agence86 sunhaiyang tkymism nburka derekjaywork vixmobile nkcentinel eyecatchup keepcleargas iarnaud johnmichaelgibson alexbeet mobilipia skadoosh orky netrumble luisnomad rhelfer jasonsee jonathannaguin gmaguire croatian davedeveloper balakrishnan-s cmono kevinbarz 98yennet sunshineboy dawncc sunnyjaysabuero prograppers ryanchoe1205 neha8128 cungar djrondon infoscigeek apptar100

jquery-mobile-flat-ui-theme's Issues

How do you modify the build_swatch.styl file?

If I wanted to apply some swatch styles (like setting the border-bottom-color of .ui-header to be the highlight_color of the swatch, or setting the border-top-color of .ui-footer), how would I go about modifying the build_swatch.styl file?

Thanks,
Matthew

Double Scrollbar because of Panel Control

There are double scroll-bars being show in Flat UI theme. Could you please fix it.

Steps to reproduce:

Download from GitHub
Open index.html and see.

data-split-icon is off by a few pixels

using data-split-icon on a split button list results in the icon rendered to the right instead of at the center. I had to do the below to center it. it is easier to notice if the list element data-theme is different from the data-split-theme

.rem-list-item .ui-li-link-alt .ui-btn-icon-notext .ui-btn-inner .ui-icon {
top: 51%;
}

.rem-list-item .ui-li-link-alt .ui-btn .ui-icon {
right: 52.5%;
}

Theme not applied to data-role="button" when using data-content-theme

The selected theme is not applied to <a href="#" data-role="button"> but is on regular buttons. See the following example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="css/jquery.mobile.flatui.css" />
  <script src="js/jquery.min.js"></script>
  <script src="js/jqm.min.js"></script>
</head>
<body>
  <div data-role="page">
    <div data-role="header">
      <a data-iconpos="notext" data-role="button" data-icon="home" title="Home">Home</a>
      <h1>A</h1>
      <a data-iconpos="notext" data-role="button" data-icon="flat-menu"></a>
    </div>

    <div data-role="content" data-content-theme="b" role="main">

      <a href="#" data-theme="b" data-role="button">Yes</a>
      <a href="#" data-role="button">Yes</a>

      <div data-role="collapsible" data-theme="g" data-content-theme="g" data-collapsed="false">
        <h3>Section 1</h3>
        <button data-icon="flat-mail">Yes</button>
        <a href="#" data-role="button">Yes</a>
        <div data-role="fieldcontain">
          <div data-role="controlgroup" data-type="horizontal">
          <button>Yes</button>
          <a href="#" data-role="button">Yes</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Radiobuttons not rendering correctly

Hi,

Using your theme in an assignment for school and loving it!
We're trying to generate some radio buttons, but they just won't show up correctly.
Any idea what we're doing wrong?

Code: http://pastie.org/9758669

Screenshot:

Slider handle button theme

Configuration : jquery 1.10.2, jqm 1.3.2 and latest version of jquery-mobile-flat-ui-theme
Problem : Slider handle does not change when modifying data-theme. it seems that ".ui-slider-handle" always surcharge ".ui-btn-up-x" theme

Active button/link background color not matching selected theme

See an example of this at my Github Page http://rrevi.github.io - click on any of my posts and you should see then link to the post turn green when it is active (it only last a second or two). Not matching the theme selected (theme C)

.icon-bars, .icon-edit

The .icon-bars and .icon-edit default image icons are not rendering.

It's because they are not referenced in the /* supporting original icons */ area in the CSS.

Home icon circle is unevenly spaced inside outer circle

popup not working

Is'nt it?

Adding phone icon?

I'm implementing this theme for a client and he has a "call now" button on one of the pages. There's no corresponding telephone icon for that in the Flat UI icon set. Any chance of getting that added?

What is the license?

Error on Popover.

popover.
jquerymobile version 1.2

Will you debug for v1.2?? or only work on and after v1.3?

icons and borders of buttons are not sharp edged

icons and borders of buttons are sharp edged (especially radio and checkbox look strange). The font is not smooth too. Also icons in circles seem to be not centered. chrome win8 and android lg p500 same thing.

is it normal or is this just an early version?

Why use png img rather than font in ui-icon-xxx? The icon gets blurry when scaled up.

.ui-alt-icon.ui-icon-carat-r:after,
.ui-alt-icon .ui-icon-carat-r:after {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMCAYAAABfnvydAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE9JREFUGJWdj8sNwCAMQx+wGJuRbsZm9EAQlfkcasmHxE9RDF3m3sqA5l6gKHNRKAEVCED2Xfa5DoAbNIAjpD9cZcw2S6P/of7wKPC9sg1eyBEYSwB/E4QAAAAASUVORK5CYII=');
}

Fonts don't render properly in chrome windows with cleartype

Adding svg versions before woff and ttf declarations in the css fixes the problem.

Footer is not being in fixed position

I tried making footer area fixed but I am unable to do it. I checked the markup after the html is generated. I observed that the footer is not getting this css attribute top:window height-footer width. Kindly look into this issue.

Font icons on mini buttons

The font icons do not seem to display correctly when data-mini="true". Also the icon keeps the shadow. I am using JQM 1.3.1

Buttons not completely flat (and icons not working properly)

Hi!

I'm on JQM 1.3.1 and my buttons are markedly different from those on the demo page. They retain some sort of shadowing. Also, they show a default icon (a + sign) in the background when using the flat icons.

I think this is a similar issue to #7 and the issues are actually present in the fiddle posted there: http://jsfiddle.net/pe54u/

Can't show icons on data-icon in phonegap

when inserting a line with:

<> href="#" data-role="button" data-icon="flat-volume" data-iconpos="notext" data-theme="b" data-inline="true">Volume <>

with "a" inside <>

it only shows a green round circle. why is the icon not shown?

用该主题必须要运行在Node下么?

Limited Icon Set

Just started using the flat ui theme for mobile but there is a limited number of data-icons? Is there an extension that can be used?

Rails asset precompile complains about invalid CSS

Invalid CSS after "...ckground-color:": expected pseudoclass or pseudoelement, was " primary_color{..."
(in /Users/Tyler/fieldharmony/app/assets/stylesheets/application.css)
(sass):10348

It doesn't like this part :
html background-color: primary_color{border-color:#2c3e50;color:#fff}

Line 4120, 4136, 4152, 4168, 4184, 4200, 4216

All the ui-page-theme-a,b,c,d,e,f,g declarations.

I wrapped it like this:

html{background-color: primary_color{border-color:#2c3e50;color:#fff}}

With curly braces and it would compile - but I get the issue where the only usable theme is A, and when data-theme="a" is applied to the content or page div - that's the only thing that will work for the entire page. You cannot change buttons, collapsible divs etc to other themes...

Project name misspelled in bower.json

Using bower to install the theme will place the files in a misspelled folder.

jQuery Mobile 1.4

So jQuery Mobile people is about to release the public 1.4, right now there is a pre-release with a lot of changes. Among the most important this:

No generating of inner button markup.

might be a problem, riight?

WOFF font not supported in most of the android devices

Hi,

 May I know what is the alternatives way to use the glyph icons (which are in WOFF font) in browsers that are not supporting WOFF?

Panel data-theme is not working

I've tried a number of different data-theme settings (b,c,d,e,f) none of them effect the panels background colour. The only one that works is "a"

ququplay / jquery-mobile-flat-ui-theme Goto Github PK

jquery-mobile-flat-ui-theme's Introduction

Update (04/13/2015)

Please check our new Premium Themes. We think you will like them.

jQuery Mobile Flat-UI Theme

Demo

Versions

Current branch layout

Usage

Setup

Contributors

jquery-mobile-flat-ui-theme's People

Contributors

Stargazers

Watchers

Forkers

jquery-mobile-flat-ui-theme's Issues

Recommend Projects

Recommend Topics

Recommend Org