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.
- Go to the
src
folder and create thestyles
folder inside it. You can run the following command to create it:
mkdir src/styles
- Inside the
styles
folder, create a new file calledcustom-mixins.scss
touch src/styles/custom-mixins.scss
- 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,
);
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. 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:
- Go to the
src
folder and create thestyles
folder inside it. You can run the following command to create it:
mkdir src/styles
- Inside the
styles
folder, create a new file calledcustom-mixins.scss
touch src/styles/custom-mixins.scss
- 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)}) {
[...]
}
- 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.