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:

1
2
3
4
5
6
7
@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:

1
2
3
4
5
6
@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

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-navigation

Set the z-index value for navigation.

1000
@zi-navigation-fixed

Set the z-index value for fixed navigation bars.

1050
@zi-dropdown

Set the z-index value for dropdowns.

2000
@zi-popovers

Set the z-index value for popovers.

3000
@zi-tooltips

Set the z-index value for tooltips.

4000
@zi-banners

Set the z-index value for banners.

5000
@zi-modals

Set the z-index value for modals.

9000
@zi-modals-background

Set the z-index value for modal backgrounds.

@zi-modals - 50