Skip to content

Add documentation about .font-weight-bolder/lighter #27678

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Nov 18, 2018
Merged

Add documentation about .font-weight-bolder/lighter #27678

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
73102c4
Add documentation about .font-weight-bolder/lighter
ysds Nov 16, 2018
fc4f17f
Update text.md
XhmikosR Nov 16, 2018
5818066
Merge branch 'v4-dev' into patch-1
XhmikosR Nov 18, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions site/docs/4.1/utilities/text.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,10 @@ Quickly change the weight (boldness) of text or italicize text.

{% capture example %}
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Relative bolder than the parent element.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Relative lighter than the parent element.</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should add a note that this depends on the system font and the effect might not be visible on some systems.

For example on Windows with Firefox I get:

2018-11-16_10-33-45

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That screenshot is the expected result. That parent is .bd-example (the font weight are inherited from body)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, that might need a note or, not.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we should just use the same descriptions as in the mozilla docs?
image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In that case, we should probably link to the MDN doc as a reference.

<p class="font-italic">Italic text.</p>
{% endcapture %}
{% include example.html content=example %}
Expand Down