Typography

Placeholders

md-tracking--10
%md-tracking--10 {}
Sass (Scss)
Click to expand

Description

A placeholder for styling a class with the material design tracking of -10.

Used by

md-tracking--5
%md-tracking--5 {}
Sass (Scss)
Click to expand

Description

A placeholder for styling a class with the material design tracking of -5.

Used by

md-tracking-0
%md-tracking-0 {}
Sass (Scss)
Click to expand

Description

A placeholder for styling a class with the material design tracking of 0.

Used by

md-tracking-5
%md-tracking-5 {}
Sass (Scss)
Click to expand

Description

A placeholder for styling a class with the material design tracking of 5.

Used by

md-tracking-10
%md-tracking-10 {}
Sass (Scss)
Click to expand

Description

A placeholder for styling a class with the material design tracking of 10.

Used by

md-tracking-20
%md-tracking-20 {}
Sass (Scss)
Click to expand

Description

A placeholder for styling a class with the material design tracking of 20.

Used by

md-display-4
%md-display-4 {}
Sass (Scss)
Click to expand

Description

A placeholder for the Display 4 typography.

Used by

md-display-3
%md-display-3 {}
Sass (Scss)
Click to expand

Description

A placeholder for the Display 3 typography.

Used by

md-display-2
%md-display-2 {}
Sass (Scss)
Click to expand

Description

A placeholder for the Display 2 typography.

Used by

md-display-1
%md-display-1 {}
Sass (Scss)
Click to expand

Description

A placeholder for the Display 1 typography.

Used by

md-headline
%md-headline {}
Sass (Scss)
Click to expand

Description

A placeholder for the headline typography.

Used by

md-title
%md-title {}
Sass (Scss)
Click to expand

Description

A placeholder for the title typography.

Used by

md-subheading-2
%md-subheading-2 {}
Sass (Scss)
Click to expand

Description

A placeholder for the subheading-2 typography.

Used by

md-subheading-1
%md-subheading-1 {}
Sass (Scss)
Click to expand

Description

A placeholder for the subheading-1 typography.

Used by

md-body-1
%md-body-1 {}
Sass (Scss)
Click to expand

Description

A placeholder for the body-1 typography

Used by

md-body-2
%md-body-2 {}
Sass (Scss)
Click to expand

Description

A placeholder for the body-2 typography

Used by

md-caption
%md-caption {}
Sass (Scss)
Click to expand

Description

A placeholder for the caption typography.

Used by

md-text-left
%md-text-left {}
Sass (Scss)
Click to expand

Description

A simple placeholder for aligning text left.

Used by

md-text-center
%md-text-center {}
Sass (Scss)
Click to expand

Description

A simple placeholder for aligning text center.

Used by

md-text-right
%md-text-right {}
Sass (Scss)
Click to expand

Description

A simple placeholder for aligning text right.

Used by

md-text-justify
%md-text-justify {}
Sass (Scss)
Click to expand

Description

A simple placeholder for aligning text by text-align: justify.

Used by

md-text-capitalize
%md-text-capitalize {}
Sass (Scss)
Click to expand

Description

A simple placeholder for capitalizing text.

Used by

md-text-lowercalse
%md-text-lowercalse {}
Sass (Scss)
Click to expand

Description

A simple placeholder for lowercasing text.

Used by

md-text-uppercase
%md-text-uppercase {}
Sass (Scss)
Click to expand

Description

A simple placeholder for uppercasing text.

Used by

md-text-nowrap
%md-text-nowrap {}
Sass (Scss)
Click to expand

Description

A simple placeholder for allowing no white space wrap.

Used by

md-text-no-select
%md-text-no-select {}
Sass (Scss)
Click to expand

Description

A simple placeholder for setting user-select: none.

Used by

md-font-light
%md-font-light {}
Sass (Scss)
Click to expand

Description

A simple placeholder for setting the font weight to the material design's light weight.

Used by

md-font-regular
%md-font-regular {}
Sass (Scss)
Click to expand

Description

A simple placeholder for setting the font weight to the material design's regular weight.

Used by

md-font-medium
%md-font-medium {}
Sass (Scss)
Click to expand

Description

A simple placeholder for setting the font weight to the material design's medium weight.

Used by

md-font-semibold
%md-font-semibold {}
Sass (Scss)
Click to expand

Description

A simple placeholder for setting the font weight to the material design's semibold weight.

Used by

md-font-bold
%md-font-bold {}
Sass (Scss)
Click to expand

Description

A simple placeholder for setting the font weight to the material design's bold weight.

