UIDS - UI Design System

Background

Background
Prototype

Output (HTML)
Assets
Info


        
        <div class="bg--black--pattern--brain container--padded">
      <h2 class="headline headline--serif">Black - Brain pattern</h2>
  </div>
  <div class="bg--black--pattern--community container--padded">
      <h2 class="headline headline--serif">Black - Community pattern</h2>
  </div>
  <div class="bg--black--pattern--particle container--padded">
      <h2 class="headline headline--serif">Black - Particle pattern</h2>
  </div>
  <div class="bg--black container--padded">
      <h2 class="headline headline--serif">Black</h2>
  </div>
  <div class="bg--gold--pattern--brain container--padded">
      <h2 class="headline headline--serif">Gold - Brain pattern</h2>
  </div>
  <div class="bg--gold--pattern--community container--padded">
      <h2 class="headline headline--serif">Gold - Community pattern</h2>
  </div>
  <div class="bg--gold--pattern--particle container--padded">
      <h2 class="headline headline--serif">Gold - Particle pattern</h2>
  </div>
  <div class="bg--gold container--padded">
      <h2 class="headline headline--serif">Gold</h2>
  </div>
  <div class="bg--gray--pattern--brain container--padded">
      <h2 class="headline headline--serif">Gray - Brain pattern</h2>
  </div>
  <div class="bg--gray--pattern--community container--padded">
      <h2 class="headline headline--serif">Gray - Community pattern</h2>
  </div>
  <div class="bg--gray--pattern--particle container--padded">
      <h2 class="headline headline--serif">Gray - Particle pattern</h2>
  </div>
  <div class="bg--gray container--padded">
      <h2 class="headline headline--serif">Gray</h2>
  </div>
  <div class="bg--white--pattern--brain container--padded">
      <h2 class="headline headline--serif">White - Brain pattern</h2>
  </div>
  <div class="bg--white--pattern--community container--padded">
      <h2 class="headline headline--serif">White - Community pattern</h2>
  </div>
  <div class="bg--white--pattern--particle container--padded">
      <h2 class="headline headline--serif">White - Particle pattern</h2>
  </div>
  <div class="bg--white container--padded">
      <h2 class="headline headline--serif">White</h2>
  </div>

  <style>
      [class*="bg--"] {
          min-height: 600px;
      }

      .container--padded {
          padding: 40px;
      }
  </style>

File:

Content:


                                @import '../../assets/scss/variables';
@import '../../assets/scss/placeholders';

$backgrounds: (
  'bg--black--pattern--brain': (
    'type': 'dark',
    'background-color': $secondary,
    'background-image': '#{$imgpath}/brain-pattern-black.svg',
  ),
  // @todo Remove in future version
  'bg-pattern--brain-black': (
    'type': 'dark',
    'background-color': $secondary,
    'background-image': '#{$imgpath}/brain-pattern-black.svg',
  ),
  'bg--black--pattern--community': (
    'type': 'dark',
    'background-color': $secondary,
    'background-image': '#{$imgpath}/community-pattern--black.png',
  ),
  'bg--black--pattern--particle': (
    'type': 'dark',
    'background-color': $secondary,
    'background-image': '#{$imgpath}/particle-pattern--black.png',
  ),
  'bg--black': (
    'type': 'dark',
    'background-color': $secondary,
  ),
  'bg--gold--pattern--brain': (
    'type': 'light',
    'background-color': $primary,
    'background-image': '#{$imgpath}/brain-pattern-reversed.svg',
  ),
  // @todo Remove in future version
  'bg-pattern--brain-reversed': (
    'type': 'light',
    'background-color': $primary,
    'background-image': '#{$imgpath}/brain-pattern-reversed.svg',
  ),
  'bg--gold--pattern--community': (
    'type': 'light',
    'background-color': $primary,
    'background-image': '#{$imgpath}/community-pattern--white.png',
  ),
  'bg--gold--pattern--particle': (
    'type': 'light',
    'background-color': $primary,
    'background-image': '#{$imgpath}/particle-pattern.png',
  ),
  'bg--gold': (
    'type': 'light',
    'background-color': $primary,
  ),
  'bg--gray--pattern--brain': (
    'type': 'light',
    'background-color': $light,
    'background-image': '#{$imgpath}/brain-pattern-white.svg',
  ),
  'bg--gray--pattern--community': (
    'type': 'light',
    'background-color': $light,
    'background-image': '#{$imgpath}/community-pattern--gray.png',
  ),
  'bg--gray--pattern--particle': (
    'type': 'light',
    'background-color': $light,
    'background-image': '#{$imgpath}/particle-pattern--white.png',
  ),
  'bg--gray': (
    'type': 'light',
    'background-color': $light,
  ),
  'bg--white--pattern--brain': (
    'type': 'light',
    'background-color': $white,
    'background-image': '#{$imgpath}/brain-pattern.svg',
  ),
  // @todo Remove in future version
  'bg-pattern--brain': (
    'type': 'light',
    'background-color': $white,
    'background-image': '#{$imgpath}/brain-pattern.svg',
  ),
  'bg--white--pattern--community': (
    'type': 'light',
    'background-color': $white,
    'background-image': '#{$imgpath}/community-pattern--gray.png',
  ),
  'bg--white--pattern--particle': (
    'type': 'light',
    'background-color': $white,
    'background-image': '#{$imgpath}/particle-pattern--gold.png',
  ),
  'bg--white': (
    'type': 'light',
    'background-color': $white,
  ),
);

