Customizing Stacks

If you compile the Stacks within your project and need to customize some things, here are a few things you need to know.

Introduction

Stacks is used on all Q&A sites in the Stack Exchange network, including Stack Overflow. Many of those sites have their own themes, e.g. with different link colors and different button styles. Large parts of Stacks are agnostic to these differences – for example, the atomic class .ps-fixed does the same thing regardless of what site it’s used on. But some parts of Stacks need to behave differently depending on what site they’re used on – for example, the background color of the .s-btn component differs per-site.

The parts of Stacks that are always the same across all Stack Exchange sites are called constants. The parts of Stacks that are configurable based are called configurations.

Constants are included in all network pages as a single CSS file that’s identical everywhere. Configurations, on the other hand, are compiled into the site’s primary.css file.

Making customizations

Most configuration options address how varying elements or components look within a theme. However there are a few options that change constants as well. Items such as CSS reset values or responsive breakpoints can be altered.

To customize any configurable area listed below, you must include stacks.less (or, depending on your need, stacks-dynamic.less and/or stacks-static.less) into your Less file and wrap your updated \configuration options within the following mixin:

@include "path/to/stacks-dynamic.less";

#stacks-config {
    @body-type-face: 'Roboto', sans-serif;
    @link-color-regular: magenta;
    @link-color-hover: lighten(magenta, 20%);
}

To alter constants, use the following mixin:

@include "path/to/stacks.less";

#stacks-config-static {
    @css-reset: none;
    @breakpoints: 1364px, 1260px, 1140px, 960px, 728px, 640px, 480px, 320px;
}

Available configurations

Constants

Setting	Default	Options
`@css-reset` Which CSS reset to compile in. Legal values are `normalize` for Nicolas Gallagher's normalize.css, `meyer` for the Eric Meyer reset, and `none` if no CSS reset should be compiled in.	`normalize`	`normalize, meyer, none`
`@breakpoints` One or multiple groups of width breakpoints that allow customization of the responsive classes that are generated, including the possibility to apply different breakpoints based on additional selectors (e.g. CSS class on the root element). See the code comments for details.	`1264px, 980px, 640px`	`User defined`

Background color

Setting	Default
`@bgc-lightest` The lightest gray `background-color`.	`@black-050`
`@bgc-lighter` A lighter gray `background-color`.	`@black-075`
`@bgc-light` A light gray `background-color`.	`@black-100`
`@bgc-darkest` The darkest gray `background-color`.	`@black-350`
`@bgc-darker` A darker gray `background-color`.	`@black-300`
`@bgc-dark` A dark gray `background-color`.	`@black-200`

Badge colors

Setting	Default
`@badge-gold`	`#FFCC01`
`@badge-silver`	`#B4B8BC`
`@badge-bronze`	`#D1A684`

Border color

Setting	Default
`@brc-lightest` The lightest gray `border-color`.	`@black-050`
`@brc-lighter` A lighter gray `border-color`.	`@black-075`
`@brc-light` A light gray `border-color`.	`@black-100`
`@brc-darkest` The darkest gray `border-color`.	`@black-350`
`@brc-darker` A darker gray `border-color`.	`@black-300`
`@brc-dark` A dark gray `border-color`.	`@black-200`
`@brc-orange` An orange `border-color`.	`@orange-400`

Border radius

Setting	Default
`@br-sm`	`3px`
`@br-md`	`5px`
`@br-lg`	`7px`
`@br-circle`	`50%`

Box shadow

Setting	Default
`@bs-sm`	`0 @su2 @su8 fade(@black-700, 10%)`
`@bs-md`	`0 @su4 @su8 fade(@black-700, 20%)`
`@bs-lg`	`0 @su4 @su12 fade(@black-800, 20%)`
`@bs-i-sm`	`inset 0 @su2/2 @su8 0 fade(@black-700, 10%)`
`@bs-i-md`	`inset 0 @su2/2 @su8 0 fade(@black-700, 20%)`
`@bs-i-lg`	`inset 0 @su2/2 @su12 0 fade(@black-800, 20%)`

Code colors

Setting	Default
`@code-black`	`#303336`
`@code-gray`	`#858C93`
`@code-blue`	`#0F74BD`
`@code-maroon`	`#7D2727`
`@code-purple`	`#101094`
`@code-teal`	`#2B91AF`
`@code-red`	`#E64320`

Font color

Setting	Default
`@fc-light` Light gray font color	`@black-500`
`@fc-medium` Medium gray font color	`@black-700`
`@fc-dark` Dark gray font color	`@black-900`

Font family

Setting	Default
`@ff-sans` Sets the sans-serif font stack.	`Arial, "Helvetica Neue", Helvetica, sans-serif`
`@ff-serif` Sets the serif font stack.	`Georgia, Times New Roman, Times, serif`
`@ff-mono` Sets the monospace font stack.	`Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif`

Font sizes

Setting	Default
`@fs-base` Sets the body `font-size`. Default size is `13px`.	`@fs-body1`
`@fs-fine`	`11px`
`@fs-caption`	`12px`
`@fs-body1`	`13px`
`@fs-body2`	`15px`
`@fs-body3`	`17px`
`@fs-subheading`	`19px`
`@fs-title`	`21px`
`@fs-headline1`	`27px`
`@fs-headline2`	`34px`
`@fs-display1`	`43px`
`@fs-display2`	`55px`
`@fs-display3`	`69px`
`@fs-display4`	`99px`

Line height

Setting	Default
`@lh-base` Sets the universal line-height value.	`@lh-md`
`@lh-xs`	`1`
`@lh-sm`	`(unit(@fs-base) + 2) / unit(@fs-base)`
`@lh-md`	`(unit(@fs-base) + 4) / unit(@fs-base)`
`@lh-lg`	`(unit(@fs-base) + 8) / unit(@fs-base)`
`@lh-xl`	`(unit(@fs-base) + 12) / unit(@fs-base)`
`@lh-xxl`	`2`

Spacing units

Setting	Default
`@s-full` Used for responsive design	`97.2307692rem`
`@s-step` Used for responsive design	`@s-full / 12`
`@su2`	`2px`
`@su4`	`4px`
`@su8`	`8px`
`@su12`	`12px`
`@su16`	`16px`
`@su24`	`24px`
`@su32`	`32px`
`@su48`	`48px`
`@su64`	`64px`
`@su96`	`96px`
`@su128`	`128px`

Transition easings

Setting	Default
`@te-smooth-slow` Uses the easeOutQuad easing.	`cubic-bezier(0.25, 0.46, 0.45, 0.94)`
`@te-smooth` Uses the easeOutQuart easing.	`cubic-bezier(0.165, 0.84, 0.44, 1)`
`@te-smooth-quick` Uses the easeOutExpo easing.	`cubic-bezier(0.19, 1, 0.22, 1)`
`@te-back-out` Uses the easeOutBack easing.	`cubic-bezier(0.175, 0.885, 0.32, 1.275)`
`@te-back-slow` Uses the easeInOutBack easing.	`cubic-bezier(0.68, -0.55, 0.265, 1.55)`

Z-Index

Setting	Default
`@zi-hide` Hides element behind all other elements.	`-1`
`@zi-base` Reset `z-index` to 0.	`0`
`@zi-selected` Pop the element above siblings.	`25`
`@zi-active` Pop above selected siblings.	`30`
`@zi-dropdown` Set the `z-index` value for dropdowns.	`1000`
`@zi-popovers` Set the `z-index` value for popovers.	`2000`
`@zi-tooltips` Set the `z-index` value for tooltips.	`3000`
`@zi-banners` Set the `z-index` value for banners.	`4000`
`@zi-navigation` Set the `z-index` value for navigation.	`5000`
`@zi-navigation-fixed` Set the `z-index` value for fixed navigation bars.	`5050`
`@zi-modals` Set the `z-index` value for modals.	`9000`
`@zi-modals-background` Set the `z-index` value for modal backgrounds.	`@zi-modals - 50`