Skip to content

Latest commit

 

History

History
618 lines (478 loc) · 17.2 KB

sass.md

File metadata and controls

618 lines (478 loc) · 17.2 KB
Raw

Sass API

Mark Description
✅ Public functions, mixins, placeholders, and variables
❌ Private items - not supported outside package's build
⚠️ Deprecated items - may not be available in future releases

@carbon/grid

✅carbon--12-column-grid [variable]

Overrides $carbon--grid-breakpoints to use a 12 column grid instead of the default 16

Source code 
$carbon--12-column-grid: map-merge(
  $carbon--grid-breakpoints,
  (
    lg: map-merge(
        map-get($carbon--grid-breakpoints, lg),
        (
          columns: 12,
        )
      ),
    xlg: map-merge(
        map-get($carbon--grid-breakpoints, xlg),
        (
          columns: 12,
        )
      ),
    max: map-merge(
        map-get($carbon--grid-breakpoints, max),
        (
          columns: 12,
        )
      ),
  )
);

❌carbon--make-col-ready [mixin]

Used to initialize the default properties for a column class, most notably for setting width and default gutters when a column's breakpoint has not been hit yet.

Source code 
@mixin carbon--make-col-ready(
  $gutter: $carbon--grid-gutter,
  $collapsed-gutter: $carbon--grid-gutter--condensed
) {
  // Prevent columns from becoming too narrow when at smaller grid tiers by
  // always setting `width: 100%;`. This works because we use `flex` values
  // later on to override this initial width.
  width: 100%;
  padding-right: ($gutter / 2);
  padding-left: ($gutter / 2);

  // For our condensed use-case, our gutters collapse to 2px solid, 1px on each
  // side.
  .#{$prefix}--row--condensed &,
  .#{$prefix}--grid--condensed & {
    padding-right: ($condensed-gutter / 2);
    padding-left: ($condensed-gutter / 2);
  }
}
  • Parameters:
Name Description Type Default value
$gutter The gutter for the grid system Number $carbon--grid-gutter
$collapsed-gutter The condensed mode gutter Number $carbon--grid-gutter--condensed

❌carbon--make-col [mixin]

Define the width of the column for a given span and column count.

Source code 
@mixin carbon--make-col($span, $columns) {
  flex: 0 0 percentage($span / $columns);
  // Add a `max-width` to ensure content within each column does not blow out
  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
  // do not appear to require this.
  max-width: percentage($span / $columns);
}
  • Parameters:
Name Description Type Default value
$span The number of columns covered Number —
$columns The total number of columns available Number —

❌carbon--make-col-offset [mixin]

Create a column offset for a given span and column count.

Source code 
@mixin carbon--make-col-offset($span, $columns) {
  $offset: $span / $columns;
  @if $offset == 0 {
    margin-left: 0;
  } @else {
    margin-left: percentage($offset);
  }
}
  • Parameters:
Name Description Type Default value
$span The number of columns the offset should cover Number —
$columns The total number of columns available Number —

❌carbon--make-grid-columns [mixin]

Output the CSS required for all the columns in a given grid system.

Source code 
@mixin carbon--make-grid-columns(
  $breakpoints: $carbon--grid-breakpoints,
  $gutter: $carbon--grid-gutter
) {
  .#{$prefix}--col {
    @include carbon--make-col-ready();
  }

  @each $breakpoint in map-keys($breakpoints) {
    $infix: carbon--breakpoint-infix($breakpoint);
    $columns: map-get(map-get($breakpoints, $breakpoint), columns);

    // Allow columns to stretch full width below their breakpoints
    @for $i from 1 through $columns {
      .#{$prefix}--col#{$infix}-#{$i} {
        @include carbon--make-col-ready();
      }
    }

    .#{$prefix}--col#{$infix},
    .#{$prefix}--col#{$infix}--auto {
      @include carbon--make-col-ready();
    }

    @include carbon--breakpoint($breakpoint, $breakpoints) {
      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
      .#{$prefix}--col,
      .#{$prefix}--col#{$infix} {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
      }

      .#{$prefix}--col--auto,
      .#{$prefix}--col#{$infix}--auto {
        flex: 1 0 0%;
        width: auto;
        // Reset earlier grid tiers
        max-width: 100%;
      }

      @for $i from 1 through $columns {
        .#{$prefix}--col#{$infix}-#{$i} {
          @include carbon--make-col($i, $columns);
        }
      }

      @for $i from 0 through ($columns - 1) {
        @if not($infix == '') {
          .#{$prefix}--offset#{$infix}-#{$i} {
            @include carbon--make-col-offset($i, $columns);
          }
        }
      }
    }
  }
}
  • Parameters:
Name Description Type Default value
$breakpoints The breakpoints in the grid system Map $carbon--grid-breakpoints
$gutter The gutter for the grid system Number $carbon--grid-gutter

❌carbon--make-row [mixin]

Define the properties for a selector assigned to a row in the grid system.

Source code 
@mixin carbon--make-row($gutter: $carbon--grid-gutter) {
  display: flex;
  flex-wrap: wrap;
  margin-right: -1 * $gutter / 2;
  margin-left: -1 * $gutter / 2;
}
  • Parameters:
Name Description Type Default value
$gutter The gutter in the grid system Number $carbon--grid-gutter

❌carbon--no-gutter [mixin]

Add no-gutter and no-gutter--{left,right} classes to the output CSS. These classes are useful for dropping the gutter in fluid situations.

