Typography

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

    For example:

    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:

    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

    For example:

    1. <p class="text-align-center">Center aligned text</p>
    2. <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

    There are several helper classes to control flex model:

    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.

    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

    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-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-9Sets CSS property flex-shrink: 9
    flex-shrink-10Sets CSS property flex-shrink: 10

    For example:

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

    CSS Variables

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

    ← Color Themes