Documentation
Feedback
Guides
Storefront Development

Storefront Development
Mixins & Breakpoints

Breakpoints

FastStore simplifies screen breakpoint customization for projects by using Include-Media, 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:

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

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:
macOS and Linux
Windows

_10
mkdir src/styles

  1. Inside the styles folder, create a new file called custom-mixins.scss
macOS and Linux
Windows

_10
touch src/styles/custom-mixins.scss

  1. Add the following code snippet into the file:
src/styles/custom-mixins.scss

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

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 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.
Global Mixins
Layout & Spacing Mixins
Focus Ring Mixins

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:
macOS and Linux
Windows

_10
mkdir src/styles

  1. Inside the styles folder, create a new file called custom-mixins.scss
macOS and Linux
Windows

_10
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

_10
@import "@faststore/ui/src/styles/base/utilities";
_10
_10
// Overwrites Breakpoints & Mixins ////////////////////
_10
_10
@mixin input-focus-ring($outline: #{var(--fs-color-focus-ring-danger)}, $border: #{--fs-color-danger-border}) {
_10
[...]
_10
}

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

_10
- @mixin input-focus-ring($outline: #{var(--fs-color-focus-ring)}, $border: #{var(--fs-border-color-active)}) {
_10
+ @mixin input-focus-ring($outline: #{var(--fs-color-focus-ring-danger)}, $border: #{var(--fs-color-danger-border)}) {
_10
[...]
_10
}

  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.
Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page