Margin

.m-a-0 {
	margin: 0 !important;
}
.m-t-0 {
	margin-top: 0 !important;
}
.m-r-0 {
	margin-right: 0 !important;
}
.m-b-0 {
	margin-bottom: 0 !important;
}
.m-l-0 {
	margin-left: 0 !important;
}
.m-x-0 {
	margin-right: 0 !important;
	margin-left: 0 !important;
}
.m-y-0 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.m-a {
	margin: $spacer !important;
}
.m-t {
	margin-top: $spacer-y !important;
}
.m-r {
	margin-right: $spacer-x !important;
}
.m-b {
	margin-bottom: $spacer-y !important;
}
.m-l {
	margin-left: $spacer-x !important;
}
.m-x {
	margin-right: $spacer-x !important;
	margin-left: $spacer-x !important;
}
.m-y {
	margin-top: $spacer-y !important;
	margin-bottom: $spacer-y !important;
}
.m-x-auto {
	margin-right: auto !important;
	margin-left: auto !important;
}

.m-a-sm {
	margin: rhythm($rhythm-small) !important;
}
.m-t-sm {
	margin-top: rhythm($rhythm-small) !important;
}
.m-r-sm {
	margin-right: rhythm($rhythm-small) !important;
}
.m-b-sm {
	margin-bottom: rhythm($rhythm-small) !important;
}
.m-l-sm {
	margin-left: rhythm($rhythm-small) !important;
}
.m-x-sm {
	margin-right: rhythm($rhythm-small) !important;
	margin-left: rhythm($rhythm-small) !important;
}
.m-y-sm {
	margin-top: rhythm($rhythm-small) !important;
	margin-bottom: rhythm($rhythm-small) !important;
}

.m-a-md {
	margin: ($spacer * 1.5) !important;
}
.m-t-md {
	margin-top: ($spacer-y * 1.5) !important;
}
.m-r-md {
	margin-right: ($spacer-y * 1.5) !important;
}
.m-b-md {
	margin-bottom: ($spacer-y * 1.5) !important;
}
.m-l-md {
	margin-left: ($spacer-y * 1.5) !important;
}
.m-x-md {
	margin-right: ($spacer-x * 1.5) !important;
	margin-left: ($spacer-x * 1.5) !important;
}
.m-y-md {
	margin-top: ($spacer-y * 1.5) !important;
	margin-bottom: ($spacer-y * 1.5) !important;
}

.m-a-lg {
	margin: ($spacer * 2) !important;
}
.m-t-lg {
	margin-top: ($spacer-y * 2) !important;
}
.m-r-lg {
	margin-right: ($spacer-y * 2) !important;
}
.m-b-lg {
	margin-bottom: ($spacer-y * 2) !important;
}
.m-l-lg {
	margin-left: ($spacer-y * 2) !important;
}
.m-x-lg {
	margin-right: ($spacer-x * 2) !important;
	margin-left: ($spacer-x * 2) !important;
}
.m-y-lg {
	margin-top: ($spacer-y * 2) !important;
	margin-bottom: ($spacer-y * 2) !important;
}

Padding

