Thèmes d'applications personnalisées de conception / développement avec jQuery Mobile

Dans notre précédent didacticiel jQuery Mobile, j'avais présenté une grande partie du cadre sous-jacent et de la procédure à suivre pour configurer votre premier site Web. La bibliothèque JS est légère et facile à utiliser en ce qui concerne les difficultés d'apprentissage. Une feuille de style CSS générique est également incluse dans les fichiers pour vous permettre de personnaliser davantage les éléments de votre mise en page..

Pour ce deuxième segment, je voudrais passer un peu de temps à approfondir cette idée des thèmes jQuery Mobile. JQM a révolutionné l’ensemble du secteur de la conception et le processus de construction d’un modèle mobile à partir de rien a été considérablement amélioré. jQuery Mobile n'est pas simplement une bibliothèque de scripts, mais un framework complet sur lequel s'appuyer et produire des modèles mobiles efficaces.

Contenu de la feuille de style par défaut

Je devrais commencer par clarifier le type de code CSS inclus dans les fichiers par défaut. La feuille de style de jQM 1.0 a été divisée en deux segments principaux - structure et des thèmes.

Le code de structure est ce que vous pouvez ignorer pour la plupart. Ceci est utilisé pour définir les marges, le remplissage, la hauteur / largeur, les variantes de police, ainsi que de nombreux autres paramètres par défaut du navigateur. Les thèmes internes sont ensuite séparés de A à E, chacun contrôlant différents effets visuels dans votre conception. Cela peut inclure des couleurs d'arrière-plan, des dégradés, des ombres portées, etc..

Chacun de ces éléments de thème internes peut également être appelé échantillons. Lorsque vous créez un modèle pour mobile, vous vous en tenez généralement à un seul thème. Mais dans presque chaque scénario, la conception peut être améliorée avec des combinaisons de couleurs différentes. La feuille de style par défaut n'inclut que les échantillons A à E, mais vous pouvez en créer d'autres pour ajouter 21 variantes dans votre bibliothèque de thèmes. Juste pour clarifier ces termes encore une fois thème est considéré comme un seul fichier CSS pouvant contenir jusqu'à 26 fichiers différents. échantillons étiqueté A à Z.

Changer de style

Si vous choisissez de ne pas spécifier de nuances, jQuery Mobile s'en tiendra à la nuance A par défaut. Si vous n'étiez pas déjà au courant, les documents jQuery Mobile utilisent les attributs de données HTML5 pour de nombreuses fonctions internes. L'un d'entre eux comprend la modification des nuances via l'attribut data-theme. Découvrez mon exemple de code ci-dessous pour voir ce que je veux dire.

  Page jQM par défaut
 
  Voici du contenu interne.

Notez que j'ai placé l'attribut data-theme sur la div de la page racine. Cela signifie que la nouvelle couleur de nuance affectera tout ce qui est à l'intérieur, y compris l'en-tête et le contenu. Je pourrais aussi inclure data-theme = "c" dans l'en-tête div pour changer que le contenu du reste de ma page.

Composants d'une nuance

Il devrait être assez simple de mettre en œuvre ces différentes nuances au sein d’une même mise en page. Voyons maintenant le code CSS jQM afin de pouvoir décomposer les composants individuels d'un nuancier. Découvrez le dernier fichier CSS jQuery Mobile 1.4.5 hébergé sur leur propre CDN.

Vous remarquerez que chaque nuance est séparée par un commentaire distinct et que chacune des classes internes se termine par le lettrage approprié. Par exemple .ui-bar-a et .ui-body-a sont appliqués par défaut aux barres d’en-tête / pied de page et au contenu. La plupart des propriétés implémentent une réinitialisation des couleurs de police et de lien, des dégradés d’arrière-plan et d’autres petits détails. J'ai simplement inclus le ui-bar-a des codes pour vous donner une idée des éléments que nous ciblons.

