Say hi to Helium 👋

..a sassy offiziermesser for frontend development

Getting started

Helium is a Sass toolkit that provide to the developer a lot of functions, mixins and variables to easily write complex stylesheets.

By default this library produces no output, you can import it and use some of its utils without your css growing in size beyond the expected.

@use 'helium';

$colors: (
  1: helium.random-color(),
  2: helium.random-color(),
  3: helium.random-color(),
);

.my-button {
  // ...styles

  @each $class, $color in $colors {
    &.#{$class} {
      background: $color;
    }
  }
}

Import from CDN

Note that in this way you are importing a css file.

<link rel="stylesheet" type="text/css" href="https://unpkg.com/helium" />

For a better experience:

Install from npm

npm i sass helium

Usage

@use 'helium' with (
  $reset: true // this will print a basic reset to start with
);

Referring to the above example, due to the nature of Sass Modules to use an utility you need to prefix them:

@use 'helium' with (
  $reset: true
);

.my-navbar {
  @include helium.is-fixed-top;
}

// We recommend to, at least, shortening `helium` to `h`
// @use "helium" as "h";

To avoid the helium. repetition, if you are not using another frameworks that would enter in conflict with helium you can do this:

@use 'helium' as * with (
  $reset: true
);

.my-class {
  @include is-fixed-top;
}

Docs are still under development, please do not hesitate to ask for information!