Skip to content

Instantly share code, notes, and snippets.

@benbabics
Created January 31, 2013 14:23
Show Gist options
  • Save benbabics/4683172 to your computer and use it in GitHub Desktop.
Save benbabics/4683172 to your computer and use it in GitHub Desktop.
Fortunately Twitter Bootstrap arms us with an arsenal of classnames for components, grids and other UI-goodies. Unfortunately, they don't supply us with something as basic as layout helpers. Here's what I've used:
.margin-top {
margin-top: 20px;
}
.margin-right {
margin-right: 20px;
}
.margin-bottom {
margin-bottom: 20px;
}
.margin-left {
margin-left: 20px;
}
.margin-sides {
margin-right: 20px;
margin-left: 20px;
}
.margin-tops {
margin-top: 20px;
margin-bottom: 20px;
}
.margin-all {
margin-right: 20px;
margin-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
.margin-top-none {
margin-top: 0;
}
.margin-right-none {
margin-right: 0;
}
.margin-bottom-none {
margin-bottom: 0;
}
.margin-left-none {
margin-left: 0;
}
.margin-sides-none {
margin-right: 0;
margin-left: 0;
}
.margin-tops-none {
margin-top: 0;
margin-bottom: 0;
}
.margin-none {
margin-right: 0;
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
}
.padding-top {
padding-top: 20px;
}
.padding-right {
padding-right: 20px;
}
.padding-bottom {
padding-bottom: 20px;
}
.padding-left {
padding-left: 20px;
}
.padding-sides {
padding-right: 20px;
padding-left: 20px;
}
.padding-tops {
padding-top: 20px;
padding-bottom: 20px;
}
.padding-all {
padding-right: 20px;
padding-left: 20px;
padding-top: 20px;
padding-bottom: 20px;
}
.padding-top-none {
padding-top: 0;
}
.padding-right-none {
padding-right: 0;
}
.padding-bottom-none {
padding-bottom: 0;
}
.padding-left-none {
padding-left: 0;
}
.padding-sides-none {
padding-right: 0;
padding-left: 0;
}
.padding-tops-none {
padding-top: 0;
padding-bottom: 0;
}
.padding-none {
padding-right: 0;
padding-left: 0;
padding-top: 0;
padding-bottom: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment