Skip to content

Instantly share code, notes, and snippets.

@yllieth
Last active June 16, 2016 06:46
Show Gist options
  • Save yllieth/375e23e02bc505b26e1897ac73b9ec0b to your computer and use it in GitHub Desktop.
Save yllieth/375e23e02bc505b26e1897ac73b9ec0b to your computer and use it in GitHub Desktop.
Foudation utility generator
// A row with fixed height, background-color and text-color. Useful to create topbars of footers
@mixin banner($bg: $body-background, $color: $body-font-color, $height: $banner-height) {
height: $height;
line-height: $height;
background-color: $bg;
color: $color;
};
// Fine positionning mixin. Useful to align rebellious elements
@mixin offset($size, $origin: top) {
position: relative;
#{$origin}: $size;
}
// Add an animation when mouse hovers an element
@mixin hover-transition($property, $value, $duration: 150ms, $transition: ease-in-out) {
transition: $property $duration $transition;
&:hover {
#{$property}: $value;
}
}
// Create a squared container
@mixin square($size) {
display: inline-block;
width: $size;
height: $size;
}
$banner-height: 50px;
$global-spacing: 20px;
$foundation-palette: (
primary: #2199e8,
secondary: #777,
success: #3adb76,
warning: #ffae00,
alert: #ec5840,
);
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;
$body-background: $white;
$body-font-color: $black;
$border-color: $medium-grey;
// spacing
@each $property in (margin, padding) {
.#{$property} { #{$property}: $global-spacing; }
@each $position in (top, right, bottom, left) {
.no-#{$property} { #{$property}: 0 !important;}
.no-#{$property}-#{$position} { #{$property}-#{$position}: 0 !important;}
.#{$property}-#{$position} { #{$property}-#{$position}: $global-spacing !important;}
.#{$property}-#{$position}-double { #{$property}-#{$position}: $global-spacing * 2 !important;}
.#{$property}-#{$position}-half { #{$property}-#{$position}: $global-spacing / 2 !important;}
.border-#{$position} { border-#{$position}: 1px solid $border-color; }
.no-border-#{$position} { border-#{$position}: none; }
}
}
.margin-vertical { margin-top: $global-spacing !important; margin-bottom: $global-spacing !important; }
.margin-vertical-half { margin-top: $global-spacing/2 !important; margin-bottom: $global-spacing/2 !important; }
.margin-vertical-double { margin-top: $global-spacing*2 !important; margin-bottom: $global-spacing*2 !important; }
.margin-horizontal { margin-left: $global-spacing !important; margin-right: $global-spacing !important; }
.margin-horizontal-half { margin-left: $global-spacing/2 !important; margin-right: $global-spacing/2 !important; }
.margin-horizontal-double { margin-left: $global-spacing*2 !important; margin-right: $global-spacing*2 !important; }
// cursors
@each $cursorType in (pointer, help, wait) {
.cursor-#{$cursorType} { cursor: #{$cursorType}; }
}
// colors
@each $name, $color in $foundation-palette {
.color-#{$name} { color: $color; }
.color-#{$name}-hover { @include hover-transition(color, $color); }
.bg-#{$name} { background-color: $color; }
.bg-#{$name}-hover { @include hover-transition(background-color, $color); }
}
@yllieth
Copy link
Author

yllieth commented Jun 16, 2016

The utility.scss generator will create the following classes:

