Foundation - Helpers

Helpers are the functions, mixins, extends, and animations used throughout an NGSCSS application.

Functions

Because of the many useful functions Sass gives us for free, we rarely need to define any of our own. Still, there may be occasions where you need to define some others (e.g., em, rem, strip-units). For these cases, we’ve dedicated the Functions section within Helpers to housing any necessary additions.

Mixins

We use mixins to reduce the amount of repeated code when authoring style sheets. Usually, this involves simplifying lengthy syntaxes, as well as providing fallbacks and vendor prefixes for unsupported CSS properties.

Take media queries for example: the most commonly used arguments are screen and min-width, so we made a mixin that includes those values as defaults, unless stated otherwise.

// ----- Input Placeholder ----- //
// -> Adds placeholder prefixes
//
// @content - the generated content within the mixin
//

@mixin input-placeholder {
  &.placeholder                 { @content; }
  &:-moz-placeholder            { @content; }
  &::-moz-placeholder           { @content; }
  &:-ms-input-placeholder       { @content; }
  &::-webkit-input-placeholder  { @content; }
}

Entries in the Mixin section should always take arguments and have the ability to differ when utilized. If you’re looking to add an unchanging group of properties to reuse, they belong in Extends.

Extends

Extends are collections of rules to use either directly in the markup, or to extend within modules. These are generally more verbose than Tools, but still adhere to the single responsibility principle.

Even though we frequently extend these classes within modules, we avoid the percent sign syntax (%className) to create placeholder selectors in Sass. It’s a good reminder to ourselves that these classes shouldn’t be nested in the context of anything else, avoiding potential selector bloat associated with extends.

Inside Markup

The group class applies multiple rules to a single element, and in the following example, we’re using it directly in the markup.

// ----- Clearfix ----- //

.group::after {
  clear: both;
  content: '';
  display: table;
}

<footer class="group">
  <p class="fl">Made with Envy</p>
  <img class="fr" src="logo-envy.svg" alt="Envy Logo">
</footer>

Inside Modules

In the following g (grid) Component, we extend the group class within the module itself.

.g {
  @extend .group;
  display: block;
  margin-left: -$g-gutter / 2;
  margin-right: -$g-gutter / 2;
}