Gaudi Components

Customization Instructions

To customize any of these components, run rails g gaudi:variables

A new directory will be created in the host project containing all the variables used by Gaudi.

You will then need to add @import "gaudi/variables/component_variables" to your application.sass

Note: If you used monet.rb to initiate your project, the above steps have already been done.

Gaudi global variables and default values

// Brand Colors
$brand-primary: #8C4646
$brand-secondary: #D96459
$brand-tertiary: #F2AE72
$brand-contrast: #588C7E
$brand-highlight: #F2E394

// Specially Named colors
$danger-color: #F2DEDE
$warning-color: #FCF8E3
$info-color: #D9EDF7
$success-color: #DFF0D8

// Base layout
$base-border-color: $silver
$base-border-radius: 3px
$base-shadow: 0 3px 4px 0 rgba(0,0,0,.2)
$base-shadow-inset: 0 3px 4px rgba(0,0,0,.2) inset
$base-background-color: $wt
$base-content-top-margin: 30px
$base-content-side-margin: 60px
$base-content-side-margin-mobile: 20px

// Animations
$animation-duration: .2s
$animation-easing: ease-in-out

// Responsive
$screen-phone: 480px
$screen-tablet: 768px
$screen-desktop: 992px
$screen-lg-desktop: 1200px

Utilities

Gaudi also provides many utility classes:

.tac = text-align: center !important
.tar = text-align: right !important
.tal = text-align: left !important

.primary-bg = background-color: $brand-primary !important
.secondary-bg = background-color: $brand-secondary !important
.tertiary-bg = background-color: $brand-tertiary !important
.contrast-bg = background-color: $brand-contrast !important
.highlight-bg = background-color: $brand-highlight !important
.danger-bg = background-color: $danger-color !important
.warning-bg = background-color: $warning-color !important
.info-bg = background-color: $info-color !important
.success-bg = background-color: $success-color !important

.primary-text = color: $brand-primary !important
.secondary-text = color: $brand-secondary !important
.tertiary-text = color: $brand-tertiary !important
.contrast-text = color: $brand-contrast !important
.highlight-text = color: $brand-highlight !important
.danger-text = color: $danger-color !important
.warning-text = color: $warning-color !important
.info-text = color: $info-color !important
.success-text = color: $success-color !important

.mar0a = margin: 0 auto !important

The following classes can have the ## replaced with any multiple of 10 between 0 and 100

.mar## = margin: ##px !important
.mar##t = margin-top: ##px !important
.mar##b = margin-bottom: ##px !important
.mar##tb = margin-top: ##px !important; margin-bottom: ##px !important
.mar##l = margin-left: ##px !important
.mar##r = margin-right: ##px !important
.mar##lr = margin-left: ##px !important; margin-right: ##px !important

.pad## = padding: ##px !important
.pad##t = padding-top: ##px !important
.pad##b = padding-bottom: ##px !important
.pad##tb = padding-top: ##px !important; padding-bottom: ##px !important
.pad##l = padding-left: ##px !important
.pad##r = padding-right: ##px !important
.pad##lr = padding-left: ##px !important; padding-right: ##px !important

The following classes can have the ## replaced with any multiple of 50 between 0 and 500. (Useful for controlling height of graphs)

.h## = height: ##px !important

Media Queries

Gaudi provides xs, sm, and md mixins to help with media queries:

.content
  padding: 100px

  @include xs
    padding: 50px