.p-a-0 {
	padding: 0 !important;
}
.p-t-0 {
	padding-top: 0 !important;
}
.p-r-0 {
	padding-right: 0 !important;
}
.p-b-0 {
	padding-bottom: 0 !important;
}
.p-l-0 {
	padding-left: 0 !important;
}
.p-x-0 {
	padding-right: 0 !important;
	padding-left: 0 !important;
}
.p-y-0 {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.p-a {
	padding: $spacer !important;
}
.p-t {
	padding-top: $spacer-y !important;
}
.p-r {
	padding-right: $spacer-x !important;
}
.p-b {
	padding-bottom: $spacer-y !important;
}
.p-l {
	padding-left: $spacer-x !important;
}
.p-x {
	padding-right: $spacer-x !important;
	padding-left: $spacer-x !important;
}
.p-y {
	padding-top: $spacer-y !important;
	padding-bottom: $spacer-y !important;
}

.p-a-sm {
	padding: rhythm($rhythm-small) !important;
}
.p-t-sm {
	padding-top: rhythm($rhythm-small) !important;
}
.p-r-sm {
	padding-right: rhythm($rhythm-small) !important;
}
.p-b-sm {
	padding-bottom: rhythm($rhythm-small) !important;
}
.p-l-sm {
	padding-left: rhythm($rhythm-small) !important;
}
.p-x-sm {
	padding-right: rhythm($rhythm-small) !important;
	padding-left: rhythm($rhythm-small) !important;
}
.p-y-sm {
	padding-top: rhythm($rhythm-small) !important;
	padding-bottom: rhythm($rhythm-small) !important;
}

.p-a-md {
	padding: ($spacer * 1.5) !important;
}
.p-t-md {
	padding-top: ($spacer-y * 1.5) !important;
}
.p-r-md {
	padding-right: ($spacer-y * 1.5) !important;
}
.p-b-md {
	padding-bottom: ($spacer-y * 1.5) !important;
}
.p-l-md {
	padding-left: ($spacer-y * 1.5) !important;
}
.p-x-md {
	padding-right: ($spacer-x * 1.5) !important;
	padding-left: ($spacer-x * 1.5) !important;
}
.p-y-md {
	padding-top: ($spacer-y * 1.5) !important;
	padding-bottom: ($spacer-y * 1.5) !important;
}

.p-a-lg {
	padding: ($spacer * 2) !important;
}
.p-t-lg {
	padding-top: ($spacer-y * 2) !important;
}
.p-r-lg {
	padding-right: ($spacer-y * 2) !important;
}
.p-b-lg {
	padding-bottom: ($spacer-y * 2) !important;
}
.p-l-lg {
	padding-left: ($spacer-y * 2) !important;
}
.p-x-lg {
	padding-right: ($spacer-x * 2) !important;
	padding-left: ($spacer-x * 2) !important;
}
.p-y-lg {
	padding-top: ($spacer-y * 2) !important;
	padding-bottom: ($spacer-y * 2) !important;
}

Borders

.b-ra-0 {
	border-radius: 0 !important;
}

.b-a-0 {
    border: 0 !important;
}

.b-t-0 {
	border-top: 0 !important;
}

.b-b-0 {
	border-bottom: 0 !important;
}

.b-l-0 {
	border-left: 0 !important;
}

.b-r-0 {
	border-right: 0 !important;
}

.b-a-1 {
	border: 1px solid $color-city !important;
}

.b-t-1 {
	border-top: 1px solid $color-city !important;
}

.b-b-1 {
	border-bottom: 1px solid $color-city !important;
}

.b-t-2 {
	border-top: 2px solid $color-city !important;
}

.b-b-2 {
	border-bottom: 2px solid $color-city !important;
}

.b-t-3 {
	border-top: 3px solid $color-city !important;
}

.b-b-3 {
	border-bottom: 3px solid $color-city !important;
}

.b-t-4 {
	border-top: 4px solid $color-city !important;
}

.b-b-4 {
	border-bottom: 4px solid $color-city !important;
}

Remove border-top on table's first row

.table--b-t-0 {
	tr:first-child td,
	tr:first-child th {
		border-top: 0 !important;
	}
}

Icons

Icon to the left

.u-icon-left {
	padding-left: rem($icon-size + $base-unit);
	background-position: 0 50%;
	padding-left: rhythm($rhythm-small, 1px) + rem($icon-size + $base-unit--text);
	background-position: rhythm($rhythm-small, 1px) 50%;
}

Icon to the right

.u-icon-right {
	padding-right: rem($icon-size + $base-unit);
	background-position: 100% 50%;
	padding-right: rhythm($rhythm-small, 1px) + rem($icon-size + $base-unit--text);
	background-position: calc(100% - #{rhythm($rhythm-small, 1px)}) 50%;
}

Behave like small button on large screens (when only icon and no text is supposed to be visible)

.u-icon-btn-lg {
	@media only screen and (max-width : $screen-lg) {
		padding: rhythm($rhythm-default, 4);
		background-position: center center;
	}
}

Behave like small button on medium screens (when only icon and no text is supposed to be visible)

.u-icon-btn-md {
	@media only screen and (max-width : $screen-md) {
		padding: rhythm($rhythm-default, 4);
		background-position: center center;
	}
}

Behave like small button on small screens (when only icon and no text is supposed to be visible)

.u-icon-btn-sm {
	@media only screen and (max-width : $screen-sm) {
		padding: rhythm($rhythm-default, 4);
		background-position: center center;
	}
}

Behave like small button on x-small screens (when only icon and no text is supposed to be visible)

.u-icon-btn-xs {
	@media only screen and (max-width : $screen-xs) {
		padding: rhythm($rhythm-default, 4);
		background-position: center center;
	}
}

Behave like small button on xx-small screens (when only icon and no text is supposed to be visible)

.u-icon-btn-xxs {
	@media only screen and (max-width : $screen-xxs) {
		padding: rhythm($rhythm-default, 4);
		background-position: center center;
	}
}

Standalone icon button (contaning no text)

.block-icon {
    width: rhythm($block-icon-size);
    height: rhythm($block-icon-size);
    line-height: rhythm($block-icon-size);
    text-align: center;
    background-position: 50% 50%;
    display: inline-block;
    vertical-align: middle;
}

small icon size

.u-icon-small {
	background-size: rem($icon-size - 2);
}

smaller icon size

.u-icon-smaller {
	background-size: rem($icon-size - 8);
}

Buttons

Force full-width on buttons

.btn--block-xxs {
    @media only screen and (max-width : $screen-xxs) {
        width:100%;
    }
}

.btn--block-xs {
    @media only screen and (max-width : $screen-xs) {
        width:100%;
    }
}

.btn--block-sm {
    @media only screen and (max-width : $screen-sm) {
        width:100%;
    }
}

.btn--block-md {
    @media only screen and (max-width : $screen-md) {
        width:100%;
    }
}

Typography

force normal font weight

.u-normal-weight {
	font-weight: normal !important;
}

Force wrap

.u-whitespace-wrap {
	white-space: wrap !important;
}

Force nowrap

.u-whitespace-wrap {
	white-space: nowrap !important;
}

Force underline

.u-underline {
	text-decoration: underline !important;
}

Force no text-decoration

.u-no-underline {
	text-decoration: initial !important;
}

Hide elements

Hide visually but not for screen readers

    .visuallyhidden {
        @include hide-on-screen-width;
    }

Hide on different screen widths and below (visible for screen readers)

.visuallyhidden-on-xx-small-screen {
	@media only screen and (max-width : $screen-xxs) {
		@include hide-on-screen-width;
	}
}

.visuallyhidden-on-x-small-screen {
	@media only screen and (max-width : $screen-xs) {
		@include hide-on-screen-width;
	}
}

.visuallyhidden-on-small-screen {
	@media only screen and (max-width : $screen-sm) {
		@include hide-on-screen-width;
	}
}

.visuallyhidden-on-medium-screen {
	@media only screen and (max-width : $screen-md) {
		@include hide-on-screen-width;
	}
}

.visuallyhidden-on-large-screen {
	@media only screen and (max-width : $screen-lg) {
		@include hide-on-screen-width;
	}
}

Hide for all

.is-hidden {
    display: none;
}

Hide on certain screen size (and above)

.hidden-lg {
	@media only screen and (min-width : $screen-lg) {
		display: none !important;
	}
}

.hidden-md {
	@media only screen and (min-width : $screen-md) {
		display: none !important;
	}
}

.hidden-sm {
	@media only screen and (min-width : $screen-sm) {
		display: none !important;
	}
}

.hidden-xs {
	@media only screen and (min-width : $screen-xs) {
		display: none !important;
	}
}

.hidden-xxs {
	@media only screen and (min-width : $screen-xxs) {
		display: none !important;
	}
}

Align

.u-align-left {
	text-align-last: auto !important;
}

.u-align-right {
	text-align: right !important;
}

.u-align-center {
	text-align: center !important;
}

.u-valign-center {
	vertical-align: middle !important;
}

.u-vertical-align-bottom {
	vertical-align: bottom !important;
}

.pull-right {
    float: right !important;
}

.pull-left {
    float: left !important;
}

Force position property

.u-relative {
	position: relative !important;
}

.u-absolute {
	position: absolute !important;
}

.u-static {
	position: static !important;
}

.u-fixed {
	position: fixed !important;
}

Force display property

.u-display-block {
    display: block !important;
}

.u-display-inline-block {
    display: inline-block !important;
}

.u-display-inline {
    display: inline !important;
}

.u-display-flex {
    display: flex !important;
}

.u-display-table {
    display: table !important;
}

.u-display-table-cell {
    display: table-cell !important;
}

General utilities

.container--fullwidth-on-small-screen {
	@media only screen and (max-width : $screen-md) {
		width: 100% !important;
	}
}

.m-t-md-small-screen {
	@media only screen and (max-width : $screen-sm) {
		margin-top: rhythm();
	}
}

// Force form fields to remain inline even on small screens (no collapsing)
.form-control--no-collapse {
    width: auto !important;
    display: inline-block !important;
}