Used by

Variables

md-typography-extended
$md-typography-extended: true !default;
Sass (Scss)

Description

Boolean if the typography should extend the base html tags as well.

Type

Boolean
md-typography-include-text-container
$md-typography-include-text-container: true !default;
Sass (Scss)

Description

Boolean if the text container class name should be created by default. This class name is really used to keep a max line-width for text.

Type

Boolean
md-typography-include-utilities
$md-typography-include-utilities: true !default;
Sass (Scss)

Description

Boolean if common text positioning/transforms/styles class names should be included by default.

Type

Boolean
md-font-name
$md-font-name: Roboto !default;
Sass (Scss)

Description

The font name to use throughout the application. It is recommended to use Roboto or Noto, but it can be whatever.

Type

String
md-font-family
$md-font-family: '#{$md-font-name}', sans-serif !default;
Sass (Scss)

Description

The font family for the application. This only combines the $md-font-name with a fallback font of sans-serif.

Type

String

Used by

md-typography-max-line-length
$md-typography-max-line-length: 640px !default;
Sass (Scss)

Description

The max length a line of text can be.

Type

Number

Used by

md-html-min-width
$md-html-min-width: 100% !default;
Sass (Scss)

Description

The min width to apply to the html tag. This is set mostly if you are using components that rely on hiding the main window's toolbar to prevent scrolling.

Setting this value to null will not update the html with the min-width.

Type

Number

Used by

md-font-light
$md-font-light: 300 !default;
Sass (Scss)

Description

The light text weight.

Type

Number

Used by

md-font-regular
$md-font-regular: 400 !default;
Sass (Scss)

Description

The regular text weight.

Type

Number

Used by

md-font-medium
$md-font-medium: 500 !default;
Sass (Scss)

Description

The medium text weight.

Type

Number

Used by

md-font-semibold
$md-font-semibold: 600 !default;
Sass (Scss)

Description

The semibold text weight.

Type

Number

Used by

md-font-bold
$md-font-bold: 700 !default;
Sass (Scss)

Description

The bold text weight.

Type

Number

Used by

md-display-4-font-size
$md-display-4-font-size: 112px !default;
Sass (Scss)

Description

The .md-display-4 font size.

Type

Number

Used by

md-display-4-line-height
$md-display-4-line-height: 128px !default;
Sass (Scss)

Description

The .md-display-4 line height.

Type

Number

Used by

md-display-3-font-size
$md-display-3-font-size: 56px !default;
Sass (Scss)

Description

The .md-display-3 font size.

Type

Number

Used by

md-display-3-line-height
$md-display-3-line-height: 84px !default;
Sass (Scss)

Description

The .md-display-3 line height.

Type

Number

Used by

md-display-2-font-size
$md-display-2-font-size: 45px !default;
Sass (Scss)

Description

The .md-display-2 font size.

Type

Number

Used by

md-display-2-line-height
$md-display-2-line-height: 48px !default;
Sass (Scss)

Description

The .md-display-2 line height.

Type

Number

Used by

md-display-1-font-size
$md-display-1-font-size: 34px !default;
Sass (Scss)

Description

The .md-display-1 font size.

Type

Number

Used by

md-display-1-line-height
$md-display-1-line-height: 40px !default;
Sass (Scss)

Description

The .md-display-1 line height.

Type

Number

Used by

md-headline-font-size
$md-headline-font-size: 24px !default;
Sass (Scss)

Description

The .md-headline font size.

Type

Number

Used by

md-headline-line-height
$md-headline-line-height: 32px !default;
Sass (Scss)

Description

The .md-headline line height.

Type

Number

Used by

md-title-font-size
$md-title-font-size: 20px !default;
Sass (Scss)

Description

The .md-title font size.

Type

Number

Used by

md-title-line-height
$md-title-line-height: 28px !default;
Sass (Scss)

Description

The .md-title line height.

Type

Number

Used by

md-subheading-mobile-font-size
$md-subheading-mobile-font-size: 16px !default;
Sass (Scss)

Description

The `.md-subheading-1and.md-subheading-2` font size for mobile devices.

Type

Number

Used by

md-subheading-desktop-font-size
$md-subheading-desktop-font-size: 15px !default;
Sass (Scss)

Description

The `.md-subheading-1and.md-subheading-2` font size for desktop screens.

Type

Number

Used by

md-subheading-2-line-height
$md-subheading-2-line-height: 28px !default;
Sass (Scss)

Description

The .md-subheading-2 line height.

Type

Number

Used by

