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 left 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 left 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:
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).
.ios {
--f7-typography-padding: 15px;
--f7-typography-margin: 15px;
}
.md {
--f7-typography-padding: 16px;
--f7-typography-margin: 16px;
}
.aurora {
--f7-typography-padding: 15px;
--f7-typography-margin: 15px;
}