cnp-scss-snippets

SCSS-Snippets

Common functions, mixins and extensions for use in SCSS.

Mixins

between_with_media_queries

Parameters: $properties: map, $from_value: pixel, $to_value: pixel, $from_width: pixel, $to_width: pixel, $continue: boolean

This mixin scales a property from one value to another over a set breakpoint range. For the record, I was using this months (months, I say!) before Typekit made it cool with their concept of "CSS locks." I found a postcss plugin that hijacked the font-family property (I think) and converted it to a mixin instead. I primarily use it with font-size, but it can be used with any CSS property, or multiple properties at once.

Setting $continue to true will make the $to_value persist after the $to_width breakpoint.

One thing we could do to make it better is adapt it from height-specific media queries as well.

color_bar

Parameters: $color: any value that will work with background, $include_both: boolean

Worth its weight in gold for being able to set a browser-width background for a specific section without creating a new .row div. It uses a :before pseudo-element to place the background, which could be anything from a solid color to a gradient, or even an image. When using color_bar, it is usually wise to have an .inside div just after the before element, so that you can place position: relative on it and have the content take a higher stacking index.

css_by_breakpoint

Parameters: $breakpoint-map: a nested map of breakpoints

Another workhorse of our custom site builds, I use css_by_breakpoint as a shorthand for any value that changes over multiple breakpoints. The syntax in use looks like this:

