Share
Déplacement rapide avec le style de notre thème Ghost, ce tutoriel définit quelques paramètres de largeur, la couleur et quelques ajustements de mise en page de base.
Remarque: Vous devez travailler dans Firefox avec l'extension FireBug installée ou dans Chrome avec les outils de développement pour cette section du didacticiel..
Après avoir choisi nos polices lors du didacticiel précédent, nous savons quelle sera la largeur de nos lettres et nous pourrons ainsi ajuster la largeur du site pour une lisibilité optimale. Différentes polices ont différentes largeurs moyennes par lettre, c'est pourquoi nous avons attendu jusqu'à ce point pour finaliser la largeur de notre contenu..
La largeur principale de la présentation n'est pas définie pour correspondre à un style de conception ou à la résolution d'un périphérique particulier. Il est défini en ciblant le nombre de caractères par ligne, dans une plage permettant aux utilisateurs de lire et d’absorber le contenu le plus facilement possible..
On s'interroge sur le nombre optimal de caractères par ligne, mais nous allons cibler une plage d'environ 63 à 81 caractères..
Ceci est basé sur le fait de permettre à un lecteur ayant une vision et une expérience de lecture moyennes de suivre chaque ligne avec un nombre confortable de mouvements oculaires complets (saccades). La personne moyenne prend environ neuf lettres par mouvement oculaire, et nous autorisons sept à neuf de ces mouvements.
Chaque lecteur étant différent, le nombre optimal de caractères par ligne varie d'une personne à l'autre. Par conséquent, vous pouvez traiter la plage 63 - 81 comme une zone rugueuse.
Accédez à http://charcount.appspot.com/ et ajoutez le bookmarklet de comptage de caractères à votre navigateur..
Remarque: Pour ce faire, trouvez le "Essayez-le!" ou "cliquez sur moi" lien sur la page, puis faites glisser ce lien sur votre barre de favoris et renommez-le à quelque chose comme "CharCount".
Maintenant, allez sur votre site et mettez en surbrillance une ligne de texte, cliquez sur le bookmarklet et voyez combien de caractères il est dit dans la ligne:
En ce moment, nous en avons environ 91, notre mise en page est donc un peu trop large. Nous voulons le réduire d'environ dix personnages.
Ouvrez les outils de développement FireBug / Chrome en appuyant sur F12, et dans le HTML onglet, (Éléments onglet dans Chrome), sélectionnez la div avec la classe "wrapper_uber" afin que son code CSS s’affiche dans le panneau de style à droite.
Remarque: Voir l'image sous l'étape 5 pour ce que vous devriez rechercher.
Maintenant, cliquez sur la valeur de 40em à droite de la propriété largeur maximale afin que vous puissiez l'ajuster. Entrer 39em et appuyez sur ENTRER.
Mettez maintenant une ligne en surbrillance et cliquez à nouveau sur le bookmarklet du compteur de caractères. Cette fois, nous sommes à 87 par ligne, ce qui est encore un peu trop.
Continuez à tester jusqu'à ce que vous arriviez quelque part dans la fourchette 63 - 81 Dans ce cas 36em s'est avéré être un bon rapport qualité / prix. Vous obtiendrez des comptes différents sur chaque ligne, de sorte que celle-ci n'aura pas à être parfaite, juste quelque part près de la plage cible.
Maintenant, allez dans votre fichier "variables.less" et collez cette variable en dessous de la ligne contenant le @d'or variable, ligne 17:
@readable_width: 36em;
Retournez à votre fichier "layout.less" et changez le largeur maximale propriété dans le .wrapper_uber style de:
largeur maximale: 40em;
À:
max-width: @readable_width;
Sauvegarder le fichier.
Actualisez la page et le contenu devrait maintenant apparaître de la même largeur que lorsque vous l'aviez ajusté dans FireBug / Dev Tools:
Nous allons maintenant choisir une palette de couleurs et ajouter le jeu de couleurs de base.
Cette étape n’a rien de final, ni même de particulièrement beau. Nous voulons juste avoir une idée de base de la façon dont les couleurs vont jouer ensemble afin que nous puissions ajuster la disposition pour la lisibilité..
Nous allons commencer par choisir un petit nombre de couleurs et les enregistrer en tant que variable afin de pouvoir les utiliser facilement à plusieurs endroits..
La palette de couleurs elle-même sera contrôlée dans un fichier autonome. Nous allons créer des mixins pour contrôler les couleurs d'arrière-plan, les couleurs de police, les images d'arrière-plan et d'autres éléments de conception. Ces mixins peuvent ensuite être insérés dans le fichier "typography.less" ou "layout.less". De cette façon, nous gardons l’objet principal de chaque fichier séparé, ce qui aide à garder les choses organisées.
J'ai choisi cette palette de couleurs d'Adobe Kuler
Ajoutez le code suivant à votre fichier "variables.less", tout en bas du fichier:
@ color_01: # F2BF89; // orange doux @ color_02: # EF9335; // orange dur @ color_03: # 4FBCCB; // soft aqua @ color_04: # 25748C; // hard aqua @ color_05: # 4F5154; // mi-charbon
En enregistrant chaque code hexadécimal de couleur en tant que variable de ce type, si vous décidez ultérieurement de régler la palette, vous pouvez simplement modifier la valeur des variables ici et le thème entier sera automatiquement mis à jour. C’est aussi une bonne idée d’ajouter un petit commentaire décrivant la couleur afin que vous puissiez vous rappeler lequel est celui où vous allez les utiliser..
Ouvrez le fichier "color_and_bgs.less" pour le modifier et ajoutez le code suivant:
.BodyColor () background-color: @ color_01; color: @ color_05; .LinkColor () color: @ color_03; .LinkHoverColor () color: @ color_02; .HeaderColor () background-color: white; .ArticleColor () background: white; a, a: lien, a: visité color: @ color_03; a: survolez, a: focus color: @ color_02; .PostTitleColor () background-color: @ color_03; Couleur blanche; a, a: lien, a: visité couleur: blanc; a: survolez, a: focus color: @ color_01;
Nous sommes en train de créer une série de mixins de contrôle de couleurs de base qui seront ajoutés aux fichiers "typography.less" et "layout.less"..
Dans l'ordre, de haut en bas, ces mixins définiront:
Comme point d’intérêt, j’ai emprunté cette technique à l’art traditionnel, où les peintres commencent avec un sous-poil qui définit la palette de couleurs essentielle, puis ajoutent des détails par-dessus..
Cette approche vous permet d’apporter plus facilement des modifications lorsque vous choisissez la base de votre apparence générale, car les aspects sur lesquels vous travaillez sont assez simples et faciles à modifier..
Dans "typography.less", éditez la première ligne de chacun des styles suivants, en ajoutant des appels aux mixins que nous venons de créer, comme ceci:
body .BodyColor; marge: 0; font-family: @default_font; hauteur de ligne: @golden + 0em; // définit la hauteur de ligne régulière sur le nombre d'or font-weight: 300;
Ajouter .Couleur du corps; sur la première ligne du corps classe.
a: lien, a: visité .LinkColor;
Ajouter .Couleur du lien; à l'intérieur de a: lien, a: visité classe.
a: actif, a: survol .LinkHoverColor; contour: 0;
Ajouter .LinkHoverColor; sur la première ligne du un: actif, un: survol classe.
Toujours dans "typography.less", ajoutez le code suivant à la fin du fichier et enregistrez:
h1.posttitle_uber .PostTitleColor;
Dans "layout.less", ajoutez le code suivant à la fin du fichier et enregistrez:
.header_uber .HeaderColor; .article_uber .ArticleColor;
Actualisez le site. Cela devrait maintenant ressembler à ceci:
Maintenant que les couleurs sont bloquées, nous pouvons clairement voir certains aspects de la mise en page et du style qui doivent être ajustés.
La première chose qui apparaît immédiatement est que le texte de l'article ne doit pas être aligné avec le bord du fond blanc..
Nous ajusterons cela dans un instant, mais commençons par supprimer les soulignements du titre du blog, de la description du blog et des titres d'articles afin de faciliter la visualisation de ce qui convient le mieux lors des réglages.
Dans le fichier "typography.less", ajoutez le code suivant sous le nom H6 classe et sauvegarde:
h1.blogtitle_uber, h1.blogtitle_uber une text-decoration: none; p.blogdescription_uber, p.blogdescription_uber un text-decoration: none;
Dans le fichier "colors_and_bgs.less", ajoutez texte-décoration: aucun; au une style de tag dans le .PostTitleColor () mixin comme ci-dessous et économisez:
.PostTitleColor () background-color: @ color_03; Couleur blanche; a, a: lien, a: visité couleur: blanc; texte-décoration: aucun; a: survolez, a: focus color: @ color_01;
Actualisez le site - vous ne devriez plus voir aucun soulignement sur le titre, la description ou les titres du blog..
Dans le fichier "layout.less", ajoutez un espace autour du contenu pour faciliter la lecture en modifiant le .article_uber classe pour ajouter un rembourrage:
.article_uber .ArticleColor; remplissage: 5 * @golden + 0em;
Cela règle le rembourrage à cinq fois le nombre d'or de tous les côtés.
Actualisez le site, il devrait ressembler à ceci:
Le remplissage que nous avons ajouté facilite beaucoup l'observation des bords extérieurs du texte, mais nous avons maintenant perdu la largeur de lecture que nous avions configurée auparavant. C'est parce que le .wrapper_uber classe garde la largeur à un maximum de 36em, comprenant le rembourrage que nous venons d'ajouter. Donc, il essaie d'écraser tout notre contenu, plus tout notre rembourrage, dans cette 36em grand espace.
Pour résoudre ce problème, nous devrons augmenter la largeur maximale paramètre de la .wrapper_uber classe à notre largeur lisible de 36em plus le rembourrage que nous venons d'ajouter. Cela permettra au contenu lui-même de s’étendre à 36em, avec l'allocation supplémentaire pour le rembourrage créant un espace blanc confortable, soit site.
Nous allons commencer par créer une variable pour contenir la quantité de remplissage que nous ajoutons. De cette façon, nous pouvons utiliser cette valeur à la fois dans le .wrapper_uber classe et .article_uber classe, comme vous le verrez ci-dessous.
Avec cette approche, si nous voulons ajuster la quantité d’espace blanc autour du contenu, la largeur du wrapper du site s’ajuste automatiquement en même temps..
Dans le fichier "variables.less", ajoutez ce code sous le @readable_width ligne variable, puis enregistrez:
@add_padding: 5 * @golden;
Maintenant, dans le fichier "layout.less", mettez à jour le .wrapper_uber classe largeur maximale réglage pour ajouter la nouvelle variable de remplissage:
.wrapper_uber width: 100%; max-width: @readable_width + 2 * @add_padding; marge: 0 auto;
Remarque: Cela ajoute deux fois la valeur du @add_padding variable à la largeur maximale du .wrapper_uber classe, en tenant compte du rembourrage à gauche et à droite.
Toujours dans le fichier "layout.less", mettez à jour le .article_uber classe rembourrage définir pour utiliser également la nouvelle variable de remplissage, puis enregistrez:
.article_uber .ArticleColor; remplissage: @add_padding + 0em;
Maintenant, nous utilisons la valeur de la @add_padding variable à la fois pour élargir le wrapper de site global et pour ajouter un espace de remplissage / blanc autour du contenu.
Actualisez votre site et vous devriez maintenant voir à la fois votre espace blanc sur les côtés et votre largeur lisible:
À ce stade, il y a probablement une chose qui vous empêche de profiter de votre nouvelle mise en page: la grande image Ghost qui dépasse et déborde de la zone de contenu. Pour résoudre ce problème, ajoutez le code suivant à votre fichier "layout.less" au-dessus de .wrapper_uber classe:
img border: 0; largeur maximale: 100%;
Cela garantit qu'aucune image ne sera jamais plus large que 100% de l'élément sur lequel elle se trouve..
Dans votre fichier "normalize.css", commentez le img style sur les lignes 231 à 233 car il n'est plus nécessaire étant donné que nous avons créé notre propre img style, puis enregistrez.
Actualisez votre site et l'image Ghost devrait maintenant s'intégrer parfaitement dans la zone de contenu:
Nous avons maintenant les aspects les plus importants du style en place, ceux qui contrôlent la typographie et la lisibilité, en gardant le contenu au centre de nos préoccupations:
Ceci forme le cœur de notre conception et complète ce que nous avons voulu réaliser dans cette partie de notre série de tutoriels, bien que nous n’en soyons pas encore au stade de la mise en forme de notre conception de thèmes..
Nous sommes maintenant prêts à passer à la prochaine et dernière partie de notre série de tutoriels..
Nous allons ensuite finaliser toute notre esthétique et compléter la fonctionnalité réactive du thème. À la fin de l’installation suivante, votre thème sera entièrement terminé et installé..
Accentsconagua