jQuery Mobile LESS Version 1.3.0
This is a version of the jQuery Mobile project, converted to LESS. From the official website:
A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.
jQuery Mobile 1.3 (1.3.0) works with versions of jQuery core from 1.7.0 to 1.8.2. You can find more information about how the library works, and what it is capable of, by reading the documentation.
- More cross-browser. Using
mixins.lessfile, we get maximum browser compatibility, for IE10, and rare browsers like Konquerer. Comes with PIE 2.0.1 beta so that you can get gradients and
box-shadowin IE-7 and below.
- LESS -- ftw. All the themes that you see in ThemeRoller have been taken and converted to variables. So you can edit any theme you want, all through LESS. Using
variables.less, you get full control over the library and theme measurements.
- Dynamicness... it owns. The LESS has been constructed based on basic measurements so that the measurements can "cascade" down. So you can adjust all the font sizes by simply changing
- Tried and true techniques. Based off of the most common techniques for styling LESS, I took from Twitter Bootstrap, and other LESS frameworks to make a nice custom mixin file.
- No images. Customizable icons with Icomoon. Instead of using images, we rely on the
&:afterpseudo-selectors to achieve a scalable design. It looks more crisp, and using Icomoon, you can easily customize, export, and import icon sets!
css- resolve dependencies, build, concat, and minify all the css, just the structure css, and just the theme css
docs- build the js and css, and make the docs ready for static consumption
Note: don't use the CDN version of the CSS. The whole point of this repo is the modified CSS. Check this repo's CSS directory to find the file you want.
css build targets require node.js and its packaged NPM package manager. For the other build targets,
zip, bash is also required. For more information on installing node please see its documentation. As for bash it's generally installed as the default shell in many POSIX compliant environments (OSX, Linux, BSD, etc).
With node installed you can run the
css targets by simply issuing the following from the project root:
npm install node node_modules/.bin/grunt js # or css
Note that if you have the appropriate version of grunt, our build tool, installed globally you can substitute
grunt wherever you see
node node_modules/.bin/grunt. For the remainder of the build documentation we will prefer the more concise
If you want to use the
zip targets you will need bash and they can be run with the following
grunt docs # or
You can also compile the LESS using the grunt package I added. Make sure you install the dependencies though :)
For example, if a user wished to exclude the form widgets to reduce the wire weight of their jQuery Mobile include they would first remove them from the meta module:
diff --git a/js/jquery.mobile.js b/js/jquery.mobile.js index 6200fe6..3a4625c 100644 --- a/js/jquery.mobile.js +++ b/js/jquery.mobile.js @@ -19,12 +19,6 @@ define([ './jquery.mobile.listview.filter', './jquery.mobile.listview.autodividers', './jquery.mobile.nojs', - './jquery.mobile.forms.checkboxradio', - './jquery.mobile.forms.button', - './jquery.mobile.forms.slider', - './jquery.mobile.forms.textinput', - './jquery.mobile.forms.select.custom', - './jquery.mobile.forms.select', './jquery.mobile.buttonMarkup', './jquery.mobile.controlGroup', './jquery.mobile.links',
And then run the build:
The greatest thing about jQuery Mobile LESS is that themes can be easily customized and edited. To create a new theme:
- Copy the
defaultfolder from CSS/Themes to a new folder named after your new theme (eg,
- Add customizations to the
From the project root run the following
THEME=my-theme grunt css
The output will be available in the
Again this assumes the theme css files are available in the
css/themes/$THEME/ directory relative to the project root,
css/themes/my-theme/ in the example.
The root of the repository is also the root of the documentation and, along with the test suite, acts as the test bed for bug fixes and features. You'll need to set up a server and get the test suite running before you can contribute patches.
Most of the documentation and testing pages rely on PHP 5+, and as a result Apache and PHP are required for development. You can install them using one of the following methods:
- one-click - MAMP for OSX, XAMP for OSX/Windows
- existing web server - eg,
~/Sitesdirectory on OSX.
- virtual machine - If Vagrant is installed you can add this remote/branch and
In addition to vanilla Apache the following modules are required:
- Rewrite (mod_rewrite.so)
- Expire (mod_expires.so)
- Header (mod_headers.so)
app.js file in the folder in a run configuration. Don't forget to install the dependencies too :)
The files in the express-docs folder are different from the ones used in the official docs. I'll hopefully upload this to the server once it's tested and working, but for now, it's good to understand that the extra CSS has been reduced from the official docs pages to give you a better idea of what you're getting.
Automated testing forms the backbone of the jQuery Mobile project's QA activities. As a contributor or patch submitter you will be expected to run the test suite for the code your patches affect. Our continuous integration server will address the remainder of the test suite.
There are two primary ways to run the test suite. Both of them require a server configured in the previously prescribed manner. The location of which will hereafter be referred to as
$WEB_SERVER and should include the protocol. First, you can run the tests individually by directing your browser to the different test pages associated with the area in which you are working. For example, to run the tests for
$WEB_SERVER/tests/unit/slider/. To find out which test pages are available you can list them with:
NOTE See the build requirements for node/grunt install information.
JUNIT_OUTPUT=build/test-results/ ROOT_DOMAIN=$WEB_SERVER grunt test
You can confine the headless run to a single test page or set of test pages using the
TEST_PATH environment variable. For example:
TEST_PATH=slider JUNIT_OUTPUT=build/test-results/ ROOT_DOMAIN=$WEB_SERVER grunt test
will only run the tests where the path contains the string
tests/unit/slider/. NOTE that the phantom tests currently require that the web server be running to access and run the tests properly because of the PHP dependency that many of them share. Additionally the test suite is run against many versions of jQuery using the
JQUERY environment variable. For example if you wanted to run the test suite against two of the currently supported versions, 1.7.2 and 1.9.0, the command would take the following form:
JQUERY=1.7.2,1.9.0 JUNIT_OUTPUT=build/test-results/ ROOT_DOMAIN=$WEB_SERVER grunt test
Often times when working on a feature or bug fix branch it's useful to pull in the latest from the parent branch. If you're doing this before submitting a pull request it's best to use git's rebase to apply your commits onto the latest from the parent branch. For example, working on
new-feature branch where
upstream is the remote at
git checkout new-feature git fetch upstream git rebase upstream/master ## ... here you may have to resolve some conflicts ... ##
You can now push to your own fork and submit the pull request. Keep in mind that it's only a good idea to do this if you haven't already submitted a pull request unless you want to create a new one because your origin remote (your fork) will report a discrepancy. Again, please refer to the chapter in Pro Git on rebasing if you're new to it.