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.

1. Go to the src folder and create the styles folder inside it. You can run the following command to create it:

2. Inside the styles folder, create a new file called custom-mixins.scss

3. Add the following code snippet into the file:

@import '@faststore/ui/src/styles/base/utilities';
 
// Overwrites Breakpoints & Mixins ////////////////////
 
$breakpoints: (
  'phone': 320px,
  'phonemid': 375px,
  'tablet': 768px,
  'notebook': 1280px,
  'desktop': 1500px,
);

4. 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:

2. Inside the styles folder, create a new file called custom-mixins.scss

3. Choose the mixin you want to override and add it to the file:

@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)}) {
  [...]
}

4. 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.