Skip to content

Latest commit

 

History

History
173 lines (156 loc) · 5.16 KB

README.md

File metadata and controls

173 lines (156 loc) · 5.16 KB
Raw

Tachyons Helpful Classes

Star this repo ⭐

Note: this is a personal preference on what I would use in Tachyons, which classes I feel like are most useful.

If you think theres important classes that I missed or you have a question please feel free to raise an issue

Margin and Padding:

  • Base:
    • p = padding
    • m = margin
  • Modifiers:
    • a = all
    • h = horizontal
    • v = vertical
    • t = top
    • r = right
    • b = bottom
    • l = left
    • Media Query Extensions:
      • ns = not-small
      • m = medium
      • l = large
  • Sizes:

    • 0 = none

    • 1 = 1st step in spacing scale

    • 2 = 2nd step in spacing scale

    • 3 = 3rd step in spacing scale

    • 4 = 4th step in spacing scale

    • 5 = 5th step in spacing scale

    • 6 = 6th step in spacing scale

    • 7 = 7th step in spacing scale

      • .pa0 { padding: 0; }
      • .pl1 { padding-left: .25rem; }
      • .pr2 { padding-right: .5rem; }
      • .pb3 { padding-bottom: 1rem; }
      • .pt4 { padding-top: 2rem; }
      • .pv5 { padding-top: 4rem; padding-bottom: 4rem; }
      • .ph6 { padding-left: 8rem; padding-right: 8rem; }
      • .ma7 { margin: 16rem; }
      • .ml0 { margin-left: 0; }
      • .mr1 { margin-right: .25rem; }
      • .mb2 { margin-bottom: .5rem; }
      • .mt3 { margin-top: 1rem; }
      • .mv4 { margin-top: 2rem; margin-bottom: 2rem; }
      • .mh5 { margin-left: 4rem; margin-right: 4rem; }

Borders:

  • .br0 { border-radius: 0; }
  • .br1 { border-radius: .125rem; }
  • .br2 { border-radius: .25rem; }
  • .br3 { border-radius: .5rem; }
  • .br4 { border-radius: 1rem; }
  • .br-100 { border-radius: 100%; }
  • .shadow-1 { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); }
  • .shadow-2 { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); }
  • .shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); }
  • .shadow-4 { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); }
  • .shadow-5 { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); }

Positioning:

  • .dn { display: none; }

  • .di { display: inline; }

  • .db { display: block; }

  • .dib { display: inline-block; }

  • .fl { float: left; display: inline; }

  • .fr { float: right; display: inline; }

  • .fn { float: none; }

  • .tl { text-align: left; }

  • .tr { text-align: right; }

  • .tc { text-align: center; }

  • .tj { text-align: justify; }

  • .center { margin-right: auto; margin-left: auto; }

  • .flex { display: flex; }

  • .flex-column { flex-direction: column; }

  • .flex-row { flex-direction: row; }

  • .flex-wrap|nowrap { flex-wrap: wrap|nowrap; }

  • .justify-center|start|end|around|between { justify-content: center|start|end|around|between; }

  • .align-center/end/start { align-items: center/end/start; }

Height and Widths:

  • Base:

  • w = width

  • h = height

  • Modifiers

  • 1 = 1st step in width scale

  • 2 = 2nd step in width scale

  • 3 = 3rd step in width scale

  • 4 = 4th step in width scale

  • 5 = 5th step in width scale

  • Media Query Extensions:

    • ns = not-small
    • m = medium
    • l = large

  • Sizes

  • -10 = literal value 10%

  • -20 = literal value 20%

  • -25 = literal value 25%

  • -30 = literal value 30%

  • -33 = literal value 33%

  • -34 = literal value 34%

  • -40 = literal value 40%

  • -50 = literal value 50%

  • -60 = literal value 60%

  • -70 = literal value 70%

  • -75 = literal value 75%

  • -80 = literal value 80%

  • -90 = literal value 90%

  • -100 = literal value 100%

  • -third = 100% / 3 (Not supported in opera mini or IE8)

  • -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8)

    • .h1 { height: 1rem; }

    • .h2 { height: 2rem; }

    • .h3 { height: 4rem; }

    • .h4 { height: 8rem; }

    • .h5 { height: 16rem; }

    • .h-25 { height: 25%; }

    • .h-50 { height: 50%; }

    • .h-75 { height: 75%; }

    • .h-100 { height: 100%; }

    • .min-h-100 { min-height: 100%; }

    • .vh-25 { height: 25vh; }

    • .vh-50 { height: 50vh; }

    • .vh-75 { height: 75vh; }

    • .vh-100 { height: 100vh; }

    • .w1 { width: 1rem; }

    • .w2 { width: 2rem; }

    • .w3 { width: 4rem; }

    • .w4 { width: 8rem; }

    • .w5 { width: 16rem; }

    • .w-10 { width: 10%; }

    • .w-20 { width: 20%; }

    • .w-25 { width: 25%; }

    • .w-30 { width: 30%; }

    • .w-33 { width: 33%; }

    • .w-34 { width: 34%; }

    • .w-40 { width: 40%; }

    • .w-50 { width: 50%; }

    • .w-60 { width: 60%; }

    • .w-70 { width: 70%; }

    • .w-75 { width: 75%; }

    • .w-80 { width: 80%; }

    • .w-90 { width: 90%; }

    • .w-100 { width: 100%; }

    • .w-third { width: calc( 100% / 3 ); }

    • .w-two-thirds { width: calc( 100% / 1.5 ); }

Font:

  • .f1 { font-size: 3rem; }
  • .f2 { font-size: 2.25rem; }
  • .f3 { font-size: 1.5rem; }
  • .f4 { font-size: 1.25rem; }
  • .f5 { font-size: 1rem; }
  • .f6 { font-size: .875rem; }
  • .f7 { font-size: .75rem; }
  • .ttc { text-transform: capitalize; }
  • .ttl { text-transform: lowercase; }
  • .ttu { text-transform: uppercase; }
  • .ttn { text-transform: none; }

Resources

  • Main Tachyons website Link.
  • Tachyons's css file on github Link (if you actually need more classes to play with click that link).