Skip to content

Latest commit

 

History

History
47 lines (26 loc) · 1.08 KB

File metadata and controls

47 lines (26 loc) · 1.08 KB

# Stupid fast inline class helpers

  • using it: use reference in your head somewhere

`html <link rel="stylesheet" type="text/css" href="//goo.gl/Vo43dA"> `

  • how does it look like,, and work with inspector

![explanation](little_explanation.gif?raw=true, "Little demo :)")

  • meaning of abbreviation

    • mt, mr, mb, ml == margin (top, right, bottom, left)
    • pt, pr, pb, pl == padding (top, right, bottom, left)
  • Let's see what does inline classes does

![explanation](explanation.jpg?raw=true, "Arrows to inline specific functions")

  • Position manipulations ..

![explanation](positions.gif?raw=true, "Position manipulation")

  • Paddings and margins are predefined in this range:

    • 5, 10, 15, 20, 30, 40 and 50 px (positive)
    • 5, 10, 15, 20, 30, 40 and 50 -px (negative)
    • 5, 10, 15, 20, 30, 40 and 50 % (percentage)
  • Position classes are:

    • rel => position relative
    • ab => position absolute
    • abtr => position absolute top right
    • abtl => position absolute top left
    • abbr => position absolute bottom right
    • abbl => position absolute bottom left

cheers, k