this content was originally posted here.

CSS Margin and Padding Framework Generator - How to use it

TL;DR

I used to just write this manually, but this generator is much easier than manually typing these margin and padding values.

So what this does is generate css for each step so if i do the default settings it will give you the main classes: where you replace the # with the step number. 

  • m# = margin #px
  • mt# = margin top #px
  • mb# = margin bottom #px
  • ml# = margin left #px
  • mr# = margin right #px
  • p# = padding #px
  • pt# = padding top #px
  • pb# = padding bottom #px
  • pl# = padding left #px
  • pr# = padding right #px

This tool generates the minified css for these values all the way up to 1000px if you really wanted that much css waste!

How do you use the classes?

Simply add an element like a div and add the class names, like this:

<div class='mb10 p20'>will give you a div with a margin on the bottom of 10px and padding 20 pixels</div>

Here is a generated working example

See the Pen Margin and Padding Framework tool testing by Luke (@vanderzone) on CodePen.

and here is a link to the tool:

CSS Margin and Padding Framework Generator

database file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/db.db
comments_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/comments.db ($db_comments)
views_dbfile: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/views.db
$dbfood_file: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/db/food.db
db_linx: /home/kruxor/Dropbox/ssl.kruxor.com/root/kruxor.com/linx/db/db.db
Classes Loaded:
class/answers.class.php
class/code.class.php
class/comments.class.php
class/content.class.php
class/core.class.php
class/crud.class.php
class/crumbs.class.php
class/featured.class.php
class/food.class.php
class/functions.class.php
class/images.class.php
class/import.class.php
class/links.class.php
class/questions.class.php
class/template.class.php
class/tv.class.php
class/user.class.php
class/utilities.class.php
class/views.class.php
class/widget.class.php
Class Extend Loaded: class/extends/moo.extend.php
Class Extend Loaded: class/extends/osrs_item_data.extend.php
Class Extend Loaded: class/extends/osrs_slayer.extend.php
Class Extend Loaded: class/extends/searches.extend.php
Core Database Connected: moo.db
moo add_to_menu:
Class Extend Auto Initialized as: moo
Core Database Connected: osrs_item_data.db
osrs_item_data add_to_menu:
Class Extend Auto Initialized as: osrs_item_data
Core Database Connected: osrs_slayer.db
osrs_slayer add_to_menu:
Class Extend Auto Initialized as: osrs_slayer
Core Database Connected: searches.db
searches add_to_menu:
Class Extend Auto Initialized as: searches
$user_logged_in:
user access level:
pages:
$p1:view
$p2:content
$p3:H8d6G
$p4:css-margin-and-padding-framework-generator--how-to-use-it
$p5:
$p6:
$p:/view/content/H8d6G/css-margin-and-padding-framework-generator--how-to-use-it/
Using Template: view-content.html