Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #25832
Closed
Open
Issue created Mar 13, 2018 by Administrator@rootContributor

Type scale map and type utility classes. (Font)

Created by: dceluis

Hi! First of all, sorry for broken english. Please admins feel free to edit / ask for clarification is something doesn't make sense.

So, as I understand it, bootstrap has some options for the use of typography. Like $font-size-lg and $font-size-sm variables and the .small and <small /> tags. Also, there's the possibility to use the .h1 ... .h6 classes to change the font size of any element.

Still I find that lg and sm font-sizes are insufficient for every case. And even though the .hX could serve this purpose, they have some inherent semantic sense that is inappropriate in many cases. The docs even intruct to use them:

for when you want to match the font styling of a heading, but cannot use the associated HTML element.

It'd be useful to have dedicated: size-1 to size-6 (or better name) that are only supposed to modify the element's font size. These classes would be dependent on a potential $type-scale variable like:

$type-scale: (
  1:  2.5,
  2:  2,
  3:  1.75,
  4:  1.5,
  5:  1.25,
  6:  1,
  7:  .8,
  8:  .7
);

This could be implemented with a function called font-size($scale-number).

I understand one of the counterpoints to this feature is that it can be implemented with custom, per-project css, and it's true. But I can see the benefit of having it by default in the framework. One way it could be extended is having another line-height-for($scale-number) function that calculates a line height that is a multiple of the base line spacing ($line-height-base * $font-size-base), as an example. So size-1 could, for example, apply:

font-size: font-size(1);
line-height: line-height-for(1);

Notice that there's space for additional font sizes smaller than the base, (7 & 8). This is more practic than having $font-size-{sm/lg/base/smaller/larger/super-large}.

In summary, the things why I'd like to see this implemented are:

  1. Consistency / One source of truth. Font size units not
    scattered around / duplicated.
  2. Versatility. size-1 would allow developers to just modify the sizing aspect of an element's typography. Leaving .hX classes for proper title-replication.
  3. Example value. By implementing a good-practice, well defined type scale.
  4. Extensibility. A couple of issues in the past were raised, in my opinion partly, because of a lack of font related features. Some of them: #24856 (closed) , #18137 (closed), #23119 (closed) .
  5. Easy to implement.

I'd love to hear your opinion, cheers!

Assignee
Assign to
Time tracking