Mixins and Functions

Shorthand CSS properties

Use the shorthand function v($value) to output a custom CSS property. You'll need to interpolate the function if using inside another CSS prop:

    
      // Input:
      .element {
        --font-family: #{v(font-primary)};
        font-family: v(font-primary);
      }

      // Output:
      .element {
        --font-family: var(--font-primary);
        font-family: var(--font-primary);
      }
    
  

Working with Colors

makeColorPalette() function

The makeColorPalette($color, $gen-bg: "false") function is used within the $colors SCSS map to generate a harmonious color palette for each of your project's core colors. This function generates 12 colors of various tints and shades, around the provided base color.

The function takes two arguments; the first is a CSS color value (any valid format: hex, hsl, rgb) and the second is a boolean string "true" or "false" (default "false") which defines whether Jellyfish should automatically create .bg-* modifiers for each of the colors (see Theme Colors).

get-color() function

The get-color($base, $shade: 500) function allows you to reference a color from the $colors SCSS map, returning the custom CSS property for the color and shade.

    
      // Input:
      .element {
        color: get-color(primary, 200);
        background-color: get-color(neutral, 1000);
        border-color: get-color(secondary);
      }

      // Output:
      .element {
        color: --var(--color-primary-200);
        background-color: --var(--color-neutral-1000);
        border-color: --var(--color-secondary-500);
      }
    
  

get-color-raw() function

The get-color-raw($base, $shade: 500) function allows you to reference a color from the $colors SCSS map, returning the raw CSS value. This should only be used when you need to perform color-based functions such as calculating contrast.

    
      // Input:
      .element {
        color: get-color(primary, 200);
        background-color: get-color(neutral, 1000);
        border-color: get-color(secondary);
      }

      // Output:
      .element {
        color: #ff9eba;
        background-color: #232931;
        border-color: #ffa0cd;
      }
    
  

resolve-contrast-color() function

The resolve-contrast-color($color) function takes one argument; the background color of an element, and returns the best color for text, based on the new APCA contrast algorithm. This function is used when generating all UI elements (buttons, backgrounds, chips)

Where possible, the function will return a custom CSS property rather than a CSS color value.

Working with Text

headings() function

The headings($from: 1, $to: 6) function allows you to apply styles to h1-h6 tags with ease.

    
      // Input:
      #{headings()} {
        font-size: 2em;
      }
      #{headings(3)} {
        color: tomato;
      }
      #{headings(1,4)} {
        text-decoration: underline;
      }

      // Output:
      h1, h2, h3, h4, h5, h6 {
        font-size: 2em;
      }
      h3, h4, h5, h6 {
        color: tomato;
      }
      h1, h2, h3, h4 {
        text-decoration: underline;
      }

    
  

Replacing Text with an image

Sometimes you might want to use text on a page for semantics or SEO, but display an image in place. You can do this with the mixin text-replace or the css class .text-replace. It's important to note that you need to give the element a fixed height and width to match your image in order for this to work correctly.

Jellyfish UI

Working with numbers

get-size() function

The get-size($size) function returns the provided size from the $sizing-system SCSS map.

    
      // Input:
      .element {
        width: get-size(0.25);
        height: get-size(4);
      }

      // Output:
      .element {
        width: 0.25rem;
        height: 4rem;
      }

    
  

Jellyfish comes with a few simple functions for manipulating numbers.

    
      // Input:
      .some-element {
        width: em(32px);        // 1. Convert a pixel value to an em value based on a docroot em sixe of 16px
        height: h(100vh);       // 2. Half a given value
        margin-left: n(20px);   // 3. Return the negative of a given value
        margin-right: hn(30px); // 4. Return the negative, half of a given value
        margin-top: nh(50px);   // 4. Return the negative, half of a given value
      }

      // Output:
      .some-element {
        width: 2em;             // 1. Convert a pixel value to an em value based on a docroot em sixe of 16px
        height: 50vh;           // 2. Half a given value
        margin-left: -20px;     // 3. Return the negative of a given value
        margin-right: -15px;    // 4. Return the negative, half of a given value
        margin-top: -25px;      // 4. Return the negative, half of a given value
      }

    
  

Global smooth() transitions

Use the mixin @include smooth($properties...) to apply global transitions for a consistent UI experience. The mixin accepts multiple arguments.

Working with Pseudo elements ::before and ::after

Pseudo elements always need a few properties defined. The pseudo($content: "", $display: block, $pos: absolute) mixin accepts three arguments and has default fallbacks.

    
      // Input
      .some-element::before {
        @include pseudo;
      }
      .some-other-element::before {
        @include pseudo('> ','inline-block','relative')
      }

      // Output
      .some-element::before {
        content: '';
        display: block;
        position: absolute;
      }
      .some-other-element::before {
        content: '> ';
        display: inline-block;
        position: relative;
      }