Element Global

The Global package contains various styles that the rest of Element all depends on. Using any Element component will require importing the Global component's index style.

Note: Please ensure that the global styles are only imported once, at the very root of your application. Importing them more than once will throw an error in your SASS compilation.

The global package contains several sub-packages for foundational concepts which have only SASS code, no JavaScript or TypeScript:

Please see each sub-package's README for additional information about what it provides.

Example usage

@use '@element/global';

Media Queries

Element exposes a @element/global/screen-sizes module which uses Eduardo Boucas' include-media library to create media queries. Please see the full documentation for that library here.

Breakpoints

The default breakpoints are:

xs (375px)
sm (768px)
md (1280px)
lg (1440px)
xl (1920px)

The available media expressions are:

screen
print
handheld
landscape
portrait
retina2x
retina3x

The breakpoints can be customized by setting the $breakpoints variable of the screen-sizes module

Note: Like configuring any other SASS module, this must be done at the root of your application before screen-sizes (or helpers which forwards screen-sizes) is used anywhere else in your application:

@use '@element/global/screen-sizes' with (
  $breakpoints: (
    xs: 4px
    sm: 44px
    md: 444px
    lg: 4444px
    xl: 44444px
  ) 
);

Creating a media query

The helpers module exposes a single very flexible mixin called media. You can do any of the following with it:

Use a single breakpoint:

@use '@element/global/helpers';
@include helpers.media('>xs') {
  /* css here */
}

Use multiple breakpoints:

@use '@element/global/helpers';
@include helpers.media('>xs', '<=md') {
  /* css here */
}

Use custom values:

@use '@element/global/helpers';
@include helpers.media('>=358px', '<850px') {
  /* css here */
}

Mix custom values and breakpoints:

@use '@element/global/helpers';
@include helpers.media('>lg', '<=1350px') {
  /* css here */
}

Use media expressions:

@use '@element/global/helpers';
@include helpers.media('retina2x') {
  /* css here */
}

Mix all of these:

@use '@element/global/helpers';
@include helpers.media('>=350px', '<md', 'retina3x') {
  /* css here */
}

Other Helpers

Row to Column

Sometimes you want to transition a row of equal-width items directly from a row to a column, without an in-between state. Using flexbox, that in-between state is usually some items being wider than others, using CSS grid, that in-between state is usually an empty space in the grid when one item wraps to the next row.

Regardless, we provide a mixin essentially generate a container query to transition the items from a row to a column:

@use '@element/global/helpers';

.my-container {
  @include helpers.row-to-column(
    $container-width: 40rem,
    $margin: helpers.space(1)
  );
}

The mixin also provides the ability to have the row automatically transition to a column if there are more than a certain number of items in the row:

@use '@element/global/helpers';

.my-container {
  // Make the row change to a column either when the container
  // becomes skinnier than 40rem or when 4 or more items are
  // put inside it.
  @include helpers.row-to-column(
    $container-width: 40rem,
    $margin: helpers.space(1),
    $quantity: 4
  );
}