$bg-to-fg-color-map: (
  'default': 'dark',
  'black': 'light',
  'gold': 'dark',
  'gray': 'dark',
  'white': 'dark',
);

@mixin bg-fg-colors($bg, $shade: 'light', $extend: true) {
  @if $extend == true {
    @include uids-dynamic-extend($bg) {
      @include bg-fg-colors($bg, $shade, false);
    }
  }
  @else {
    @if $shade == 'light' {
      color: $secondary;

      a {
        color: $secondary;
      }
    }
    @else {
      color: $white;

      a {
        color: $primary;
      }
    }
  }
}

@mixin add-backgrounds($before: '', $after: '', $extend: true) {
  // Loop through $backgrounds
  @each $bg-class, $background in $backgrounds {
    $background-color: map-get($background, 'background-color');
    $background-image: map-get($background, 'background-image');
    $type: map-get($background, 'type');
    $text_color: map-get($bg-to-fg-color-map, $type);
    @if $text_color == null {
      $text_color: map-get($bg-to-fg-color-map, 'default');
    }
    #{$before}.#{$bg-class}#{$after} {
      @if $background-color {
        background-color: $background-color;
      }
      @if $background-image {
        background-image: url($background-image);
      }
    }
    #{$before}.#{$bg-class}#{$after} {
      @include bg-fg-colors($bg-class, $type, $extend);
    }
  }
}

//@mixin add-color-for-bgs($before: '', $after: '') {
//  // Loop through $backgrounds
//  @each $bg-class, $background in $backgrounds {
//    $type: map-get($background, 'type');
//    $text_color: map-get($bg-to-fg-color-map, $type);
//    @if $text_color == null {
//      $text_color: map-get($bg-to-fg-color-map, 'default');
//    }
//    #{$before}.#{$bg-class}#{$after} {
//      color: unquote($text_color);
//    }
//  }
//}

@mixin background-treatments($before: '', $after: '') {
  @each $bg-class, $background in $backgrounds {
    .#{$bg-class} {
      @content
    }
  }
}

URL: /components/raw/background/_background-mixins.scss
Filesystem Path: src/components/background/_background-mixins.scss
Size: 4.8 KB

Content:


                                [class*="bg-"] a,
[class*="bg-"] [class*="bg-"] a,
[class*="bg-"] [class*="bg--"] a,
[class*="bg--"] a,
[class*="bg--"] [class*="bg-"] a,
[class*="bg--"] [class*="bg--"] a {
  color: inherit; }

[class*="bg-pattern"],
[class*="bg--"][class*="--pattern--"] {
  background-size: auto auto;
  background-position: center center; }

