Lately, we’ve had some projects (International Radio Festival) where we decided to use jQuery Mobile, as some of its functionalities simplify and speed up our work (and allows us to concentrate only on projects requirements), but had completely different look and feel and didn’t need its theme.
We started with using http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css stylesheet to be able to use needed functionality but then when jQuery mobile loaded and “infiltrate” its classes to our markup we were in overriding hell. We had to override every class that was bugging us and this was a lot of work as you can imagine.
Fortunately we discovered a neat trick (upon looking into jQuery Mobile Theme roller). We noticed that package that Theme roller delivers uses http://code.jquery.com/mobile/1.3.0/jquery.mobile.structure-1.3.0.min.css (notice the difference between this URI and earlier one, structure) stylesheet and on top of that colors and styles defined in editor.
Well, this structure stylesheet proved to be just what we were looking for. Only basic and bare bone stuff that enables you to fully customize your design without the need of overriding everything. It was everything we needed.
Well, almost everything. It doesn’t provide loading icon (visible when you go from pages to pages) or any CSS styles for it. The solution is to grab ajax-loader.gif from Theme roller package (or use your own) and to add class for ui-icon-loading.
[code lang=”css”]
.ui-icon-loading {
background: url(images/ajax-loader.gif);
background-size: 46px 46px;
}
[/code]
Additional benefit of using structure style sheet is smaller jQuery Mobile CSS file and smaller our own theme/design CSS file because we could remove all that overriding styles. In mobile development where every byte counts this trick with no downsides is worth having in your sleeve 🙂