Source code 
@mixin carbon--no-gutter() {
  .#{$prefix}--no-gutter,
  .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] {
    padding-left: 0;
    padding-right: 0;
  }

  .#{$prefix}--no-gutter--left,
  .#{$prefix}--row.#{$prefix}--no-gutter--left [class*='#{$prefix}--col'] {
    padding-left: 0;
  }

  .#{$prefix}--no-gutter--right,
  .#{$prefix}--row.#{$prefix}--no-gutter--right [class*='#{$prefix}--col'] {
    padding-right: 0;
  }
}

❌carbon--hang [mixin]

Add hang--left and hang--right classes for a given gutter. These classes are used alongside no-gutter--left and no-gutter--right to "hang" type.

Source code 
@mixin carbon--hang($gutter: $carbon--grid-gutter) {
  .#{$prefix}--hang--left {
    padding-left: ($gutter / 2);
  }

  .#{$prefix}--hang--right {
    padding-right: ($gutter / 2);
  }
}
  • Parameters:
Name Description Type Default value
$gutter The gutter in the grid system Number $carbon--grid-gutter

✅carbon--aspect-ratios [variable]

The aspect ratios that are used to generate corresponding aspect ratio classes in code

Source code 
$carbon--aspect-ratios: ((16, 9), (2, 1), (4, 3), (1, 1), (1, 2));

❌carbon--aspect-ratio [mixin]

Output the CSS classes for generating aspect ratio classes

Source code 
@mixin carbon--aspect-ratio($aspect-ratios: $carbon--aspect-ratios) {
  .#{$prefix}--aspect-ratio {
    height: 0;
    position: relative;
  }

  .#{$prefix}--aspect-ratio--object {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
  }

  @each $ratio in $aspect-ratios {
    $width: nth($ratio, 1);
    $height: nth($ratio, 2);

    .#{$prefix}--aspect-ratio--#{$width}x#{$height} {
      padding-bottom: percentage($height / $width);
    }
  }
}
  • Parameters:
Name Description Type Default value
$aspect-ratios A list of aspect ratios to generate List $carbon--aspect-ratios

❌carbon--make-container [mixin]

Create the container for a grid. Will cause full-bleed for the grid unless max-width properties are added with make-container-max-widths

Source code 
@mixin carbon--make-container($breakpoints: $carbon--grid-breakpoints) {
  margin-right: auto;
  margin-left: auto;

  @include carbon--set-largest-breakpoint();

  @each $name, $value in $breakpoints {
    $prev-breakpoint: map-get($breakpoints, carbon--breakpoint-prev($name));
    $margin: map-get($value, margin);

    @if $prev-breakpoint {
      $prev-margin: map-get($prev-breakpoint, margin);
      @if $prev-margin != $margin {
        @include carbon--breakpoint($name) {
          padding-left: #{($carbon--grid-gutter / 2) + $margin};
          padding-right: #{($carbon--grid-gutter / 2) + $margin};
        }
      }
    } @else {
      @include carbon--breakpoint($name) {
        padding-left: #{($carbon--grid-gutter / 2) + $margin};
        padding-right: #{($carbon--grid-gutter / 2) + $margin};
      }
    }
  }
}
  • Parameters:
Name Description Type Default value
$breakpoints A map of breakpoints where the key is the name Map $carbon--grid-breakpoints

❌carbon--set-largest-breakpoint [mixin]

Get the last breakpoint width and set max-width to its value

Source code 
@mixin carbon--set-largest-breakpoint($breakpoints: $carbon--grid-breakpoints) {
  $largest-breakpoint: last-map-item($breakpoints);

  max-width: map-get($largest-breakpoint, 'width');
}
  • Parameters:
Name Description Type Default value
$breakpoints A map of breakpoints where the key is the name Map $carbon--grid-breakpoints

❌carbon--make-container-max-widths [mixin]

Add in the max-widths for each breakpoint to the container

Source code 
@mixin carbon--make-container-max-widths(
  $breakpoints: $carbon--grid-breakpoints
) {
  @each $name, $value in $breakpoints {
    @include carbon--breakpoint($name) {
      max-width: map-get($value, width);
    }
  }
}
  • Parameters:
Name Description Type Default value
$breakpoints A map of breakpoints where the key is the name Map $carbon--grid-breakpoints

✅carbon--grid [mixin]

Generate the CSS for a grid for the given breakpoints and gutters

Source code 
@mixin carbon--grid(
  $breakpoints: $carbon--grid-breakpoints,
  $grid-gutter: $carbon--grid-gutter,
  $condensed-gutter: $carbon--grid-gutter--condensed
) {
  .#{$prefix}--grid {
    @include carbon--make-container($breakpoints);
  }

  @include carbon--largest-breakpoint($breakpoints) {
    .#{$prefix}--grid--full-width {
      max-width: 100%;
    }
  }

  .#{$prefix}--row {
    @include carbon--make-row();
  }

  .#{$prefix}--grid--condensed .#{$prefix}--row:not(:last-of-type) {
    margin-bottom: $condensed-gutter;
  }

  .#{$prefix}--row--condensed + .#{$prefix}--row--condensed {
    margin-top: $condensed-gutter;
  }

  @include carbon--make-grid-columns($breakpoints, $grid-gutter);
  @include carbon--no-gutter();
  @include carbon--hang($grid-gutter);
  @include carbon--aspect-ratio();
}
  • Parameters:
Name Description Type Default value
$breakpoints The default breakpoints Map $carbon--grid-breakpoints
$grid-gutter The default gutters Number $carbon--grid-gutter
$condensed-gutter The condensed mode gutter Number $carbon--grid-gutter--condensed

✅prefix [variable]

Namespace prefix

Source code 
$prefix: 'bx';