Milligram: Les tailles de titre doivent être ajustées.

Créé le 23 nov. 2016  ·  18Commentaires  ·  Source: milligram/milligram

J'ai commencé à utiliser Milligram 1.2.0 principalement pour une belle feuille de style pour générer de la documentation. Comparé à de nombreux frameworks CSS, il a fière allure sur papier.

Mais les en-têtes! Je ne peux pas faire la différence entre <h2> et <h3> , franchement. Chrome me dit que <h2> obtient 4.2rem et que <h3> obtient 3.6rem , mais vous ne pouvez pas le dire en le regardant.

Milligram pourrait-il passer à des tailles d'en-tête qui semblent progressivement plus petites? Ou peut-être pourriez-vous m'indiquer un framework CSS qui fournit déjà un bon style orienté vers les documents. Merci

improvement question

Commentaire le plus utile

@nateberkopec Got c'est logique. Je vais donner un PR pour cela. voyons à quoi ils ressemblent

Tous les 18 commentaires

Je dois dire que je suis d'accord. Utilisateur avide du framework mais les en-têtes laissent à désirer.

Salut @garretwilson @nateberkopec

Bon problème, les gars! Je vais faire quelques tests pour voir comment nous pouvons améliorer cela. A propos de cela, avez-vous des suggestions?

BTW, j'aimerais partager avec vous une nouvelle fonctionnalité qui a été ajoutée récemment pour assurer la qualité du framework. Il analyse et signale toutes les modifications apportées au cadre. S'il y a un détail qui passe inaperçu, il sera identifié après comparaison avec l'ancienne version. Ceci est le test de régression visuelle et il devrait aider avec les améliorations visuelles des prochaines versions.

@cjpatoilo L'échelle typographique traditionnelle est couverte ici et ici

Je pense que le principal problème ici est que l'échelle n'est pas suivie pour h1 et h2 - elles doivent être plus grandes.

Sur la base de ces ressources, voici une suggestion:

h1
    font-size: 6.0rem

h2
    font-size: 4.8rem

h3
    font-size: 3.6rem

h4
    font-size: 2.4rem

h5
    font-size: 2.1rem

h6
    font-size: 1.8rem

Je ne sais pas si j'aime les choses aussi grandes. Mais de toute façon, je ne peux toujours pas faire la différence entre h2 et h3. Je pense qu'ils doivent diminuer de taille plus rapidement.

Cherchez peut-être ici des idées:

Si vous voulez une grande taille de corps (comme le fait Milligram à 16px), h1 sera probablement assez grand. C'est juste comme ça que fonctionne la typographie. Vous ne pouvez pas avoir de petits en-têtes et de gros corps de texte, essayer de stocker 5 tailles d'en-tête différentes dans une plage trop petite signifie que vous ne pouvez pas distinguer les en-têtes (comme maintenant). Milligram doit soit réduire son corps de texte (je ne suis pas en faveur de cela) ou agrandir ses en-têtes.

Voici un autre outil pour jouer avec les échelles typographiques .

Si vous acceptez que H6 ait la même taille que la copie du corps, voici une alternative:

h1
    font-size: 4.8rem

h2
    font-size: 3.6rem

h3
    font-size: 2.4rem

h4
    font-size: 2.1rem

h5
    font-size: 1.8rem

h6
    font-size: 1.6rem

Si vous acceptez que H6 ait la même taille que la copie du corps…

Je viens d'essayer les trois premiers d'entre eux, et je les aime beaucoup mieux !! Et je suis d'accord avec H6 étant de la même taille que le corps. Je vous recommande de mettre simplement H6 en gras ou quelque chose par défaut. Mais même si vous ne le faites pas, personnellement, je descendrai rarement à H6 de toute façon.

Les tailles de police mobiles devront également être corrigées - elles sont beaucoup trop similaires pour être utilisables. Je recommanderais simplement d'utiliser la même échelle pour mobile.

Est-ce donc prévu pour une nouvelle version de sitôt?

Je vois donc que cela n'est pas entré dans la v1.2.2. Une raison pourquoi? Dois-je faire une pull request?

Salut @garretwilson @nateberkopec Beau travail. Cela signifie beaucoup pour moi ♥

La discussion est ouverte! Ce framework est un projet open source et tout le monde peut y contribuer. J'espère que plus de gens ont le même intérêt et contribuent que vous. Je vais passer en revue tout ce dont on a parlé ici et j'y travaillerai dès que possible.

Hey @garretwilson npm install .. npm install détendez-vous !

Hey @garretwilson npm installer

Pourriez-vous clarifier ce que vous entendez par là? J'ai téléchargé la version 1.2.2 du site et cela ne semble pas être inclus. Êtes-vous en train de dire que "npm install" me donnera quelque chose de plus récent qui n'a pas été publié? Est-ce la version v1.2.3? Je suis comme un ordinateur, facilement confus à moins que vous ne me le disiez.

..et détendez-vous!

Je vérifiais simplement le statut parce que je n'étais pas clair si cela était prévu ou publié ou quoi. J'essayais également de préciser que je proposais de m'aider, mais je n'étais pas sûr que quelqu'un l'ait déjà fait. Dites-moi comment je peux vous aider.

@nateberkopec n'est-il pas le h1 existant à 5,0rem (50px)? Proposez-vous que nous le diminuions? à 4.8rem?

@sudheerDev Je ne suis pas typographe, je sais juste ce que je lis sur Internet. Si vous lisez les liens ci-dessus sur les échelles typographiques, vous verrez pourquoi il est de 4,8 au lieu de 5 (essentiellement - l'espacement entre les tailles d'en-tête suit un modèle).

@nateberkopec Got c'est logique. Je vais donner un PR pour cela. voyons à quoi ils ressemblent

@nateberkopec merci pour le PR !. je suis occupé donc je ne peux pas pousser

@garretwilson @nateberkopec @sudheerDev Enfin, j'ai pu lancer la nouvelle version avec ces contributions. J'ai fait une recherche des tailles de titre en fonction des cadres principaux et finalement je suis arrivé dans une situation plus adéquate de ce qui était demandé. J'espère que tu aimes!

Les tailles de titre ont beaucoup plus de sens, maintenant, merci.

Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

roryprimrose picture roryprimrose  ·  7Commentaires

davedele picture davedele  ·  5Commentaires

dnohr picture dnohr  ·  7Commentaires

negativefix picture negativefix  ·  7Commentaires

schirrel picture schirrel  ·  3Commentaires