Share
Bienvenue dans la quatrième partie de notre série de tutoriels sur la conception de thèmes Ghost. Dans le didacticiel d'introduction, vous avez appris qu'il y a deux étapes pour concevoir un thème. Au cours des versements correspondants, nous avons commencé et achevé ce que nous avons appelé "la première étape" de la création des modèles de votre thème. Cette quatrième partie de notre série nous emmène dans la prochaine étape de la conception de thème, à savoir le style.
Dans cette partie, nous commencerons à styler notre typographie et à construire nos contrôles de présentation. Dans la prochaine partie, nous continuerons notre style en bloquant notre palette de couleurs et en jetant les bases de la réactivité des thèmes..
Remarque: Ce tutoriel suppose une connaissance de base de CSS.
Ce tutoriel vous guidera à travers une approche de la conception réactive que vous ne connaissez peut-être pas. Cette approche garantit que les conceptions répondront à plus que des résolutions de périphériques communes spécifiquement ciblées..
Au lieu de cela, les dessins vont:
Ceci est fait par:
Accentsconagua
em ou rem les valeurs, qui sont flexibles, et non les valeurs de pixels, qui sont inflexibles, tout au long de la conception.Avant de commencer le style, nous allons ajouter du contenu de test de balises de titre sur votre site Ghost afin que vous puissiez voir comment vos balises H1 à H6 apparaissent..
Vous devez ajouter chaque taille d'en-tête une ligne sous l'autre pour voir comment ils fonctionnent lorsqu'ils sont placés ensemble, puis ajouter chaque titre avec une ligne de texte normal entre les deux pour voir à quoi ils ressemblent dans le flux du contenu normal..
Ajoutez le balisage suivant en haut de votre dernier message Ghost (vous devrez peut-être ajouter des lignes vides entre chaque ligne), puis mettez-le à jour:
Vous êtes dans! Agréable. Nous avons mis au point un petit article pour vous présenter l'éditeur Ghost et vous aider à démarrer. Allez-y et éditez ce post pour commencer et découvrez comment tout cela fonctionne! #Heading 1 ## Heading 2 ### Heading 3 #### Heading 4 ##### Heading 5 ###### Heading 6 Nous avons réuni un petit article pour vous présenter l'éditeur Ghost et obtenir vous avez commencé. #Heading 1 Nous avons préparé un petit post pour vous présenter l'éditeur Ghost et vous aider à démarrer. ## Heading 2 Nous avons préparé un petit article pour vous présenter l'éditeur Ghost et vous aider à démarrer. ### Heading 3 Nous avons préparé un petit article pour vous présenter l'éditeur Ghost et vous aider à démarrer. #### Heading 4 Nous avons préparé un petit article pour vous présenter l'éditeur Ghost et vous aider à démarrer. ##### Heading 5 Nous avons créé un petit article pour vous présenter l'éditeur Ghost et vous aider à démarrer. ###### Titre 6
Pour vous aider à utiliser le flux de travail le plus efficace possible avec la création de votre thème Ghost, je vous ai concocté un petit package de développement qui vous donnera accès à des outils très utiles et automatisera un certain nombre de tâches. Il est disponible dans le téléchargement de la source principale.
Au lieu de coder en CSS brut, nous utiliserons LESS. Si vous débutez avec MOINS, vous pouvez tout lire à ce sujet sur http://lesscss.org/
GhostThemingPackage gérera la compilation de votre code LESS, réduira votre CSS et l'écrira dans votre dossier de thèmes..
Il téléchargera et mettra également à disposition la bibliothèque de mixins "LESSHat", une ressource gratuite fantastique qui permet de produire rapidement et facilement des navigateurs croisés CSS3: http://lesshat.com/
De plus, il téléchargera "normalize.css", "Modernizr", ainsi que du javascript iframe réactif, et combinera, réduira et rédigera tout dans votre thème..
Normalize.css normalise les éléments d'affichage de base sur tous les navigateurs. Plus d'informations à ce sujet sur http://necolas.github.io/normalize.css/
Modernizr permet aux anciens navigateurs de donner un sens au balisage moderne. En savoir plus à ce sujet sur http://modernizr.com/
Vous devez seulement installer trois choses pour utiliser GhostThemingPackage:
Node.js est déjà installé sur votre ordinateur, mais vous devrez peut-être installer Grunt et Bower si vous ne les avez pas encore sur votre système..
Grunt.js est un lanceur de tâches javascript que nous utiliserons pour automatiser la compilation LESS, ainsi que la combinaison et la minification CSS. Si vous n'avez pas encore Grunt sur votre système, vous pouvez l'installer très facilement via NPM (gestionnaire de paquet de noeud, une partie de node.js).
Pour installer Grunt via NPM, ouvrez un terminal (n'importe où) et exécutez la commande suivante:
npm installer -g grunt-cli
Assurez-vous d'inclure l'indicateur "-g" car cela rendra Grunt disponible de manière globale sur votre système, c'est-à-dire n'importe quel emplacement sur lequel vous travaillez..
Bower.io est un excellent gestionnaire de paquets qui vous donne un accès facile à tous les types de scripts et de packages CSS destinés aux sites Web. Vous pouvez en lire plus à ce sujet sur http://bower.io/
Comme Grunt, Bower peut également être installé très facilement via NPM.
Remarque: Si Git n'est pas déjà installé, vous devrez le faire avant d'installer Bower..
Les instructions d'installation pour Git peuvent être trouvées ici: http://git-scm.com/book/fr/Getting-Started-Installing-Git
Important: Voir les instructions au bas de la page de Bower concernant l'installation de Git sous Windows: http://bower.io/#a-note-for-windows-users
Pour installer Bower via NPM, ouvrez un terminal (n'importe où) et exécutez la commande suivante:
npm installer -g bower
Encore une fois, assurez-vous d'inclure le drapeau "-g" pour que Bower soit disponible partout sur votre système..
Après avoir téléchargé "GhostThemingPackage", extrayez-le dans un endroit facilement accessible, idéalement dans le même répertoire racine que votre dossier d’installation Ghost..
Par exemple, si votre installation Ghost est à C: \ Ghost puis extraire le paquet à votre C: conduire aussi, donc ça finit à C: \ GhostThemingPackage. (Ne le mettez pas dans votre dossier d'installation Ghost).
Vous devriez voir la structure de dossiers et de fichiers suivante à l'intérieur:
Renommez le dossier "GhostThemingPackage" en "UberThemeStyles".
Ouvrez un terminal dans le dossier "UberThemeStyles".
Lancer la commande npm installer.
Cela récupérera automatiquement les packages Node.js requis qui seront utilisés pour la compilation de LESS, ainsi que pour la combinaison et la réduction de CSS et de JavaScript..
Vous verrez beaucoup de messages comme celui-ci pendant que NPM récupère tout:
Attendez que tous ces messages se soient arrêtés et que l'invite de commande réapparaisse.
Lancer la commande bower installer.
Tout comme à l'étape précédente, cela récupérera les packages requis à partir de Bower.io; LESShat, Modernizer et Normalize.css
Encore une fois, vous verrez une série de messages apparaître sur votre terminal: attendez qu'ils aient terminé et l'invite de commande apparaît.
Vérifiez que vous voyez maintenant cette structure de dossier dans votre dossier "UberThemeStyles":
Notez la présence des nouveaux dossiers "bower_components" et "node_modules".
Si des sous-dossiers sont manquants dans l'un ou l'autre dossier, supprimez-le, puis relancez la commande d'installation.. npm installer pour le dossier "node_modules" ou bower installer pour le dossier "bower_components".
Dans votre éditeur de code préféré, ouvrez "Gruntfile.js" dans le répertoire racine de votre dossier "UberThemeStyles"..
C'est le fichier qui facilitera toutes les tâches d'automatisation pendant votre processus de style de thème. Pour que cela fonctionne, nous devons simplement indiquer où vous avez installé Ghost et quel est le nom de votre thème..
Sur les lignes 62 et 63, localisez ce qui suit:
'ghost_location': '… / Ghost /', 'ghost_theme_name': 'VotreThemeName',
Si nécessaire, changez '… /Fantôme/' pour refléter le chemin relatif vers votre installation Ghost.
Vous ne devrez pas modifier le paramètre si votre dossier "UberThemeStyles" se trouve dans le même dossier racine que votre dossier d'installation Ghost., et votre dossier d'installation de Ghost s'appelle réellement "Ghost".
Changez "YourThemeName" en "UberTheme".
Sauvegarder le fichier.
Remarque: Votre paquet thématisé est maintenant installé et vous pouvez répéter le processus ci-dessus ultérieurement pour configurer tous les thèmes supplémentaires que vous créez..
La première chose à faire est d’obtenir les styles de Normalize.css ajoutés à la feuille de style de votre thème. Cela garantira que notre thème s'affiche de manière standardisée sur tous les navigateurs..
Nous allons ensuite définir une largeur préliminaire pour votre contenu afin de faciliter l'évaluation des choix de typographie. Nous ajouterons ensuite vos styles de typographie de base..
Dans votre terminal (toujours dans votre dossier "UberThemeStyles"), exécutez la commande grunt cssmin.
Cela prendra le fichier "normalize.css" de votre dossier "bower_components / normalize-css", le compressera et l'écrira dans le fichier style.css de votre thème..
En cas de succès, vous devriez voir ceci dans votre terminal:
Actualisez votre frontal Ghost. Vous pouvez vérifier que "normalize.css" a été ajouté si vous voyez
Remarque: Au fur et à mesure, nous apporterons quelques modifications au fichier normalize.css..
Comme nous allons créer bon nombre de nos propres styles, nous voulons éviter les doublons pour des éléments tels que corps et h1 comme il s’agit d’une surcharge inutile pour le navigateur, nous allons donc transplanter certains styles de "normalize.css" dans nos propres fichiers LESS personnalisés.
Avant de choisir les polices que nous allons utiliser dans notre thème, nous allons définir une largeur préliminaire pour le contenu et ajouter quelques paramètres de base pour la typographie. Il sera beaucoup plus facile de tester et de choisir les polices lorsqu'elles se trouvent dans un espace plus restreint et réglées sur la taille de police à laquelle elles seront probablement utilisées..
Pour ce faire, nous allons commencer à éditer vos fichiers LESS.
Avant de commencer à éditer LESS, prenez-vous un instant pour vous familiariser avec son système de:
Vous n’avez pas besoin d’une compréhension approfondie à ce stade, il devrait suffire de lire la section d’ouverture de la page d’accueil de LESS, c’est-à-dire chacune des sections dont le titre correspond à la liste ci-dessus..
Afin de voir vos modifications de code LESS reflétées sur le front-end de votre site, nous allons activer la compilation et l'écriture automatique de CSS dans votre thème..
Dans votre terminal (toujours dans votre dossier "UberThemeStyles"), exécutez la commande grunt regarder.
Cela lancera la tâche "surveillance", par laquelle vos fichiers LESS et votre fichier Normalize.css seront surveillés pour tout changement. Chaque fois que des modifications sont détectées dans les fichiers, LESS sera automatiquement compilé et votre code CSS sera combiné, réduit et écrit dans le fichier "style.css" de votre thème..
Remarque: Lorsque vous souhaitez arrêter la tâche "Regarder", retournez à votre terminal et appuyez sur CTRL + C. À l'invite, tapez y puis appuyez sur ENTRER.
Dans votre éditeur de code préféré, ouvrez le fichier "layout.less" du dossier "UberThemeStyles> LESS"..
Ajoutez le code suivant puis enregistrez:
.wrapper_uber width: 100%; largeur maximale: 40em; marge: 0 auto;
Ce code fait quelques choses:
largeur propriété à une valeur explicite. Au lieu, largeur est réglé sur 100% pour qu'il remplisse toute la fenêtre de tout périphérique avec une résolution inférieure à 40 eme.largeur maximale propriété pour limiter le wrapper à pas plus de 40em large sur de plus grandes résolutions.em valeur, pas une px valeur.Remarque: Nous allons ajuster cette largeur ultérieurement pour une lisibilité optimale une fois que nous avons choisi nos polices et par conséquent connaître la largeur de nos lettres. La valeur de 40em est réservé seulement.
Rafraîchissez votre front-end. Il devrait maintenant avoir été réduit comme ceci:
Ouvrez le fichier "normalize.css" dans le dossier "UberThemeStyles> bower_components> normalize-css" pour le modifier..
Commenter ou supprimer le corps, h1 et tout une styles, (lignes 76 à 121), parce que nous allons écrire les nôtres et que nous ne voulons pas des frais généraux liés aux déclarations en double.
Ouvrez le fichier "typography.less" du dossier "UberThemeStyles> LESS" pour le modifier..
Remplacez tout le code par le code suivant puis enregistrez:
// ** // Mixins // ** .HeaderFont () font-family: @header_font; hauteur de ligne: 1.313em; // ** // Styles // ** body margin: 0; font-family: @default_font; hauteur de ligne: @golden + 0em; // définit la hauteur de ligne régulière sur le nombre d'or a background: transparent; a: lien, a: visité a: focus contour: mince en pointillé; a: actif, a: survol contour: 0; // Échelle typographique classique: si la taille totale par défaut de 16px est définie comme suit: // 9px, 10px, 11px, 12px, 16px, 18px, 21px, 24px, 36px, 48px, 60px, 72px h1 .HeaderFont; taille de police: 3em; marge: 0,563 m 0; h2 .HeaderFont; taille de police: 2,25 µm; marge: 0,625 em 0; h3 .HeaderFont; taille de police: 1.5em; marge: 1.313em 0; h4 .HeaderFont; taille de police: 1.313em; marge: 1.313em 0; h5 .HeaderFont; taille de police: 1.125em; marge: 1.313em 0; h6 .HeaderFont; taille de police: 1em; marge: 0,75 m 0;
Nous avons ajouté un peu de code en même temps. Laisse moi expliquer ce qui se passe.
Mixins
La première chose que vous verrez en haut est le mixin .HeaderFont (). Étant donné que nous allons utiliser la même famille de polices, le même poids et la même hauteur de ligne pour toutes nos balises de titre, nous avons placé toutes les règles relatives à ces propriétés dans un même mixin. Si vous regardez le style de chaque balise de titre, vous verrez le .HeaderFont () mixin appelé en première ligne.
De cette façon, nous pouvons mettre à jour le mixin selon les besoins et tous les styles de balises de titre seront automatiquement mis à jour..
Variables
Vous remarquerez également l'utilisation de certaines variables dans le code, à savoir. @header_font, @police par défaut et @d'or.
La valeur de chacune de ces variables est définie dans le fichier "variables.less" du dossier "UberThemeStyles> LESS". Ce fichier est utilisé en premier lors de la compilation de votre code LESS, ce qui signifie que les variables qu’il contient peuvent être utilisées dans n’importe quel autre fichier LESS..
Nous utilisons les variables @header_font et @police par défaut définir le nom des polices à utiliser dans votre thème de sorte qu'il devienne très facile de passer d'un choix à un autre lorsque vous essayez des polices.
le @d'or variable représente une valeur de 1.618, le nombre d'or. Ce numéro a été utilisé depuis l’époque des Grecs de l’Antiquité pour créer de superbes agencements allant de l’art à l’architecture, et nous l’utiliserons intensément tout au long de la conception..
Ajout d'unités aux variables
Il est préférable dans LESS de définir des variables numériques sans unités attachées. Ceci vous permet d'effectuer une arithmétique avec leurs valeurs.
Par exemple, avec mon @d'or variable définie à 1.618 Je peux faire des choses comme multiplier cette valeur, la diviser par deux et ainsi de suite. Cependant, si je l'avais réglé sur 1.618em, je pourrais avoir des problèmes avec certains calculs que je pourrais vouloir effectuer..
Il est donc toujours préférable de définir les variables sous forme de chiffres uniquement, puis d'attacher des unités dans les styles ou mixins actuels..
Vous pouvez ajouter des unités de la manière suivante:
@variable + 0em
@variable + 0rem
@variable + 0%
Donc, en un mot, ajoutez simplement l'unité que vous souhaitez utiliser comme si vous effectuiez un calcul d'addition, avec une valeur de zéro définie sur cette unité..
Échelle typographique
Les tailles de police sont toutes définies sur une échelle typographique classique, convertie en em au lieu de px valeur basée sur la taille de police par défaut la plus courante (16px).
Ce faisant, nous obtenons l’attrait esthétique et la lisibilité de l’échelle, mais si un fournisseur ou un utilisateur modifie la taille de police par défaut à une valeur autre que 16 px, l’échelle entière se déplacera proportionnellement..
Marge des étiquettes de titre
Avec un standardisé em hauteur de ligne basée sur toutes les en-têtes, il est important d'ajuster les marges pour que les en-têtes aient une belle apparence et soient lisibles lorsqu'ils sont placés les uns sous les autres, ainsi que lorsqu'ils sont placés dans le flux de texte normal.
Les valeurs utilisées dans les marges sont celles que j'ai personnellement trouvées comme étant les meilleures pour chaque balise de titre. Vous verrez l'effet de ces paramètres dans l'étape suivante.
Rafraîchissez votre front-end. Cela devrait maintenant ressembler à ceci:
Nous allons maintenant sélectionner les polices qui seront utilisées pour l’en-tête et le texte normal. Nous allons créer le reste de la mise en page et du design du thème autour de ces sélections de polices..
Dans cette approche, nous ne commençons pas par une maquette de Photoshop, mais vous devriez toujours avoir une idée essentielle du type de style général souhaité. Je choisis une palette de couleurs douce et claire, avec un style plat mais légèrement texturé. Je souhaite donc que les polices de caractères relativement douces et claires y soient associées..
Rendez-vous sur Google Fonts et choisissez une police pour vos en-têtes, ainsi qu'une police pour votre texte normal, en veillant à vérifier leur apparence selon différentes tailles et, le cas échéant, des grammages: http://www.google.com/ polices /
J'ai fini par choisir Oxygen pour le texte d'en-tête et Open Sans pour le texte normal.
Une fois que vos polices sont sélectionnées, vous pouvez les ajouter à votre thème..
Ouvrez le fichier "default.hbs" à partir du dossier racine de votre thème..
Sous le ! Modes comment et au-dessus du lien vers votre feuille de style, ajoutez la ligne suivante et enregistrez:
Remarque: Pour créer une URL pour une ou plusieurs polices Google:
http://fonts.googleapis.com/css?family=Font+Name + des signes| symbole: à la fin du nom de la police, suivi de valeurs séparées par des virgules, par exemple. : 300 400 700,0000italic, 400italic, 700italic Ouvrez le fichier "variables.less" du dossier "UberThemeStyles> LESS" pour le modifier..
Localisez ces deux lignes:
@default_font: Arial, Helvetica, sans-serif; @header_font: Arial, Helvetica, sans serif;
Éditez-les pour lire:
@default_font: 'Open Sans', Arial, Helvetica, sans-serif; @header_font: 'Oxygen', Arial, Helvetica, sans serif;
Dans votre fichier "typography.less", ajoutez un poids de la police de 400 à votre .HeaderFont () mixin:
.HeaderFont () font-family: @header_font; hauteur de ligne: 1.313em; poids de la police: 400;
Toujours dans votre fichier "typography.less", ajoutez un poids de la police de 300 à votre corps style:
corps 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;
Remarque: Je pensais que ces poids étaient les meilleurs pour ces polices, et pour le style de lumière que je recherche..
Rafraîchissez votre front-end. Vous devriez maintenant voir vos choix de polices en place:
Avant de passer à la dernière partie de notre série de didacticiels, nous devons prendre en charge un ou deux détails de style. Dans le prochain épisode, nous examinerons la couleur et définirons certains paramètres de base de la mise en page..
