Typography

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

Content Spacing

Margin

Margin
marginApplies margin to all sides
margin-leftApplies margin to the left
margin-rightApplies margin to the right
margin-topApplies margin to the top
margin-bottomApplies margin to the bottom
margin-horizontalApplies margin to the left and right
margin-verticalApplies margin to the top and bottom
margin-halfApplies half-value margin to all sides
margin-left-halfApplies half-value margin to the left
margin-right-halfApplies half-value margin to the right
margin-top-halfApplies half-value margin to the top
margin-bottom-halfApplies half-value margin to the bottom
margin-horizontal-halfApplies half-value margin to the left and right
margin-vertical-halfApplies half-value margin to the top and bottom
no-marginRemoves margin
no-margin-leftRemoves left margin
no-margin-rightRemoves right margin
no-margin-topRemoves top margin
no-margin-bottomRemoves bottom margin
no-margin-horizontalRemoves left and right margins
no-margin-verticalRemoves 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
paddingApplies padding to all sides
padding-leftApplies padding to the left
padding-rightApplies padding to the right
padding-topApplies padding to the top
padding-bottomApplies padding to the bottom
padding-horizontalApplies padding to the left and right
padding-verticalApplies padding to the top and bottom
padding-halfApplies half-value padding to all sides
padding-left-halfApplies half-value padding to the left
padding-right-halfApplies half-value padding to the right
padding-top-halfApplies half-value padding to the top
padding-bottom-halfApplies half-value padding to the bottom
padding-horizontal-halfApplies half-value padding to the left and right
padding-vertical-halfApplies half-value padding to the top and bottom
no-paddingRemoves padding
no-padding-leftRemoves left padding
no-padding-rightRemoves right padding
no-padding-topRemoves top padding
no-padding-bottomRemoves bottom padding
no-padding-horizontalRemoves left and right paddings
no-padding-verticalRemoves 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-leftThe element will float on the left side of its containing block
float-rightThe element will float on the right side of its containing block
float-noneDisable 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-leftThe inline contents are aligned to the left edge of the line box
text-align-rightThe inline contents are aligned to the right edge of the line box
text-align-centerThe inline contents are centered within the line box
text-align-justifyThe 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-blockElement will be displayed as block element
display-inlineElement will be displayed as inline element
display-inline-blockElement will be displayed as inline block element
display-flexElement will be displayed as flex element
display-inline-flexElement will be displayed as inline flex element
display-noneElement 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-rowThe direction is laid out in a line
flex-direction-row-reverseLike flex-direction-row, but reversed
flex-direction-columnThe direction in which lines are stacked
flex-direction-column-reverseLike 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-startPack flex items from the start
justify-content-centerPack items around the center
justify-content-flex-endPack flex items from the end
justify-content-space-betweenDistribute items evenly. The first item is flush with the start, the last is flush with the end
justify-content-space-aroundDistribute items evenly. Items have a half-size space on either end
justify-content-space-evenlyDistribute items evenly. Items have equal space around them
justify-content-stretchDistribute items evenly. Stretch 'auto'-sized items to fit the container
justify-content-startPack items from the start
justify-content-endPack items from the end
justify-content-leftPack items from the left
justify-content-rightPack 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-startPack flex items from the start
align-content-flex-endPack flex items from the end
align-content-centerPack items around the center
align-content-space-betweenDistribute items evenly. The first item is flush with the start, the last is flush with the end
align-content-space-aroundDistribute items evenly. Items have a half-size space on either end
align-content-stretchDistribute 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-startPack flex items from the start
align-items-flex-endPack flex items from the end
align-items-centerPack items around the center
align-items-stretchDistribute 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-startPut the flex item at the start
align-self-flex-endPut the flex item at the end
align-self-centerPut the item around the center
align-self-stretchStretch '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-0Sets CSS property flex-shrink: 0
flex-shrink-1Sets CSS property flex-shrink: 1
flex-shrink-2Sets CSS property flex-shrink: 2
flex-shrink-3Sets CSS property flex-shrink: 3
flex-shrink-4Sets CSS property flex-shrink: 4
flex-shrink-5Sets CSS property flex-shrink: 5
flex-shrink-6Sets CSS property flex-shrink: 6
flex-shrink-7Sets CSS property flex-shrink: 7
flex-shrink-8Sets CSS property flex-shrink: 8
flex-shrink-9Sets CSS property flex-shrink: 9
flex-shrink-10Sets 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;
}