Web Developer Tools

Custom HTML Classes

Margin & Padding Classes

These are classes that we can add to an HTML element and it'll automatically add the specified margin (space). The list below is for top, can be changed to either: right, left, or bottom. Also, the word "margin" can be changed with "padding" to adding padding to the element instead of margin.

  • .margin-top-0
  • .margin-top-5
  • .margin-top-10
  • .margin-top-15
  • .margin-top-20
  • .margin-top-30
  • .margin-top-40
  • .margin-top-50
  • .margin-top-60
  • .margin-top-70
  • .margin-top-80
  • .margin-top-90
  • .margin-top-100

Font Weight

  • .font-weight-300
  • .font-weight-500
  • .font-weight-600
  • .font-weight-700

Unordered List (bulleted list)

  • .standardized-ul

Italic Text

  • .italic-text

General Classes for Hiding and Showing on Mobile and Desktop

700px

  • .show-on-desktop-small
  • .show-on-mobile-small

1000px

  • .show-on-desktop
  • .show-on-mobile

1200px

  • .show-on-desktop-large
  • .show-on-mobile-large

1550px

  • .show-on-desktop-extra-large
  • .show-on-mobile-extra-large

White Text

  • .light-text

Centered Text

  • .centered-text

No Spacing

  • .no-spacing
  • .no-padding
  • .no-margin

Custom Container Widths (100 to 900)

  • .container-width-100 (100px)

Center Content Vertically

  • .vertical-centered-content

White Background

  • .white-background