Vuetify: [Bug Report] [Regression] Font sizes for headers are broken

[DedDorito]

Versions and Environment

Vuetify: 0.17.1
Vue: 2.5.4
Browsers: Firefox 57.0
OS: Windows 10

Steps to reproduce

Use any of the header tags.

Expected Behavior

Font sizes to match those described on https://vuetifyjs.com/style/typography.

Actual Behavior

Font sizes are greatly reduced / completely unset.

Reproduction Link

https://codepen.io/anon/pen/xPPdLP

[DedDorito]

To add a few of my thoughts after speaking with jacek in Discord (thanks for explaining):

I understand not wanting to collide with user / framework CSS as much as possible, but removing all default styling for header elements doesn't seem like a sane default. It seems like a very large change that only benefits small edge cases. To make matters worse, the styling will fall back to browser defaults, which leads to inconsistent behavior and visuals depending on browser.

Personally, the original defaults described on the typography page make sense to me. If a user needs to override the Vuetify styles, they should simply override them, rather than forcing everyone else to override them instead (or use classes). I'm not much of a semantic purist, so there's really no point in using header elements anymore if I have to also add classes to all of them.

This change (IMO) makes it so the minority can use the defaults while the majority has to override them or add additional classes. All other major frameworks have default styling for header elements - this change caught me off guard simply because it's so odd more than anything. Thoughts on possibly reverting this?

Thanks!

[KaelWD]

I don't think this is something we are likely to bring back, the defaults weren't that good anyway. If you use <h*> tags correctly, display-4 is way too large for most cases so you'll have to override them with classes anyway.

the styling will fall back to browser defaults, which leads to inconsistent behavior and visuals depending on browser

The CSS reset is still in place, so default heading styles will be the same across all browsers.

[DedDorito]

Hey KaelWD,

I'd have to agree the default sizes themselves could maybe use some tweaking, but it still seems like a net positive to have at least some type of styling set.

With that being said, if it turns out that the answer to reverting is a definite no, are you guys open to at least renaming the classes (or maybe adding a new set)? Could Vuetify maybe do something like v-header-1 or v-h1 up to 6 or something?

I know this is trivial for a dev to implement on their side, so this isn't a blocker by any means, but the default sizes currently are almost always going to be useless due to how tiny they are. Having a set of sane default sizes that most could use would still be beneficial in my eyes. Possibly even adding it as a component, but I'm asssuming that isn't something you'd want to add (i.e. v-h1 Bleh element would get replaced with <h1 class="whatever-needed-here">Bleh</h1>?

[KaelWD]

You should still be using <h1> .. <h6> for SEO and accessibility reasons, you just have to add an appropriate class to them now https://vuetifyjs.com/style/typography. If you want to create your own set of components in that fashion, you can use the createSimpleFunctional helper class:

import { createSimpleFunctional } from 'vuetify/es5/util/helpers'

Vue.component('v-h1', createSimpleFunctional('display-4', 'h1', 'h1')) // class, element, name
...

There is also an existing issue to add a v- prefix to all the vuetify classes: #1561

[DedDorito]

You should still be using <h1> .. <h6> for SEO and accessibility reasons, you just have to add an
appropriate class to them now https://vuetifyjs.com/style/typography.

I know there are still reasons, I was more so coming at it from a purely visual standpoint :P

The CSS reset is still in place, so default heading styles will be the same across all browsers.

Then why not make the defaults somewhat sane and reasonable?

I understand it's trivial for a dev to create their own classes, rules, or even components, but why have defaults that get overridden nearly 100% of the time when you could have some sane defaults that instead only get overridden 10% of the time?

I'm not advocating to get rid of the display-4, display-3, headline, title classes, etc. as they're part of the official MD spec, but nearly every framework out there has some basic styling for headers. It seems odd for Vuetify to simply drop them all together.

Feel free to close this if the changes are here to stay - definitely don't want to take up anyone's time on something that won't change.

[gpassero]

Could you please at least provide us the old CSS code to keep our nice old font style as was designed in v0.16?

[KaelWD]

All these variables are still there, you should be able to just copy this into your stylus somewhere.

https://github.com/vuetifyjs/vuetify/blob/fd93077c180873dd99fc7958af3bc3c2339346fc/src/stylus/elements/_headings.styl#L6-L17

[shanemgrey]

If this change is not going to be reverted, the docs need updating for clarity. https://vuetifyjs.com/style/typography currently seems to indicate that the headings have the styles (and huge sizes) as shown in the examples, and that there are also classes that can be used to style other elements the same as the headers.

It seems @KaelWD is now saying that the heading elements won't be getting styling (other than a CSS reset), and that anything which is to be styled to match the rest of the framework will have to have one of those "display-1" etc classes specified.

I am in agreement with @DedDorito that the heading elements should have a default style that is inline with the theme without needing a class also specified. But if that isn't the decision of the dev team, clarifying the docs would be helpful.

[KaelWD]

@shanemgrey vuetifyjs/vuetifyjs.com#89

[timobehrens]

Phew.. this change threw me off as well after updating the dependencies... If you want to get back styles from 0.16.x paste this in your main.styl:

h1 {
  @extend .display-4;
}
h2 {
  @extend .display-3;
}
h3 {
  @extend .display-2;
}
h4 {
  @extend .display-1;
}
h5 {
  @extend .headline;
}
h6 {
  @extend .title;
}

[johnleider]

Documentation has been updated to reflect this change https://next.vuetifyjs.com/style/typography

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord