Styling the layout and 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:

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

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

mkdir src/styles

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

macOS and Linux

Windows

touch src/styles/custom-mixins.scss

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.

Run yarn dev in the terminal to start the development server. You 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

$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:

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

mkdir src/styles

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

macOS and Linux

Windows

touch src/styles/custom-mixins.scss

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

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.