⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

Mixins & Breakpoints

Breakpoints

FastStore simplifies screen breakpoint customization for projects by using Include-Media (opens in a new tab), a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax. Each project has the following five pre-defined screen breakpoints:

$breakpoints: (
  'phone': 320px,
  'phonemid': 375px,
  'tablet': 768px,
  'notebook': 1280px,
  'desktop': 1440px,
);

Customizing Breakpoints

Follow the steps below to override the pre-defined sizing system for the screen breakpoints.

⚠️

Modifying these breakpoints implies changes to certain global tokens. See Grid & Layout for more details.

  1. Go to the src folder and create the styles folder inside it. You can run the following command to create it:
bash copy mkdir src/styles
  1. Inside the styles folder, create a new file called custom-mixins.scss
bash copy touch src/styles/custom-mixins.scss
  1. Add the following code snippet into the file:
src/styles/custom-mixins.scss
@import '@faststore/ui/src/styles/base/utilities';
 
// Overwrites Breakpoints & Mixins ////////////////////
 
$breakpoints: (
  'phone': 320px,
  'phonemid': 375px,
  'tablet': 768px,
  'notebook': 1280px,
  'desktop': 1500px,
);
⚠️

You need to declare all the variants (phone, phonemid, tablet, notebook and desktop) even when changing only one of the values.

  1. Run yarn dev in the terminal to start the development server. Your should be able to see the changes.

Mixins

The Sass @mixin (opens in a new tab) allows you to define styles that can be re-used throughout your application. Within FastStore projects, these mixins are categorized into three groups: Global Mixins, Layout & Spacing Mixins, and Focus Ring Mixins.

$base: 16px !default;
 
@function rem($size) {
  $rem: math.div($size, $base);
 
  @return #{$rem}rem;
}
 
@mixin truncate-title($max-lines: var(--fs-text-max-lines)) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-line-clamp: $max-lines;
  line-clamp: $max-lines;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  white-space: normal;
}

Customizing Mixins

Overriding the predefined mixins follows a process similar to the customizing breakpoints steps. If you already have a custom-mixin.scss file, you can skip to Step 3. Otherwise, follow the steps below:

  1. Go to the src folder and create the styles folder inside it. You can run the following command to create it:
bash copy mkdir src/styles
  1. Inside the styles folder, create a new file called custom-mixins.scss
bash copy touch src/styles/custom-mixins.scss
  1. Choose the mixin you want to override and add it to the file:
src/styles/custom-mixins.scss
@import "@faststore/ui/src/styles/base/utilities";
 
// Overwrites Breakpoints & Mixins ////////////////////
 
@mixin input-focus-ring($outline: #{var(--fs-color-focus-ring-danger)}, $border: #{--fs-color-danger-border}) {
  [...]
}

This code will make the following changes on the default @mixin input-focus-ring:

- @mixin input-focus-ring($outline: #{var(--fs-color-focus-ring)}, $border: #{var(--fs-border-color-active)}) {
+ @mixin input-focus-ring($outline: #{var(--fs-color-focus-ring-danger)}, $border: #{var(--fs-color-danger-border)}) {
  [...]
}
  1. Run yarn dev to start the development server.

You should see that all components that use the focus-ring now have a red shadow when focused. Click on the input to see the change.