@include css_by_breakpoint((
    default: (
        margin-left: $cnp-small-grid-row-margin * -1, 
        margin-right: $cnp-small-grid-row-margin * -1, 
    ), 
    small: (
        margin-left: $cnp-small-grid-row-margin * -1,
        margin-right: $cnp-small-grid-row-margin * -1,
    ),
    medium: (
        margin-left: $cnp-medium-grid-row-margin * -1,
        margin-right: $cnp-medium-grid-row-margin * -1,
    ),
    $interior-content-width: (
        margin-left: calc((100vw - #{$interior-content-width} + (#{$cnp-medium-grid-row-margin} * 2)) / -2),
        margin-right: calc((100vw - #{$interior-content-width} + (#{$cnp-medium-grid-row-margin} * 2)) / -2),
    ),
    $site-width: (
        margin-left: ($site-width - $interior-content-width) / -2,
        margin-right: ($site-width - $interior-content-width) / -2,
    ),
));

Some notes on this example:

1. Default is used to keep the properties that change over breakpoints all in one place. The output does not wrap it in a media query.
2. Small is superfluous here, and only used for demonstration purposes. Using small as the key will return a "small only" breakpoint.
3. Anything that is accepted by the Foundation breakpoint mixin will work as a breakpoint key. Values like $interior-content-width or medium only or large down will all work.

Note: in order to use Emmet shorthands inside of CBB in PhpStorm, you'll need my custom extensions loaded into PhpStorm's Live Template library.

do_something_over_breakpoints

Parameters: $properties: map, $multipliers: map of integers, $increment-map: map of breakpoint / value pairs

This simple mixin powers many others, like site_margin and vertical_rhythm. It makes using increment maps like these easy:

$site-margin-map: (
    small only: $cnp-small-grid-row-margin,
    medium only: $cnp-medium-grid-row-margin,
    mediumlarge only: $cnp-medium-grid-row-margin,
    large only: $cnp-medium-grid-row-margin,
);

To apply the site margin to an element, we'd use this:

@include do_something_over_breakpoints( (margin-left, margin-right), (-1), $site-margin-map );

This logic is used in the site_margin mixin. The value of do_something_over_breakpoints is that it standardizes the loop and gives us a common, predictable template from which to work.

Note: you can skip specific breakpoints by passing "null" in the multipliers map, like this:

@include do_something_over_breakpoints( (margin-left, margin-right), (-1, null, -2), $site-margin-map );

Doing this would skip output for the second breakpoint in $site-margin-map, and resume with -2 for the third breakpoint in $site-margin-map.

do_something_over_breakpoints_constant

Parameters: $properties: map, $multipliers: map, $constant: integer

The sister mixin to do_something_over_breakpoints, this mixin switches things up by requiring a constant instead of an increment map. A good example for this mixin is vertical_rhythm, which uses the $grid-unit constant as its basis instead of a value that changes based on the breakpoint. Instead of pulling the breakpoint from the $increment-map, it gets the current breakpoint from the globally defined $breakpoints variable, based on a counter variable that increments with each loop.

flex_wrap_to_no_wrap

Parameters: $breakpoint: breakpoint string

I got tired of writing flex-wrap: wrap and flex-wrap: nowrap for different breakpoints.

font_face

Parameters: $fontname: name of the font, $filename: full filename, minus the extension

Simple font-face mixin.

font-smoothing

Parameter: $on_or_off: string

Pass 'on' to turn font-smoothing on, off to turn it off.

gradient-striped

Parameters: $direction: angle, $colors: map

A simple mixin for creating a striped gradient. Haven't used it too much, to be honest.

match_site_width

Parameters: $properties: map

Uses negative margins to pull an element out horizontally to match the width of a site, working in tandem with the $site-margin-map, $content-width and $site-width variables.

match_site_width_absolutely

Uses the same calculations as match_site_width, but positions the element absolutely. Useful for complex background elements that can't or shouldn't be postioned to match the site width using simple margins.

placeholder

Cross-browser placeholder styles. Example:

@include placeholder() {
    color: $gray-4f;
}

site_margin

Parameters: $indent_or_outdent: 'indent' or 'outdent,' defaults to 'indent', $properties: map

Uses the $site-margin-map values to put a site margin on an element. It's typically used for .webpage-column with indent, and anything that needs to be pulled back out with outdent. Note: if you need to match the site width and not just the site margin, use match_site_width instead, as it includes a site_margin(outdent) call.

typographic_item

Parameters: $settings: map, with keys for 'tag', 'font', 'weight', 'color' and 'include_properties'

Hooo-boy. This is the most recently added mixin to this repo, and it's either the best thing in the world or utter trash. The problem I've faced over the years is that we often find the need to divorce visual styles from tag styles. For instance, we used to style our typography going by a strict tag-based system, where if you wanted something to look like an h4, it had better well be an h4 tag because that's the only way that's gonna happen.

However, that's not very flexible. So after many iterations, I've finally landed on the typographic_item mixin as the end-all be-all mixin for any singular typographic element. Here's how it looks in practice:

@mixin h1( $settings:() ) {
    $defaults: (
        'tag': h1,
        'font': $trim-bold,
        'weight': normal,
        'color': $purple,
        'include_properties': true,
    ); // <-- The only parameters used by the mixin are tag, font, weight, color, and include_properties. 
    $args: map_merge($defaults, $settings); // <-- Similar to wp_parse_args, we can set defaults but allow them to be overwritten. 
 
    text-transform: uppercase; // <-- Set anything that a) is mandatory and b) is constant (i.e., that doesn't take a variable value, like 32px or 1.5 or 600 here. 
 
    @include typographic-item($args);
}

This way, if you need a green H1 instead of a blue one, you can overwrite the color when you pass in the settings for the mixin. Same goes for the font or weight. Of course, you can work up more verbose examples:

@mixin btn( $settings:() ) {
    $defaults: (
        'tag': btn,
        'background': $mint,
        'background-hover': darken(saturate($mint, 10%), 15%),
        'color': #fff,
        'color-hover': #fff,
        'font': $decima-mono,
        'weight': bold,
    );
 
    $args: map_merge($defaults, $settings);
 
    @include scut-vcenter-ib();
    background: map_get($args, 'background');
    display: inline-block;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
 
    &:hover {
        background: map_get($args, 'background-hover');
        color: map_get($args, 'color-hover');
    }
 
    @include typographic-item($args);
}

The flexibility of this mixin pattern is that it can be used for any singular typographical item, from lists to headers to form labels. The final piece is how the typographic-item mixin interacts with the $header-styles variable to manage the responsive settings of a typographic item, like the font-size, line-height and more. Any property that will change over breakpoints should go into $header-styles, so that we can have a comprehensive idea of what the typographic styles are. Take this partial example:

$header-styles: (
    small: (
        'h1': (
            'font-size': scut-em(25),
            'line-height': scut-em(24, 25),
        ),
        'h2': (
            'font-size': scut-em(21),
            'line-height': .9,
            'letter-spacing': scut-em(.8, 21),
        ),
        'h3': (
            'font-size': scut-em(17),
            'line-height': scut-em(16, 17),
        ),
        'intro': (
            'font-size': scut-em(14),
            'letter-spacing': scut-em(.53, 14),
            'line-height': scut-em(23, 14),
        ),
        'btn': (
            'font-size': scut-rem(12),
            'height': scut-em(40, 12),
            'letter-spacing': scut-em(.49, 12),
            'padding-left': scut-em(30, 12),
            'padding-right': scut-em(30, 12),
        ),
        'p': (
            'font-size': scut-em(13),
            'line-height': scut-em(22, 13),
            'letter-spacing': scut-em(.53, 13),
        ),
    ),
);

vertical_rhythm

Parameters: $properties: map, $multipliers: map

Uses the $grid-unit variable as its basis for calculating changes in margin, padding, font-size or more over specific breakpoints. If you're not sure when to use it, check out the section titled "The Grid-Unit Function and how to handle responsive values" in the CNP Foundation Theme docs.

z

Parameters: $layers: map

Takes a layer name and returns the z-index value from the $z-layers variable set in _site-settings.scss.

Extensions

%psuedo

A quick pseudo-element generator. Handy, sometimes.

Functions

Most of the functions used here are for utility purposes; that is, they're meant to aid you in building mixins, rather than for direct use. Most of them I copied from other libraries or tutorials. Use as necessary.