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:


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

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


_10mkdir src/styles

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

macOS and Linux

Windows


_10touch src/styles/custom-mixins.scss

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.

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


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

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


_10mkdir src/styles

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

macOS and Linux

Windows


_10touch src/styles/custom-mixins.scss

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}

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.