[class*="--pattern--particle"],
[class*="bg--"][class*="--pattern--particle"] {
  background-size: 1400px; }

[class*="--pattern--community"],
[class*="bg--"][class*="--pattern--community"] {
  background-size: 1000px; }

.bg--black--pattern--brain {
  background-color: #151515;
  background-image: url("../../assets/images/brain-pattern-black.svg"); }

.bg--black--pattern--brain {
  color: #fff; }
  .bg--black--pattern--brain a {
    color: #FFCD00; }

.bg-pattern--brain-black {
  background-color: #151515;
  background-image: url("../../assets/images/brain-pattern-black.svg"); }

.bg-pattern--brain-black {
  color: #fff; }
  .bg-pattern--brain-black a {
    color: #FFCD00; }

.bg--black--pattern--community {
  background-color: #151515;
  background-image: url("../../assets/images/community-pattern--black.png"); }

.bg--black--pattern--community {
  color: #fff; }
  .bg--black--pattern--community a {
    color: #FFCD00; }

.bg--black--pattern--particle {
  background-color: #151515;
  background-image: url("../../assets/images/particle-pattern--black.png"); }

.bg--black--pattern--particle {
  color: #fff; }
  .bg--black--pattern--particle a {
    color: #FFCD00; }

.bg--black {
  background-color: #151515; }

.bg--black {
  color: #fff; }
  .bg--black a {
    color: #FFCD00; }

.bg--gold--pattern--brain {
  background-color: #FFCD00;
  background-image: url("../../assets/images/brain-pattern-reversed.svg"); }

.bg--gold--pattern--brain {
  color: #151515; }
  .bg--gold--pattern--brain a {
    color: #151515; }

.bg-pattern--brain-reversed {
  background-color: #FFCD00;
  background-image: url("../../assets/images/brain-pattern-reversed.svg"); }

.bg-pattern--brain-reversed {
  color: #151515; }
  .bg-pattern--brain-reversed a {
    color: #151515; }

.bg--gold--pattern--community {
  background-color: #FFCD00;
  background-image: url("../../assets/images/community-pattern--white.png"); }

.bg--gold--pattern--community {
  color: #151515; }
  .bg--gold--pattern--community a {
    color: #151515; }

.bg--gold--pattern--particle {
  background-color: #FFCD00;
  background-image: url("../../assets/images/particle-pattern.png"); }

.bg--gold--pattern--particle {
  color: #151515; }
  .bg--gold--pattern--particle a {
    color: #151515; }

.bg--gold {
  background-color: #FFCD00; }

.bg--gold {
  color: #151515; }
  .bg--gold a {
    color: #151515; }

.bg--gray--pattern--brain {
  background-color: #f3f3f3;
  background-image: url("../../assets/images/brain-pattern-white.svg"); }

.bg--gray--pattern--brain {
  color: #151515; }
  .bg--gray--pattern--brain a {
    color: #151515; }

.bg--gray--pattern--community {
  background-color: #f3f3f3;
  background-image: url("../../assets/images/community-pattern--gray.png"); }

.bg--gray--pattern--community {
  color: #151515; }
  .bg--gray--pattern--community a {
    color: #151515; }

.bg--gray--pattern--particle {
  background-color: #f3f3f3;
  background-image: url("../../assets/images/particle-pattern--white.png"); }

.bg--gray--pattern--particle {
  color: #151515; }
  .bg--gray--pattern--particle a {
    color: #151515; }

.bg--gray {
  background-color: #f3f3f3; }

.bg--gray {
  color: #151515; }
  .bg--gray a {
    color: #151515; }

.bg--white--pattern--brain {
  background-color: #fff;
  background-image: url("../../assets/images/brain-pattern.svg"); }

.bg--white--pattern--brain {
  color: #151515; }
  .bg--white--pattern--brain a {
    color: #151515; }

.bg-pattern--brain {
  background-color: #fff;
  background-image: url("../../assets/images/brain-pattern.svg"); }

.bg-pattern--brain {
  color: #151515; }
  .bg-pattern--brain a {
    color: #151515; }

.bg--white--pattern--community {
  background-color: #fff;
  background-image: url("../../assets/images/community-pattern--gray.png"); }

.bg--white--pattern--community {
  color: #151515; }
  .bg--white--pattern--community a {
    color: #151515; }

.bg--white--pattern--particle {
  background-color: #fff;
  background-image: url("../../assets/images/particle-pattern--gold.png"); }

.bg--white--pattern--particle {
  color: #151515; }
  .bg--white--pattern--particle a {
    color: #151515; }

.bg--white {
  background-color: #fff; }

.bg--white {
  color: #151515; }
  .bg--white a {
    color: #151515; }

[class*="bg--"] *,
[class*="bg--"] [class*="bg--"] * {
  border-color: inherit; }
  [class*="bg--"] *:before, [class*="bg--"] *:after,
  [class*="bg--"] [class*="bg--"] *:before,
  [class*="bg--"] [class*="bg--"] *:after {
    color: inherit;
    border-color: inherit; }

[class*="bg--gray"],
[class*="bg--white"],
[class*="bg--gold"],
.bg-pattern--brain-reversed,
.bg-pattern--brain {
  border-color: rgba(0, 0, 0, 0.125); }

.bg--black--pattern--brain,
.bg-pattern--brain-black,
[class*="bg--black"] {
  border-color: rgba(255, 255, 255, 0.325); }

[class*="bg--white"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg-"] [class*="bg--white"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg--gray"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg-"] [class*="bg--gray"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn) {
  color: #00558C; }

[class*="bg--white"] [class*="bg--gold"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg--white"] [class*="bg--black"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg--gray"] [class*="bg--gold"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg--gray"] [class*="bg--black"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn) {
  color: inherit; }

URL: /components/raw/background/background.css
Filesystem Path: src/components/background/background.css
Size: 6 KB

Content:


                                @import 'background-mixins';

[class*="bg-"],
[class*="bg--"] {
  a,
  [class*="bg-"] a,
  [class*="bg--"] a {
    color: inherit;
  }
}

// @todo Remove just the next line in a future release.
[class*="bg-pattern"],
[class*="bg--"][class*="--pattern--"] {
  background-size: auto auto;
  background-position: center center;
}

[class*="--pattern--particle"],
[class*="bg--"][class*="--pattern--particle"] {
  background-size: 1400px;
}

[class*="--pattern--community"],
[class*="bg--"][class*="--pattern--community"] {
  background-size: 1000px;
}

// Add background rules
@include add-backgrounds();

[class*="bg--"] {
  *,
  & [class*="bg--"] * {
    border-color: inherit;

    &:before,
    &:after {
      color: inherit;
      border-color: inherit;
    }
  }
}

// border color overrides for certain background colors
[class*="bg--gray"],
[class*="bg--white"],
[class*="bg--gold"],
.bg-pattern--brain-reversed,
.bg-pattern--brain {
  border-color: rgba(0,0,0,.125);
}

.bg--black--pattern--brain,
.bg-pattern--brain-black,
[class*="bg--black"] {
  border-color: rgba(255,255,255,.325);
}

// override gray link color.
[class*="bg--white"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg-"] [class*="bg--white"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg--gray"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg-"] [class*="bg--gray"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn) {
  color: $link-color;
}

// set link color for black and gold nesting.
[class*="bg--white"] [class*="bg--gold"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg--white"] [class*="bg--black"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg--gray"] [class*="bg--gold"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn),
[class*="bg--gray"] [class*="bg--black"] :where(p, ul, ol, dl, cite, tbody, figcaption) a:not(.bttn) {
  color: inherit;
}

URL: /components/raw/background/background.scss
Filesystem Path: src/components/background/background.scss
Size: 2 KB

Handle: @background
Preview:
- With layout
- Component only
Filesystem Path: src/components/background/background.twig
Referenced by (2): @headlines, @kitchen-sink

Background

Background Prototype

Background
Prototype