Mixins

Global mixins for our framework. These mixins are global and don’t apply specifically to a single element/block component.

add-clearfix

Allows you to clear an element that contains floats.

@include add-clearfix();

Example Usage

// SCSS input
.wrapper {
  @include add-clearfix();
}

// CSS output
.wrapper:after {
  content: '';
  display: table;
  clear: both;
}

remove-clearfix

Removes the clearfix styles from an element. This is typically used when a clearfix is inherited on an element and you’d like it removed.

@include remove-clearfix();

add-float-modifiers

Adds the float modifier classes to an element.

@include add-float-modifiers( $left, $right );
Parameter Type Default
$left Class name $class-float-left
$right Class name $class-float-right

Example Usage

// SCSS input
.wrapper .block {
  display: block;
  @include add-float-modifiers();
}

// CSS output
.wrapper .block {
  display: block;
}
.wrapper .block.float-left {
  float: left;
}
.wrapper .block.float-right {
  float: right;
}

add-size

Shorthand for adding width and height dimensions to an element. If you only pass in a width, the height will be set to equal the width and create a square. If either the width or height are unit-less, it defaults to pixels.

@include add-size( $height, $width );
Parameter Type Default
$width Unit (number, pixel, percentage) None
$height Unit (number, pixel, percentage) false

Example Usage

// SCSS input
.my-special-box {
  @include add-size(100px, 50px);
  ...
}

// CSS output
.my-special-box {
  width: 100px;
  height: 50px;
  ...
}

add-vertical-center

Centers an element vertically within it’s parent. Parent element may need to have transform-style: preserve-3d; to prevent half pixel bluring.

@include add-vertical-center( $percent );
Parameter Type Default
$percent Unit (percentage) 50%

Example Usage

// SCSS input
.box {
  @include add-vertical-center();
}

// CSS output
.box {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

add-scrollable

Makes touch devices use momentum-based scrolling for the given element.

@include add-scrollable();

make-triangle

Creates the base styles for creating CSS triangles.

@include make-triangle();

add-triangle-styles

Uses the 0x0 element with borders trick to draw arrow size, color and direction.

@include add-triangle-styles( $size, $color, $direction );
Parameter Type Options Default
$size Unit (pixel, em, rem) None
$color Color None
$direction String 'up', 'right', 'down', 'left', 'up-right', 'up-left', 'down-right', 'down-left' None

add-text-truncate

Truncates text with an ellipsis. Element this is applied to must be block or inline-block.

@include add-text-truncate( $display );
Parameter Type Default
$display Display property (block, inline-block) block

Example Usage

// SCSS input
.demo-text-truncate {
  @include add-text-truncate();
}

// CSS output
.demo-text-truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
This is some text that will get truncated

add-text-hide

Hides text from an element. This is most commonly used as an image replacement technique for hiding text in an element to reveal a background image.

@include add-text-hide();

Example Usage

// SCSS input
.logo {
  ...
  @include add-text-hide();
}

// CSS output
.logo {
  ...
  font-size: 0;
  line-height: 0;
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
<div class="logo">Demo Logo Image Replace</div>

make-anchor

Creates the base anchor styles using the $anchors map for defaults.

@include make-anchor( $options );
Parameter Type Default
$options Map $anchors

Example Usage

This example is how BaseWeb outputs base anchor styles. This can also be used to style context specific anchors such as in footers or sidebars.

// SCSS input
a {
  @include make-anchor();
}

// CSS output
a {
  color: #2196F3;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
a:hover {
  color: #1976D2;
  border-color: inherit;
}

build-headings

Creates the base styles for headings using the $headings map for defaults.

@include build-headings( $options );
Parameter Type Default
$options Map $headings

Example Usage

// SCSS input
@include build-headings();

// CSS output
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin: 1rem 0;
  font-family: inherit;
  line-height: 1.25em;
  font-weight: 600;
  color: #212121;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a {
  color: #212121;
  text-decoration: none;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
.h1 a:hover, .h2 a:hover, .h3 a:hover, .h4 a:hover, .h5 a:hover, .h6 a:hover {
  color: #2196F3;
  border-color: inherit;
}

h1, .h1 {
  font-size: 2.5em;
}
h2, .h2 {
  font-size: 2em;
}
h3, .h3 {
  font-size: 1.75em;
}
h4, .h4 {
  font-size: 1.5em;
}
h5, .h5 {
  font-size: 1.25em;
}
h6, .h6 {
  font-size: 1em;
}

add-styles

Output styles from a component map based on the approved properties and pseudo-classes.

@include add-styles( $input, $settings );
Parameter Type Default
$input Map none
$settings Map $add-styles

Example Usage

For basic usage, take a look at how we can output text styles through a default map. Notice how the properties that don’t match in our settings map of approved properties get ignored:

// SCSS input
$example: (
  'other' : 'Option to ignore',
  'cursor' : pointer,
  'color' : $blue,
  'padding' : 0.5em 0,
  'border-top' : 1px solid $blue,
  'transition' : $transition,
  'hover' : (
    'color' : $purple,
    'border-color' : $purple
  )
);
.text-example {
  @include add-styles($example);
}

// CSS output
.text-example {
  cursor: pointer;
  padding: 0.5em 0;
  color: #2196F3;
  border-top: 1px solid #2196F3;
  -webkit-transition: all 0.25s linear;
  transition: all 0.25s linear;
}
.text-example:hover {
  color: #9C27B0;
  border-color: #9C27B0;
}

Example Text

add-modifiers

Output an array of modifiers for flat components. Flat components are ones who’s modifiers typically only alter the appearance of the parent element itself. For example: buttons, badges, notices, etc.

@include add-modifiers( $input, $key, $selector, $settings );
Parameter Type Default
$input Map none
$key String or null null
$selector Boolean true
$settings Map $add-styles

Example Usage

For the initial example, we’ll make up a random component map with a few modifier options.

$example: (
  'color' : $white,
  'background' : $blue,
  'modifiers' : (
    'red' : (
      'background' : $red
    ),
    'green' : (
      'background' : $green
    )
  )
);

Now, we’ll pass this item to the add-modifiers mixin wrapped by our selector class.

// SCSS input
.example {
  @include add-modifiers( $example );
}

// CSS output
.example.red {
  background: #F44336;
}
.example.green {
  background: #4CAF50;
}

© 2018 . All rights reserved.