Typography

Typography

Framework7 comes with a lot of additional CSS helper classes to help you with extra styling and formatting.

Content Spacing

Margin

Margin
margin	Applies margin to all sides
margin-left	Applies margin to the left
margin-right	Applies margin to the right
margin-top	Applies margin to the top
margin-bottom	Applies margin to the bottom
margin-horizontal	Applies margin to the left and right
margin-vertical	Applies margin to the top and bottom
margin-half	Applies half-value margin to all sides
margin-left-half	Applies half-value margin to the left
margin-right-half	Applies half-value margin to the right
margin-top-half	Applies half-value margin to the top
margin-bottom-half	Applies half-value margin to the bottom
margin-horizontal-half	Applies half-value margin to the left and right
margin-vertical-half	Applies half-value margin to the top and bottom
no-margin	Removes margin
no-margin-left	Removes left margin
no-margin-right	Removes right margin
no-margin-top	Removes top margin
no-margin-bottom	Removes bottom margin
no-margin-horizontal	Removes left and right margins
no-margin-vertical	Removes top and bottom margins

For example:

<p class="margin-left">Text with left margin</p>
<p class="margin-right">Text with right margin</p>

Padding

Padding
padding	Applies padding to all sides
padding-left	Applies padding to the left
padding-right	Applies padding to the right
padding-top	Applies padding to the top
padding-bottom	Applies padding to the bottom
padding-horizontal	Applies padding to the left and right
padding-vertical	Applies padding to the top and bottom
padding-half	Applies half-value padding to all sides
padding-left-half	Applies half-value padding to the left
padding-right-half	Applies half-value padding to the right
padding-top-half	Applies half-value padding to the top
padding-bottom-half	Applies half-value padding to the bottom
padding-horizontal-half	Applies half-value padding to the left and right
padding-vertical-half	Applies half-value padding to the top and bottom
no-padding	Removes padding
no-padding-left	Removes left padding
no-padding-right	Removes right padding
no-padding-top	Removes top padding
no-padding-bottom	Removes bottom padding
no-padding-horizontal	Removes left and right paddings
no-padding-vertical	Removes top and bottom paddings

For example:

<p class="padding-left">Text with left padding</p>
<p class="padding-right">Text with right padding</p>

Float Elements

float-left	The element will float on the left side of its containing block
float-right	The element will float on the right side of its containing block
float-none	Disable floating

For example

<div class="float-left">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda earum tempora, voluptatem quas? Beatae cumque, ea porro, eius sed nemo impedit tempora nesciunt, nam necessitatibus quis animi. Nobis, dicta, sit!</p>
</div>
<div class="float-right">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda earum tempora, voluptatem quas? Beatae cumque, ea porro, eius sed nemo impedit tempora nesciunt, nam necessitatibus quis animi. Nobis, dicta, sit!</p>
</div>

Text Alignment

text-align-left	The inline contents are aligned to the left edge of the line box
text-align-right	The inline contents are aligned to the right edge of the line box
text-align-center	The inline contents are centered within the line box
text-align-justify	The inline contents are justified

For example:

<p class="text-align-center">Center aligned text</p>
<p class="text-align-right">Right aligned text</p>

Element Display

display-block	Element will be displayed as block element
display-inline	Element will be displayed as inline element
display-inline-block	Element will be displayed as inline block element
display-flex	Element will be displayed as flex element
display-inline-flex	Element will be displayed as inline flex element
display-none	Element will be hidden

For example:

<div class="display-flex">
  <div>Hello</div>
  <div>World!</div>
</div>

Flexbox

There are several helper classes to control flex model:

Flex Direction

The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of their container.

flex-direction-row	The direction is laid out in a line
flex-direction-row-reverse	Like `flex-direction-row`, but reversed
flex-direction-column	The direction in which lines are stacked
flex-direction-column-reverse	Like `flex-direction-column`, but reversed

Justify Content

The CSS justify-content property defines how the browser distributes space between and around content items along the main axis of their container.

justify-content-flex-start	Pack flex items from the start
justify-content-center	Pack items around the center
justify-content-flex-end	Pack flex items from the end
justify-content-space-between	Distribute items evenly. The first item is flush with the start, the last is flush with the end
justify-content-space-around	Distribute items evenly. Items have a half-size space on either end
justify-content-space-evenly	Distribute items evenly. Items have equal space around them
justify-content-stretch	Distribute items evenly. Stretch ‘auto’-sized items to fit the container
justify-content-start	Pack items from the start
justify-content-end	Pack items from the end
justify-content-left	Pack items from the left
justify-content-right	Pack items from the right

Align Content

The CSS align-content property defines how the browser distributes space between and around content items along the cross-axis of their container, which is serving as a flexbox container.

align-content-flex-start	Pack flex items from the start
align-content-flex-end	Pack flex items from the end
align-content-center	Pack items around the center
align-content-space-between	Distribute items evenly. The first item is flush with the start, the last is flush with the end
align-content-space-around	Distribute items evenly. Items have a half-size space on either end
align-content-stretch	Distribute items evenly. Stretch ‘auto’-sized items to fit the container

Align Items

The CSS align-items property defines how the browser distributes space between and around flex items along the cross-axis of their container. This means it works like justify-content but in the perpendicular direction.

align-items-flex-start	Pack flex items from the start
align-items-flex-end	Pack flex items from the end
align-items-center	Pack items around the center
align-items-stretch	Distribute items evenly. Stretch ‘auto’-sized items to fit the container

Align Self

The align-self CSS property aligns flex items of the current flex line overriding the align-items value. If any of the item’s cross-axis margin is set to auto, then align-self is ignored.

align-self-flex-start	Put the flex item at the start
align-self-flex-end	Put the flex item at the end
align-self-center	Put the item around the center
align-self-stretch	Stretch ‘auto’-sized items to fit the container

Flex Shrink

The flex-shrink CSS property specifies the flex shrink factor of a flex item. Flex items will shrink to fill the container according to the flex-shrink number, when the default width of flex items is wider than the flex container.

flex-shrink-0	Sets CSS property `flex-shrink: 0`
flex-shrink-1	Sets CSS property `flex-shrink: 1`
flex-shrink-2	Sets CSS property `flex-shrink: 2`
flex-shrink-3	Sets CSS property `flex-shrink: 3`
flex-shrink-4	Sets CSS property `flex-shrink: 4`
flex-shrink-5	Sets CSS property `flex-shrink: 5`
flex-shrink-6	Sets CSS property `flex-shrink: 6`
flex-shrink-7	Sets CSS property `flex-shrink: 7`
flex-shrink-8	Sets CSS property `flex-shrink: 8`
flex-shrink-9	Sets CSS property `flex-shrink: 9`
flex-shrink-10	Sets CSS property `flex-shrink: 10`

For example:

<div class="display-flex justify-content-space-between align-items-flex-start">
  <div class="flex-shrink-0">Item 1</div>
  <div class="align-self-center">Item 2</div>
  <div class="align-self-flex-end">Item 3</div>
</div>

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

:root {
  --f7-typography-padding: 16px;
  --f7-typography-margin: 16px;
}

← Color Themes

Hairlines →