#Vanilla ######Milkshake Studio

---

##Widths, Margins, and Padding Width: .width(@col, @gutter);
Inner Width: .innerWidth(@col, @gutter, @parentWidth);

Inner width is used inside a parent element that is not 100%. If the parent element is a width of 94% and you want the inner element to be a column or 4 columns and 3 gutteres you would write
.innerWidth(4,3,.94);

This concpet flows through to margins and padding.
Left Margin: .ml(@col, @gutter);
Inner Left Margin: .iml(@col, @gutter, @parentWidth);

Right Margin: .mr(@col, @gutter);
Inner Right Margin: .imr(@col, @gutter, @parentWidth);

Left Padding: .pl(@col, @gutter);
Inner Left Padding: .ipl(@col, @gutter, @parentWidth);

Right Padding: .pr(@col, @gutter);
Inner Right Padding: .ipr(@col, @gutter, @parentWidth);

##Vertical Padding & Margins The global padding and margin helper classes go from 1-10 where 1 = 1vw with fallback to 1 = 10px

**Padding Top:** `.pt1` - `.pt10`
**Padding Bottom:** `.pb1` - `.pb10`

Margin Top: .mt1 - .mt10
Margin Bottom: .mb1 – .mb10

##HTML Attributes:

For some people html attributes are easier to use then classes or mixins. This is why you can write the column width straight in the html. For example:

<div col='9' col-t='6' col-p='12'></div>

will set the width of the element to 9 columns width on regular screen sizes 6 columns width on tablet and 12 columns width on phones.

Inner widths are not accessible by this method yet.