The jQuery Mobile CSS file is always the first asset we import in the head element (see Listing 7–2). This file contains the default structure and theming for jQuery Mobile applications. Take a moment and explore the contents of this file with your favorite editor.
Listing 7–2. jQuery Mobile CSS import<head>
<link rel="stylesheet" type="text/css" href="jquery.mobile-min.css" />
<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript" src="jquery.mobile-min.js"></script>
</head>The jQuery Mobile CSS document is broken into two sections: a theme section and a structure section.
- Theme – The top half of the document contains the default theme settings. The theme settings manage the visual styling (backgrounds, borders, color, font, shadows) for all components. When setting the
data-themeattribute, we are able to choose from five different options (a, b, c, d, e). These letters (a-e) are technically referred to as swatches. As you were reviewing the jQuery Mobile CSS file you may have noticed that the first swatch to appear within the CSS file was swatch “a” (see Listing 7–3).Listing 7–3. jQuery Mobile CSS swatch “a” (partial listing)/* A
---------------------------------------------------------------------*/
.ui-bar-a {
border: 1px solid #2A2A2A;
background: #111111;
color: #ffffff;
font-weight: bold;
text-shadow: 0 -1px 1px #000000;
...
background-image: linear-gradient(top, #3c3c3c, #111);
}
.ui-body-a {
border: 1px solid #2A2A2A;
background: #222222;
color: #fff;
text-shadow: 0 1px 0 #000;
font-weight: normal;
background-image: linear-gradient(top, #666, #222);
}
...
The theme section is broken down into the following sub-sections:
- Swatches – By default, jQuery Mobile has five swatches to choose from (a, b, c, d, e) and you may add as many unique swatches as necessary. Swatches allow us to configure unique backgrounds, borders, colors, fonts, and shadows for our components. For simplicity, the naming convention for new swatches is letter based (a-z). However, there is no limitation to the length of the swatch names. We will see examples of creating our own custom swatches later in the chapter.
- Global theme settings – Global theme settings are configured after the swatches. These settings add visual styling enhancements to buttons, such as rounded corners, icons, overlays, and shadows. Since these settings are global, they will be inherited by all swatch configurations (see Listing 7–4).Listing 7–4. jQuery Mobile global theme styling (partial listing)
/* Active class used as the "on" state across all themes
-----------------------------------------------------------------------*/
.ui-btn-active {
border: 1px solid #155678;
background: #4596ce;
font-weight: bold;
color: #fff;
cursor: pointer;
text-shadow: 0 -1px 1px #145072;
text-decoration: none;
...
} - Structure – The latter half of the jQuery Mobile CSS file contains structure styling that primarily includes positioning, padding, margin, height, and width settings (see Listing 7–5).Listing 7–5. jQuery Mobile structure styling (partial listing)
/* some unsets - more probably needed */Now that we have been introduced to the main CSS file for jQuery Mobile, let’s take a closer look at the five swatches that are included with jQuery Mobile and see how they appear across several different components (see Figure 7–3–7–6).
.ui-mobile, .ui-mobile body { height: 100%; }
.ui-mobile fieldset, .ui-page { padding: 0; margin: 0; }
.ui-mobile a img, .ui-mobile fieldset { border: 0; }
...
.ui-checkbox, .ui-radio {
position:relative; margin: .2em 0 .5em; z-index: 1;
}
.ui-checkbox .ui-btn, .ui-radio .ui-btn {
margin: 0; text-align: left; z-index: 2;
}
Figure 7–3. Grid swatches
Figure 7–4. List swatches
Figure 7–5. Button swatches
Figure 7–6. Form field swatchesTo keep the styling of the swatches consistent across all components, the following visual priority conventions are used for each swatch: - “a” – (black) highest level of visual priority.
- “b” – (blue) is secondary level.
- “c” – (gray) baseline.
- “d” – (white/gray) an alternate secondary level.
- “e” – (yellow) an accent color.
CopycopyHighlighthighlightAdd NotenoteGet Linklink
Leave a Reply