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
no-margin Removes margin
no-margin-left Removes left margin
no-margin-right Removes right margin
no-margin-top Removes left margin
no-margin-bottom Removes bottom margin

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
no-padding Removes padding
no-padding-left Removes left padding
no-padding-right Removes right padding
no-padding-top Removes left padding
no-padding-bottom Removes bottom padding

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:

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>