/* UNE ----------------------------------------------- ---------------------------------------------- * / .ui -bar-a border: 1px solid # 2A2A2A; arrière-plan: # 111111; couleur: #ffffff; poids de police: gras; text-shadow: 0 / * a-barre-ombre-x * / -1px / * a-barre-ombre-y * / 1px # 000000; background-image: -webkit-gradient (linéaire, gauche en haut, gauche en bas, de (# 3c3c3c) à (# 111)); / * Saf4 +, Chrome * / image-fond: -webkit-linear-gradient (# 3c3c3c, # 111); / * Chrome 10+, Saf5.1 + * / image-fond: -moz-linear-gradient (# 3c3c3c, # 111); / * FF3.6 * / image d'arrière-plan: -ms-linear-gradient (n ° 3c3c3c, n ° 111); / * IE10 * / image d'arrière-plan: -o-linear-gradient (n ° 3c3c3c, n ° 111); / * Opera 11.10+ * / image-fond: dégradé-linéaire (# 3c3c3c, # 111);  .ui-bar-a, .ui-bar-a input, .ui-bar-a select, .ui-bar-textarea, .ui-bar-a bouton font-family: Helvetica, Arial, sans- serif;  .ui-bar-a .ui-link-inherit color: #fff;  .ui-bar-a .ui-link color: # 7cc4e7 / * a-bar-link-color * /; poids de police: gras;  .ui-bar-a .ui-link: survol couleur: # 2489CE / * a-bar-lien-survol * /;  .ui-bar-a .ui-link: actif color: # 2489CE / * a-bar-link-active * /;  .ui-bar-a .ui-link: visité couleur: # 2489CE / * a-barre-lien-visité * * /;

Si vous souhaitez simplement créer une nuance personnalisée, je vous recommande de baser le modèle sur l’un des originaux. Le processus ira beaucoup mieux si vous commencez à écrire des codes dans un nouveau document CSS. Vous n'aurez pas à vous soucier de l'édition dans le fichier d'origine et vous pourrez commencer à travailler sur une table rase. Mais les domaines clés sur lesquels vous souhaitez vous concentrer seront les suivants:

barres d'en-tête et de pied de page
contenu du corps et texte de la page
styles de liste
bouton états par défaut / survol / actif
contrôles de saisie de formulaire (extra)

Coder un nouveau design de barre

À partir du même fichier CSS, nous avons examiné précédemment copier / coller tout le code A de la nuance (lignes 12 à 150) dans un nouveau fichier. Nous pouvons utiliser le nom de nuance G pour implémenter ces nouveaux styles. Maintenant, après avoir copié le code, vous voulez renommer chaque instance de classe se terminant par -une à -g, car c’est ainsi que jQuery Mobile reconnaîtra les styles à utiliser.

J'aimerais commencer par remodeler la barre d'en-tête bg pour imiter un dégradé iOS plus familier. Cela peut être fait uniquement dans le .ui-bar-g sélecteur. Nous souhaitons éditer les propriétés de l’arrière-plan et de l’arrière-plan pour modifier les effets de dégradé. Découvrez mon code ci-dessous et un écran de démonstration du nouveau dégradé.

.ui-bar-g border: 1px solid # 2d3033 / * a-bar-border * /; bordure de gauche: 0px; border-right: 0px; arrière-plan: # 6d83a1; color: #fff / * a-bar-color * /; poids de police: gras; text-shadow: 0 / * a-barre-ombre-x * / -1px / * a-barre-ombre-y * / 1px / * a-barre-ombre-rayon * / # 3e4957; background-image: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (# b4bfce), couleur-stop (0.5, # 899cb3), couleur-stop (0.505, # 7e94b0), à (# 6d83a1)); background-image: -webkit-linear-gradient (haut, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (haut, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * FF3.6 * / background-image: -ms-linear-gradient (haut, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * IE10 * / background-image: -o-linear-gradient (haut, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1); / * Opera 11.10+ * / background-image: gradient linéaire (haut, # b4bfce, # 899cb3 50%, # 7e94b0 52%, # 6d83a1);

J'utilise le jeu de couleurs bleu trouvé dans la plupart des applications iOS par défaut. Mon arrière-plan est initialement défini sur une couleur unie pour les périphériques qui ne peuvent pas restituer les dégradés CSS3. Ensuite, j'utilise des repères de couleur autour du marqueur 50% pour recréer l'effet brillant typique de style Apple. Également à l'intérieur du même sélecteur, j'ai légèrement modifié l'ombre du texte avec une couleur et une plage plus subtiles..

Boutons et effets de texte

Lors du codage des échantillons, il est important de prendre en compte les zones de l'interface qui nécessitent une attention particulière. La barre d'en-tête a fière allure avec ce nouvel arrière-plan, mais une dernière modification que je voudrais faire correspondra aux styles de boutons plus proches de ceux des applications iOS..

.ui-btn-up-g border: 1px solid # 375073; arrière-plan: # 4a6c9b; poids de police: gras; couleur: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; boîte-ombre: aucune; -webkit-box-shadow: aucun; -moz-box-shadow: aucun; background-image: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (# 89a0be), couleur-stop (0.5, # 5877a2), couleur-stop (0,505, # 476999), vers (# 4a6c9b)); background-image: -webkit-linear-gradient (haut, n ° 89a0be, n ° 5877a2 50%, n ° 476999 52%, n ° 4a6c9b); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (haut, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * FF3.6 * / image d'arrière-plan: -ms-linear-gradient (haut, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * IE10 * / background-image: -o-linear-gradient (haut, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); / * Opera 11.10+ * / background-image: gradient linéaire (haut, # 89a0be, # 5877a2 50%, # 476999 52%, # 4a6c9b); border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;  .ui-btn-up-g .ui-btn-inner, .ui-btn-hover-g .ui-btn-inner, .ui-btn-down-g .ui-btn-inner border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0;  .ui-btn-hover-g border: 1px solid # 1b49a5; arrière-plan: # 2463de; poids de police: gras; couleur: #fff; text-shadow: 0 / * a-bup-shadow-x * / -1px / * a-bup-shadow-y * / 1px / * a-bup-shadow-radius * / # 40536d; boîte-ombre: aucune; -webkit-box-shadow: aucun; -moz-box-shadow: aucun; background-image: -webkit-gradient (linéaire, 0% 0%, 0% 100%, de (# 779be9), couleur-stop (0.5, # 376fe0), couleur-stop (0.505, # 2260dd), vers (# 2463de)); background-image: -webkit-linear-gradient (haut, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * Chrome 10+, Saf5.1 + * / background-image: -moz-linear-gradient (haut, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * FF3.6 * / background-image: -ms-linear-gradient (haut, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); / * IE10 * / background-image: -o-linear-gradient (haut, n ° 779be9, n ° 376fe0 50%, n ° 2260dd 52%, n ° 2463de); / * Opera 11.10+ * / background-image: gradient linéaire (haut, # 779be9, # 376fe0 50%, # 2260dd 52%, # 2463de); border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;

La zone de code que nous sommes en train de modifier se trouve dans les classes de boutons de l'interface utilisateur. Il existe 3 modes différents à prendre en compte: .ui-btn-up-g, .ui-btn-hover-g, et .ui-btn-down-g. Je me concentre principalement sur les effets standard (btn-up) et de survol (btn-hover) en modifiant les ombres de la boîte et les dégradés linéaires. J'ai également développé l'effet des coins arrondis pour que les boutons apparaissent plus rectangulaires.

Pour cette raison, j'ai eu besoin de supprimer le rayon de la bordure intérieure d'une classe intitulée .ui-btn-inner. Cette classe est attachée à un élément span dans chaque lien d'ancrage dans votre barre d'en-tête. Sans réinitialiser les propriétés du rayon de la bordure, vous remarquerez de petits problèmes dans la conception lorsque vous survolez un bouton. Au fur et à mesure que vous passerez plus de temps à coder dans les thèmes jQuery Mobile, vous mémoriserez ces petites nuances pour vos projets futurs..

Introduction à ThemeRoller

Si vous aimez vous salir les mains dans le code, je vous recommande vivement de vous en tenir aux modifications personnalisées. Non seulement vous avez plus de contrôle, mais il est beaucoup plus facile de résoudre les problèmes dans le CSS si vous apportez vous-même toutes les modifications. Mais pour de nombreux concepteurs, ce processus est fastidieux et prendra simplement plus de temps que nécessaire. Heureusement, l'équipe de jQuery Mobile a mis en ligne un éditeur en ligne sous le nom de ThemeRoller..

À partir de cette page, vous avez la possibilité d’éditer les 3 premières nuances A-C ou même d’en créer une. Si vous regardez dans la barre latérale gauche, vous pouvez basculer entre ces 3 paramètres ou modifier rapidement les options du thème global. Celles-ci incluent des propriétés CSS telles que les rayons de bordure, les ombres de boîte ou les polices de page par défaut. Lorsque vous sélectionnez l'un des nuanciers prédéfinis, notez que nous ne pouvons modifier que les mêmes zones qu'auparavant: barres supérieure / inférieure, contenu du corps et états du bouton 3.

Mais ma fonctionnalité préférée doit être l’accès direct aux nuances Adobe Kuler. Vous pouvez réellement créer quelques jeux de couleurs dans votre compte Kuler et les importer dans ThemeRoller. L'interface prend en charge la fonctionnalité glisser-déposer, il est donc très simple d'essayer quelques idées différentes en quelques minutes..

En fin de compte, il n’existe pas de méthode absolue pour construire correctement vos échantillons jQM. Certains concepteurs préfèrent coder en dur le code CSS, tandis que d’autres adoreront l’application Web intuitive ThemeRoller. Tant que vous suivez la structure de classe, vous devriez obtenir les mêmes résultats dans les deux sens..

Ressources utiles

Thèmes jQuery Mobile - Documentation
Utilisation et personnalisation des thèmes jQuery Mobile