Mixins

Reusable CSS for creating custom elements

The OrbitCSS framework uses Sass mixins to avoid the tedious task of re-writing commonly used CSS declarations and to take advantage of being able to pass in arguments to create flexible mixins. You can use these same mixins to extend the framework further and create custom themes.

Responsive mixins

Four mixins that can be used to define styling for specific viewports. These are essentially just shortcuts for pre-defined media queries.

// Apply styling on mobile viewports.
@include small {
  // Your CSS content
}

// Apply styling on medium viewports (tablet) and up.
@include medium {
  // Your CSS content
}

// Apply styling on large viewports (laptops and small desktops) and up.
@include large {
  // Your CSS content
}

// Apply styling on extra large viewports (most desktops).
@include extra-large {
  // Your CSS content
}
Copy

Element color

The element-color mixin is used to build color variations for various modules including buttons, tags, and alerts. If the $color parameter is not set then a default value will be calculated based on the $background parameter using the getTextColor() function.

// Syntax
@mixin element-color($background, $border, $color: getTextColor($background))

// Example for adding a new button color modifier.
.button {
  &.is-orange {
    @include element-color(#e28945, transparent);
  }
}
Copy

Image box

The Image module creates the is-*-square modifiers using the imageBoxSize mixin. This accepts two parameters, one for the width of the box and one for the height. The height value will default to the width if omitted.

// Syntax
@mixin imageBoxSize($width, $height: $width)

// Example for creating an image box with a 2:1 ratio.
.image {
  &.is-ratio-2-1 {
    @include imageBoxSize(600px, 300px);
  }
}
Copy

Column size

The Grid module uses the column-size mixin to create each of the column size modifiers.

// Syntax
@mixin column-size($size, $max-size, $width, $screen)

// Example for creating a column size modifier for 1/8 (12.5%)
.column {
  @include column-size('is-one-eighth', 'full', 12.5%, '');
}
Copy