/vuetify-cheat-sheet

Vuetify Cheat Sheet

Vuetify Cheat Sheet

Styles

breakpoint

  • xs
  • sm
  • md
  • lg
  • xl

Display

  • .d-{value}
  • .d-{breakpoint}-{value}

value

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

Flex direction

  • .flex-{value}
  • .flex-{breakpoint}-{value}

value

  • row
  • row-reverse
  • column
  • column-reverse

Flex justify

  • .justify-{value}
  • .justify-{breakpoint}-{value}

value

  • start
  • end
  • center
  • space-between
  • space-around

Flex align

  • .align-{value}
  • .align-{breakpoint}-{value}

value

  • start
  • end
  • center
  • baseline
  • stretch

Flex align self

  • .align-self-{value}
  • .align-self-{breakpoint}-{value}

value

  • start
  • end
  • center
  • baseline
  • stretch/auto

Flex wrap

  • .flex-{value}
  • .flex-{breakpoint}-{value}

value

  • nowrap
  • wrap
  • wrap-reverse

Flex order

  • .order-{value}
  • .order-{breakpoint}-{value}

value

  • first
  • last
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

Flex align content

  • .align-content-{value}
  • .align-{breakpoint}-content-{value}

value

  • start
  • end
  • center
  • space-between
  • space-around/stretch

Flex grow and shrink

  • flex-{breakpoint}-{condition}-{state}

condition

  • grow
  • shrink

state

  • 0
  • 1

Float

  • .float-{value}
  • .float-{breakpoint}-{value}

value

  • left
  • right
  • none

Spacing

  • .{property}{direction}-{size}

property

  • m - applies margin
  • p - applies padding

direction

  • t - applies the spacing for margin-top and padding-top
  • b - applies the spacing for margin-bottom and padding-bottom
  • l - applies the spacing for margin-left and padding-left
  • r - applies the spacing for margin-right and padding-right
  • s - applies the spacing for
    • margin-left/padding-left (in LTR mode) and
    • margin-right/padding-right (in RTL mode)
  • e - applies the spacing for
    • margin-right/padding-right (in LTR mode) and
    • margin-left/padding-left (in RTL mode)
  • x - applies the spacing for
    • margin-left/padding-left and
    • margin-right/padding-right
  • y - applies the spacing for
    • margin-top/padding-top and
    • margin-bottom/padding-bottom
  • a - applies the spacing for
    • margin-left/padding-left and
    • margin-right/padding-right and
    • margin-top/padding-top and
    • margin-bottom/padding-bottom

size

  • 0     - sets margin or padding to 0
  • 1     - sets margin or padding to 4px
  • 2     - sets margin or padding to 8px
  • 3     - sets margin or padding to 12px
  • 4     - sets margin or padding to 16px
  • 5     - sets margin or padding to 20px
  • 6     - sets margin or padding to 24px
  • 7     - sets margin or padding to 28px
  • 8     - sets margin or padding to 32px
  • 9     - sets margin or padding to 36px
  • 10    - sets margin or padding to 40px
  • 11    - sets margin or padding to 44px
  • 12    - sets margin or padding to 48px
  • 13    - sets margin or padding to 52px
  • 14    - sets margin or padding to 56px
  • 15    - sets margin or padding to 60px
  • 16    - sets margin or padding to 64px
  • n1    - sets margin to -4px
  • n2    - sets margin to -8px
  • n3    - sets margin to -12px
  • n4    - sets margin to -16px
  • n5    - sets margin to -20px
  • n6    - sets margin to -24px
  • n7    - sets margin to -28px
  • n8    - sets margin to -32px
  • n9    - sets margin to -36px
  • n10   - sets margin to -40px
  • n11   - sets margin to -44px
  • n12   - sets margin to -48px
  • n13   - sets margin to -52px
  • n14   - sets margin to -56px
  • n15   - sets margin to -60px
  • n16   - sets margin to -64px
  • auto - sets margin to auto

Typography

  • .text-{value}
  • .text-{breakpoint}-{value}

value

  • h1 -> { font-size: 6rem; font-weight: 300; }
  • h2 -> { font-size: 3.75rem; font-weight: 300; }
  • h3 -> { font-size: 3rem; font-weight: 400; }
  • h4 -> { font-size: 2.125rem; font-weight: 400; }
  • h5 -> { font-size: 1.5rem; font-weight: 400; }
  • h6 -> { font-size: 1.25rem; font-weight: 500; }
  • subtitle-1
  • subtitle-2
  • body-1
  • body-2
  • button
  • caption
  • overline

Text alignment

  • .text-{value}
  • .text-{breakpoint}-{value}

value

  • left
  • center
  • right

Text decoration

  • text-decoration-none
  • text-decoration-overline
  • text-decoration-underline
  • text-decoration-line-through

Text wrapping and overflow

  • .text-wrap      -> { white-space: nowrap }
  • .text-no-wrap   -> { white-space: nowrap; }
  • .text-truncate -> { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  • .text-break     -> { overflow-wrap: break-word; word-break: break-word; }

Text transform

  • .text-none
  • .text-lowercase
  • .text-uppercase
  • .text-capitalize

Text opacity

  • .text--primary      - 87%
  • .text--secondary - 60%
  • .text--disabled    - 37%

Font weights

  • .font-weight-thin     - 100
  • .font-weight-light    - 300
  • .font-weight-regular - 400
  • .font-weight-medium   - 500
  • .font-weight-bold     - 700
  • .font-weight-black    - 900