Skip to content

fast css margin and padding helper for bootstrap grid. use simple and intuitive abbreviations for moving blocks with using inline classes on elements directly

Notifications You must be signed in to change notification settings

mkdizajn/Bootstrap-CSS-inline-helper-classes

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Bootstrap fast easy CSS class helpers

  • using it: use reference in your head somewhere
<link rel="stylesheet" type="text/css" href="//goo.gl/Vo43dA">
  • how does it look like,, and work with inspector

explanation

  • 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 do:

explanation

  • Position manipulations ..

explanation

  • 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)
  • Another thing that you can use are this short classes positioning the objects:

    • 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

just take a look at the generated gif's and you'll get the idea :)

cheers, k

About

fast css margin and padding helper for bootstrap grid. use simple and intuitive abbreviations for moving blocks with using inline classes on elements directly

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages