Modular Scale Typography

We have all heard of the golden mean (also known as the golden ratio or golden section): the self-replicating page with a proportion of 1:1.618 that is said to be found in everything from the design of ancient Greek architecture to the growth patterns of plants.

A List Apart: More Meaningful Typography

To ensure that your text are beautifully proportioned with the base font size you defined on your app-settings.css.less, you may use these variables for you font-sizes. The base of the modular scale is the base font size. The default is 14px
@msBase: @baseFontSize;

@msLarger1: round(@msBase * 1.618); // Default results to 23px
@msLarger2: round(@msBase * 1.942); // Default results to 27px
@msLarger3: round(@msBase * 2.618); // Default results to 36px
@msLarger4: round(@msBase * 3.143); // Default results to 44px

The smaller sizes do not scale with the golden ratio as it will be too small to use it.

@msSmaller1: round(@msBase / 1.166); // Default results to 12px
@msSmaller2: round(@msBase / 1.272); // Default results to 11px
@msSmaller3: round(@msBase / 1.4); // Default results to 10px
@msSmaller4: round(@msBase / 1.555); // Default results to 9px


Pre-defined Colors

Here are the color variables you can use on your custom app-*.css.less files. These colors were tried to be tolerable (as much as possible) in both dark and light background if used as text, and dark and light text if used as background.

@colorGreyrgb(127, 127, 127);
@colorRedrgb(153, 9, 9)
@colorGreenrgb(21, 153, 27)
@colorBluergb(0, 94, 153)
@colorYellowrgb(153, 136, 0)
@colorMagentargb(153, 24, 90)
@colorCyanrgb(73, 153, 153)
@colorOrangergb(227, 162, 26)
@colorPurplergb(145, 0, 153)

Color Scheming

Define the @colorBase on your app-settings.css.less and Groundwork will create a color scheme for you.

For example, you decided to use the @colorOrange as the base color for your color scheme. Groundwork will then give you these colors to use on your entire site, as colors for your links, buttons, backgrounds, etc.


You may of course define your own colors and create your own color schemes by creating new color variables

Table of Contents

Inspiration & credits

Groundwork created and maintained by John Noceda.
Special thanks to all the popular CSS, LESS, SCSS frameworks and boilerplates out there for the inspiration and great ideas

Groundwork Front-End Framework Licenses

Released under the GNU General Public License, version 2.
Fonts included with Groundwork are released under the SIL Open Font License (OFL) version 1.1

Documentation License

Documentation is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Theme powered by Groundwork Front-end Framework for Drupal

Scroll al inicio
Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información