If you compile the Stacks within your project and need to customize some things, here are a few things you need to know.
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.
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:
To alter constants, use the following mixin:
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, meyer, none
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
The lightest gray background-color.
A lighter gray background-color.
A light gray background-color.
The darkest gray background-color.
A darker gray background-color.
A dark gray background-color.
The lightest gray border-color.
A lighter gray border-color.
A light gray border-color.
The darkest gray border-color.
A darker gray border-color.
A dark gray border-color.
An orange border-color.
0 @su2 @su8 fade(@black-700, 10%)
0 @su4 @su8 fade(@black-700, 20%)
0 @su4 @su12 fade(@black-800, 20%)
inset 0 @su2/2 @su8 0 fade(@black-700, 10%)
inset 0 @su2/2 @su8 0 fade(@black-700, 20%)
inset 0 @su2/2 @su12 0 fade(@black-800, 20%)
Light gray font color
Medium gray font color
Dark gray font color
Sets the sans-serif font stack.
Arial, "Helvetica Neue", Helvetica, sans-serif
Sets the serif font stack.
Georgia, Times New Roman, Times, serif
Sets the monospace font stack.
Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, sans-serif