Skip to content
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.

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

Typography #205

Closed
jelbourn opened this issue Mar 18, 2016 · 19 comments
Closed

Typography #205

jelbourn opened this issue Mar 18, 2016 · 19 comments
Assignees
Labels
feature This issue represents a new feature or feature request rather than a bug or bug fix

Comments

@jelbourn
Copy link
Member

https://www.google.com/design/spec/style/typography.html

Combination of documentation and CSS.

@jelbourn jelbourn added the feature This issue represents a new feature or feature request rather than a bug or bug fix label Mar 18, 2016
@jelbourn jelbourn added this to the alpha.3 milestone Mar 18, 2016
@jelbourn jelbourn modified the milestones: alpha.8, alpha.3 Apr 21, 2016
@sendilkumarn
Copy link
Contributor

can we add it per component or use typography.scss ?

@sendilkumarn sendilkumarn mentioned this issue Jun 8, 2016
3 tasks
@sendilkumarn
Copy link
Contributor

if this is fine I will update the remaining components

@jelbourn
Copy link
Member Author

jelbourn commented Jun 8, 2016

To clarify: this issue is about making typography styles available for users to have in their own applications. I'm going to mark it as blocked since this will be influenced by how we approach theming as well.

@michaelwarren1106
Copy link

what's the implementation plan for typography? Are you guys planning on making this be a web component, or basically a stylesheet that will need to be imported/required into app components individually?

I've been debating the "proper" approach to typography and how best to componentize re-usable styles that generally are "global" in nature but dont really need a web component to be executed.

If you could outline some thoughts on your approach and the pros/cons thereof, that would be awesome!

@jelbourn
Copy link
Member Author

Current thinking is to have an @angular2-material/typography package that includes a css file that you can drop into a <link> element in your index.html (or concat into other css files with your own build). We haven't finalized on this approach yet, though.

@michaelwarren1106
Copy link

with shadomDOM coming, and native in angular2, will that approach work? I've done a little bit of testing and it seems that this approach wont work since styles in the parent page wont bleed into a shadowDOM component...

@kylecordes
Copy link

I stumbled across this today while looking for an answer to the following: For applications starting to use Angular Material 2 today, prior to the typography implementation, what is best interim short-term solution for styling application content that is not a angular-material Component? For example, is it best to grab one of the other Material implementations, and use it alongside, for styling other content? Any advice for which one fits in with the least trouble?

@csabattilas
Copy link

csabattilas commented Oct 12, 2016

Does it makes sense using typography from material 1 (no shadowDOM usage), untill this at least started?

@csabattilas
Copy link

Will typography support theming? Like using different font for md-display and body copy.

thanks

@jelbourn jelbourn modified the milestone: alpha.8 Nov 1, 2016
@michaeljota
Copy link

@krigton it's blocked cause of theming, so I would say it will.

@jelbourn jelbourn removed the blocked label Nov 14, 2016
@shlomiassaf
Copy link
Contributor

We've started using a webpack loader to override styles, since CSS comes bundled in we can't actually change much, only colors.

We also had hard time changing the font.

This is the loader angular2-restyle-loader
It's fresh out of the oven.

We use it to re-compile SCSS so we can set the variables.
It can also do a lot more with higher maintenance risk.

For example, you can restyle the slide toggle
image

To this:
image

@ghost
Copy link

ghost commented Feb 24, 2017

I have combined a few SCSS libraries, cleaned up the code, and compiled a SCSS typography implementation that accurately follows the material design specification. The typography is responsive based on the component's dimensions optimized for flexbox. The font-colors options enable a simple way to the meet web accessibility contrast guidelines considering the component's theme. Dynamic font imports are supported. Implementation options are flexible via SCSS mixins, custom css namespaces, and/or generated classes which make style specificity simple available globally, and at the component level. Maintenance and extensibility aspects were considered. I have never contributed to github before, and would appreciate any guidance. If development of this feature is underway I hope my Typography research may be helpful.

@the-ult
Copy link

the-ult commented Mar 10, 2017

@jelbourn
What is the status of the typography and theming?

Current thinking is to have an @angular2-material/typography package that includes a css file that you can drop into a element in your index.html (or concat into other css files with your own build). We haven't finalized on this approach yet, though.

i.e.:
I would like to use another font instead of the robot-font., so that it will be used for material components as well. What/where would be the proper way to define/overwrite the Roboto font?

@michaelz
Copy link

michaelz commented Mar 20, 2017

I used the following css to override the font, while waiting for another solution:

/*
 * Override default material design fonts ($mat-font-family)
 */

$mat-font-family: 'Titillium Web',sans-serif;

.font-override { // body or wrapper class
  .mat-button-toggle,
  %mat-button-base,
  .mat-button,
  .mat-raised-button,
  .mat-fab,
  .mat-icon-button,
  .mat-mini-fab,
  .mat-card,
  .mat-checkbox,
  .mat-input-container,
  .mat-list,
  .mat-menu-item,
  .mat-radio-button,
  .mat-select,
  .mat-list .mat-list-item .mat-list-item-content,
  .mat-nav-list .mat-list-item .mat-list-item-content,
  .mat-simple-snackbar,
  .mat-tab-label,
  .mat-slide-toggle-content,
  .mat-toolbar,
  .mat-tooltip  {
    font-family: $mat-font-family;
  }
}

This can be improved I guess.

@jvbianchi
Copy link

jvbianchi commented Apr 22, 2017

#4162 might be the beginning of a implementation

@crisbeto crisbeto self-assigned this May 8, 2017
@jelbourn
Copy link
Member Author

jelbourn commented Jun 6, 2017

Closing this as this is now in master and will be part of the next release.

@jelbourn jelbourn closed this as completed Jun 6, 2017
@another-guy
Copy link

@jelbourn that's really good news!

Does @angular/material2 has an official release plan with any kind of ETAs? I didn't see .beta7 anywhere in the GitHub projects nor in Milestones sections.

@mtpultz
Copy link

mtpultz commented Jul 6, 2017

Documentation for typography: https://material.angular.io/guide/typography

andrewseguin pushed a commit to andrewseguin/components that referenced this issue Oct 15, 2018
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
feature This issue represents a new feature or feature request rather than a bug or bug fix
Projects
None yet
Development

No branches or pull requests