add 'lighter' and 'bolder' font weight classes

[browner12]

these are 2 special values for font weight, that will give their content a font-weight value of 100 more or less than their inherited font-weight.

probably doesn't fully fulfill this issue, #23969, but it's a start

[browner12]

to fix these errors I guess we'd have to update

https://github.com/twbs/bootstrap/blob/v4-dev/.stylelintrc#L21

I can't speak to the original intent behind using this rule, so I'm not sure what the appropriate answer is.

[XhmikosR]

Don't bolder and lighter have numeric equivalents?

[patrickhlauke]

Don't bolder and lighter have numeric equivalents?

they are relative to the inherited/current value, so no

[browner12]

'bold' is equivalent to 700.

'lighter' and 'bolder' are variable, and are either 100 more or less than the value they inherit.

<div style="font-weight:600; ">
     <div style="font-weight:lighter; ">This text will be 500 weight.</div>
     <div style="font-weight:bolder; ">This text will be 700 weight.</div>
</div>

http://htmldog.com/references/css/properties/font-weight/

[XhmikosR]

Yup, I figured so after commenting :)

I pushed a patch to ignore those, let me see if it's passing.

[XhmikosR]

Ok, it's passing, so it's just a matter if we want this in or not. /CC @mdo @andresgalante

[MartijnCuppens]

These utility classes might need more documentation. There will be more people who think these values have numeric equivalents.

[browner12]

sounds good. if it get's accepted i'll add some docs.

[XhmikosR]

It's already been accepted for v4.2 :)

[browner12]

really? link?

[XhmikosR]

What I mean is that the plan is to merge in 4.2. See the project associated with this PR.

[ahtee]

would this need to stay uniform with the other styles and be
lighter -> $font-weight-lighter,
bolder -> $font-weight-bolder, etc?

would there need to be additions to make this work?

[XhmikosR]

Those are CSS values.

[mdo]

Per the conversation at https://github.com/twbs/bootstrap/pull/26580/files#r193721911, let's make these variables so that folks can change them if they so choose. I know these values are inherently relative, but they could easily be remapped to 100 and 900 depending on the situation.

[browner12]

sorry, but I have to disagree with that suggestion. lighter and bolder represent values relative to their parent, not fixed values.

for values like 100 and 900, shouldn't the end user just make their own as needed, like very-light or very-bold?

also, from my experience, most fonts used on websites don't even have more than 3 weights available as part of the font, so the light, normal, and bold usually cover 99% of the use cases.

[mdo]

I understand their intended usage, but people do whatever they want with CSS like this. 😆

My point is, if we include two new variables here, we'll be helping folks who want to have explicit options here. As soon as these become utilities and variables, it's an opportunity to move away from browser default values.

Take this example below: both are valid in their own contexts.

.font-weight-lighter { font-weight-lighter: lighter; }
.font-weight-light { font-weight-lighter: light; }

.font-weight-lighter { font-weight-lighter: 100; }
.font-weight-light { font-weight-lighter: 300; }

[browner12]

alright, the variables have been added.

[mdo]

Thank you!