md-subheading-1-line-height
$md-subheading-1-line-height: 24px !default;
Sass (Scss)

Description

The .md-subheading-1 line height.

Type

Number

Used by

md-body-mobile-font-size
$md-body-mobile-font-size: #{$md-font-size-base}px !default;
Sass (Scss)

Description

The .md-body-1 and .md-body-2 font size for mobile devices.

Type

Number

Used by

md-body-desktop-font-size
$md-body-desktop-font-size: 13px !default;
Sass (Scss)

Description

The .md-body-1 and .md-body-2 font size for desktop screens.

Type

Number

Used by

md-body-2-line-height
$md-body-2-line-height: 24px !default;
Sass (Scss)

Description

The .md-body-2 font size.

Type

Number

Used by

md-body-1-line-height
$md-body-1-line-height: 20px !default;
Sass (Scss)

Description

The .md-body-1 font size.

Type

Number

Used by

md-caption-font-size
$md-caption-font-size: 12px !default;
Sass (Scss)

Description

The .md-caption font size.

Type

Number

Used by

md-line-height
$md-line-height: 20 / $md-font-size-base !default;
Sass (Scss)

Description

The line height to use on almost all elements.

Type

Number

Used by

Functions

get-font-suffix
@function get-font-suffix($font-weight) {}
Sass (Scss)
Click to expand

Description

Converts a font weight into the google font suffix.

Parameters

NameDescriptionTypeDefault value
$font-weight

The font weight to convert

Number

Returns

String

the font suffix

Requires

Used by

str-replace
@function str-replace($string, $search, $replace) {}
Sass (Scss)
Click to expand

Description

Replace $search with $replace in $string

Parameters

NameDescriptionTypeDefault value
$string

Initial string

String
$search

Substring to replace

String
$replace

('') - New value

String

Returns

String

Updated string

Used by

Mixins

react-md-typography
@mixin react-md-typography($light-theme: $md-light-theme, $include-media: $md-media-included, $extend-html-tags: $md-typography-extended, $include-text-container: $md-typography-include-text-container, $include-utilities: $md-typography-include-utilities) {}
Sass (Scss)
Click to expand

Description

This includes the CSS for simple typography in react-md. It will update all items to use box-sizing: border-box, set the font family, set the line-height, text-rendering, and create the base class names for the typography. If the $extend-html-tags is true, the h1 - h6, p, and caption tags will be updated with the corresponding CSS class name.

Parameters

NameDescriptionTypeDefault value
$light-theme

Boolean if the application is using the light theme.

Boolean
$md-light-theme
$include-media

Boolean if the media queries should be included.

Boolean
$md-media-included
$extend-html-tags

Boolean if the base html tags should be updated or not.

Boolean
$md-typography-extended
$include-text-container

Boolean if the text container class name should be included.

Boolean
$md-typography-include-text-container
$include-utilities

Boolean if the text helper class names should be included.

Boolean
$md-typography-include-utilities

Requires

Used by

react-md-typography-text-container
@mixin react-md-typography-text-container {}
Sass (Scss)
Click to expand

Description

Creates a utility class name for containing long amounts of text. This is set up to center the text in the page and keep the line width to the $md-typography-max-line-length.

Parameters

None

Requires

Used by

react-md-typography-utilities
@mixin react-md-typography-utilities {}
Sass (Scss)
Click to expand

Description

Creates utility class names for common text positioning and transforms.

Parameters

None

Requires

Used by

host-google-font
@mixin host-google-font($font-name: Roboto, $font-weight: 400, $fonts-url) {}
Sass (Scss)
Click to expand

Description

Creates a font face for a locally hosted google font

Parameters

NameDescriptionTypeDefault value
$font-name

The font name to create a font face for

String
Roboto
$font-weight

The font weight of the google font

Number
400
$fonts-url

The url to your fonts.

String

Examples

Basic Usage Sass

@include host-google-font(Roboto, 400);
@include host-google-font(Roboto, 500, my-special-fonts);
Sass (Scss)

Basic Usage CSS Output

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'),
       local('Roboto-Regular'),
       url(/fonts/roboto/Roboto-Regular.ttf) format('truetype');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto'),
       local('Roboto-Medium'),
       url(my-sepcial-fonts/Roboto-Medium.ttf) format('truetype');
}
Sass (Scss)

Requires

host-material-icons
@mixin host-material-icons($font-url: '/fonts/material-icons') {}
Sass (Scss)
Click to expand

Description

Hosts the material icon font library locally by declaring the font face and the .material-icons CSS class.

Parameters