/* spacing */
.margin { margin: 20px; }
.padding { padding: 20px; }
.no-margin { margin: 0px !important; }
.no-padding { padding: 0px !important; }
.no-margin-top { margin-top: 0px !important; }
.no-margin-right { margin-right: 0px !important; }
.no-margin-bottom { margin-bottom: 0px !important; }
.no-margin-left { margin-left: 0px !important; }
.no-padding-top { padding-top: 0px !important; }
.no-padding-right { padding-right: 0px !important; }
.no-padding-bottom { padding-bottom: 0px !important; }
.no-padding-left { padding-left: 0px !important; }
.margin-top { margin-top: 20px !important; }
.margin-right { margin-right: 20px !important; }
.margin-bottom { margin-bottom: 20px !important; }
.margin-left { margin-left: 20px !important; }
.margin-top-half { margin-top: 10px !important; }
.margin-right-half { margin-right: 10px !important; }
.margin-bottom-half { margin-bottom: 10px !important; }
.margin-left-half { margin-left: 10px !important; }
.margin-top-double { margin-top: 40px !important; }
.margin-right-double { margin-right: 40px !important; }
.margin-bottom-double { margin-bottom: 40px !important; }
.margin-left-double { margin-left: 40px !important; }
.padding-top { padding-top: 20px !important; }
.padding-right { padding-right: 20px !important; }
.padding-bottom { padding-bottom: 20px !important; }
.padding-left { padding-left: 20px !important; }
.padding-top-half { padding-top: 10px !important; }
.padding-right-half { padding-right: 10px !important; }
.padding-bottom-half { padding-bottom: 10px !important; }
.padding-left-half { padding-left: 10px !important; }
.padding-top-double { padding-top: 40px !important; }
.padding-right-double { padding-right: 40px !important; }
.padding-bottom-double { padding-bottom: 40px !important; }
.padding-left-double { padding-left: 40px !important; }
.margin-vertical { margin-top: 20px !important; margin-bottom: 20px !important; }
.margin-vertical-half { margin-top: 10px !important; margin-bottom: 10px !important; }
.margin-vertical-double { margin-top: 40px !important; margin-bottom: 40px !important; }
.margin-horizontal { margin-left: 20px !important; margin-right: 20px !important; }
.margin-horizontal-half { margin-left: 10px !important; margin-right: 10px !important; }
.margin-horizontal-double { margin-left: 40px !important; margin-right: 40px !important; }

/* borders */
.border-top: { border-top: 1px solid #cacaca; }
.border-right: { border-right: 1px solid #cacaca; }
.border-bottom: { border-bottom: 1px solid #cacaca; }
.border-left: { border-left: 1px solid #cacaca; }
.no-border-top: { border-top: none; }
.no-border-right: { border-right: none; }
.no-border-bottom: { border-bottom: none; }
.no-border-left: { border-left: none; }

/* cursors */
.cursor-pointer { cursor: pointer; }
.cursor-wait { cursor: wait; }
.cursor-help { cursor: help; }

/* colors */
.color-primary { color:  #2199e8; }
.color-secondary { color: #777; }
.color-success { color: #3adb76; }
.color-warning { color: #ffae00; }
.color-alert { color: #ec5840; }
.color-primary-hover { transition: color 150ms ease-in-out; }
.color-primary-hover::hover { color:  #2199e8; }
.color-secondary-hover { transition: color 150ms ease-in-out; }
.color-secondary-hover::hover { color: #777; }
.color-success-hover { transition: color 150ms ease-in-out; }
.color-success-hover::hover { color: #3adb76; }
.color-warning-hover { transition: color 150ms ease-in-out; }
.color-warning-hover::hover { color: #ffae00; }
.color-alert-hover { transition: color 150ms ease-in-out; }
.color-alert-hover::hover { color: #ec5840; }
.bg-color-primary { bakground-color:  #2199e8; }
.bg-color-secondary { bakground-color: #777; }
.bg-color-success { bakground-color: #3adb76; }
.bg-color-warning { bakground-color: #ffae00; }
.bg-color-alert { bakground-color: #ec5840; }
.bg-color-primary-hover { transition: bakground-color 150ms ease-in-out; }
.bg-color-primary-hover::hover { bakground-color:  #2199e8; }
.bg-color-secondary-hover { transition: bakground-color 150ms ease-in-out; }
.bg-color-secondary-hover::hover { bakground-color: #777; }
.bg-color-success-hover { transition: bakground-color 150ms ease-in-out; }
.bg-color-success-hover::hover { bakground-color: #3adb76; }
.bg-color-warning-hover { transition: bakground-color 150ms ease-in-out; }
.bg-color-warning-hover::hover { bakground-color: #ffae00; }
.bg-color-alert-hover { transition: bakground-color 150ms ease-in-out; }
.bg-color-alert-hover::hover { bakground-color: #ec5840; }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment