Sections

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:

Available Configurations

Constants

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.