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.
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
Colors
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.
| Variable | Value |
|---|---|
| @colorGrey | rgb(127, 127, 127); |
| @colorRed | rgb(153, 9, 9) |
| @colorGreen | rgb(21, 153, 27) |
| @colorBlue | rgb(0, 94, 153) |
| @colorYellow | rgb(153, 136, 0) |
| @colorMagenta | rgb(153, 24, 90) |
| @colorCyan | rgb(73, 153, 153) |
| @colorOrange | rgb(227, 162, 26) |
| @colorPurple | rgb(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.
| @colorBaseDark | |
| @colorBase | |
| @colorBaseLight | |
| @colorComplementLight | |
| @colorComplement | |
| @colorComplementDark |
You may of course define your own colors and create your own color schemes by creating new color variables
Table of Contents
- Getting started
- Settings
- Variables
- Mixins
- Bundles
- Base
- Layout
- Component
- Gwikons (Icons)
- Changelog
- Sub-themes
- HowTo’s
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