NameDescriptionTypeDefault value
$font-url

The path to the material icons fonts

String
'/fonts/material-icons'

Examples

Basic Usage Sass

@include host-material-icons('/fonts/material-icons');
Sass (Scss)

Basic Usage CSS Output

 @font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: url(/fonts/material-icons/MaterialIcons-Regular.eot');
   src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url(/fonts/material-icons/MaterialIcons-Regular.woff2') format('woff2'),
        url(/fonts/material-icons/MaterialIcons-Regular.woff') format('woff'),
        url(/fonts/material-icons/MaterialIcons-Regular.ttf') format('truetype');
 }

 .material-icons {
   direction: ltr;
   display: inline-block;
   font-family: 'Material Icons';
   // Support for IE.
   font-feature-settings: 'liga';
   font-size: $md-font-icon-size;
   // Support for Firefox.
   -moz-osx-font-smoothing: grayscale;
   // Support for all WebKit browsers.
   -webkit-font-smoothing: antialiased;
   font-style: normal;
   font-weight: normal;
   height: 1em;
   letter-spacing: normal;
   line-height: 1;
   // Support for Safari and Chrome.
   text-rendering: optimizeLegibility;
   text-transform: none;
   white-space: nowrap;
   width: 1em;
   word-wrap: normal;
}
Sass (Scss)

Requires

react-md-typography-mobile
@mixin react-md-typography-mobile($extend-html-tags: $md-typography-extended) {}
Sass (Scss)
Click to expand

Description

Creates the CSS for typography on mobile devices. If the $extend-html-tags param is true, the h6, h5, h4, and p tags will also be modified. This should most likely be used within a media query.

Parameters

NameDescriptionTypeDefault value
$extend-html-tags

Boolean if the base html tags should be updated.

Boolean
$md-typography-extended

Examples

Example Usage SCSS

@media #{$md-mobile-media} {
  @include react-md-typography-mobile;
}
Sass (Scss)

Requires

Used by

react-md-typography-desktop
@mixin react-md-typography-desktop($extend-html-tags: $md-typography-extended) {}
Sass (Scss)
Click to expand

Description

Creates the CSS for typography on desktop screens. If the $extend-html-tags param is true, the h6, h5, h4, and p tags will also be modified. This should most likely be used within a media query.

Parameters

NameDescriptionTypeDefault value
$extend-html-tags

Boolean if the base html tags should be updated.

Boolean
$md-typography-extended

Examples

Example Usage SCSS

@media #{$md-desktop-media} {
  @include react-md-typography-desktop;
}
Sass (Scss)

Requires

Used by

react-md-typography-media
@mixin react-md-typography-media($extend-html-tags: $md-typography-extended) {}
Sass (Scss)
Click to expand

Description

Includes the mobile and desktop media queries for typography. If the $extend-html-tags param is true, the h6, h5, h4, and p tags will also be modified.

Parameters

NameDescriptionTypeDefault value
$extend-html-tags

Boolean if the base html tags should be updated.

Boolean
$md-typography-extended

Examples

Example Usage SCSS

@include react-md-typography-media;
Sass (Scss)

Requires

Used by

react-md-theme-typography
@mixin react-md-theme-typography($html-class-name, $light-theme: $md-light-theme, $extend-html-tags: $md-typography-extended) {}
Sass (Scss)
Click to expand

Description

Updates the theme of the typography ONLY if the $light-theme does not equal $md-light-theme. You will need to apply this $html-class-name to the html tag to get the effects. This is because the base html tag had the background color set which everything inherits.

Parameters

NameDescriptionTypeDefault value
$html-class-name

The class name to use for the html tag.

String
$light-theme

Boolean if using the light theme.

Boolean
$md-light-theme
$extend-html-tags

Boolean if the base html tags should be styled as well.

Boolean
$md-typography-extended

Examples

Example Usage SCSS

@include react-md-theme-typography(dark-theme, false);
Sass (Scss)

Example Usage CSS Output

.dark-theme {
  background: #303030;
}

.dark-theme .md-headline,
.dark-theme .md-title,
.dark-theme .md-subheading-2,
.dark-theme .md-subheading-1,
.dark-theme .md-body-2,
.dark-theme .md-body-1,
.dark-theme h4,
.dark-theme h3,
.dark-theme h2,
.dark-theme h1,
.dark-theme p {
  color: #fff;
}

.dark-theme .md-display-1,
.dark-theme .md-caption,
.dark-theme h1,
.dark-theme caption {
  color: rgba(#fff, .7);
}
Sass (Scss)

Requires

Used by