Basic settings for your custom theme can be defined in the file app-settings.css.less to be found inside the custom folder of your theme.
Let’s make the theme path a variable so we can easily use it on our LESS files. If you installed your custom theme via Drush, this will be automatic.
@themeDirectory: sites/all/themes/mytheme;
@bodyColor: @colorWhite;
@textColor: darken(@bodyColor, 60%);
@linkColor: @colorBlue;
@linkColorHover: darken(@linkColor, 10%);
@linkColorVisited: @linkColor;
@linkColorFocus: darken(@bodyColor, 100%);
You may see variables.css.less in directory «groundwork/less» for pre-defined color variables you may use for your site’s color scheme
Basis for the color scheme variables.
@colorBase: @linkColor;
Define font families.
@fontSans: «Noceda Font Pro», «Segoe UI», «Helvetica Neue», Arial, sans-serif;
@fontSerif: Georgia, Times, «Times New Roman», Palatino, serif;
@fontMonospace: Consolas, Monaco, «Courier New», Courier, monospace;
Define your site’s fonts.
@fontText: @fontSans;
@fontHeadings: @fontSerif;
@fontCode: @fontMonospace;
@fontSiteTitle: @fontSerif;
Layout Settings
Settings below determine the computations that build the layout. The default settings have the golden 24 style with 24px gutter width, 24px unit width in a 24 unit grid resulting in 1128px, which is the width of the wide media. The default line height is also 24px, to achive an even look and feel. Please be careful in editing the settings below.For best results, leave them at default.
In px. Measurement unit should not be declared as the variable is used in numerous computations.
@baseFontSize: 14;
@gridUnitGutter is equal to @baseFontSize * @baseLineHeight. Default @baseLineHeight is multiplied with @baseFontSize that equals the gutter’s width and grid’s total units. Awesome 24.
@baseLineHeight: 1.71428571430;
Grid Settings
The width of the gutter in between columns. Default results in Awesome 24.
@gridUnitGutter: round(@baseFontSize * @baseLineHeight * 1px);
The total number of units in the grid. Awesome 24.
@gridTotalUnits: 24;
Breakpoint of narrow media.
@gridContainerNarrowWidth: 768px;
Breakpoint of standard media.
@gridContainerStandardWidth: 960px;
Breakpoint of wide media. 1128px + @gridUnitGutter for the Awesome 24.
@gridContainerWideWidth: 1152px;
Basing from @gridTotalUnits, how many units does the site branding occupy? Note that @gridTotalUnits – @gridBranding = number of units for the header-annex region.
@gridBranding: 8;
Basing from @gridTotalUnits, how many units does the sidebar-first occupy? Note that @gridSidebarFirst + @gridSidebarSecond = number of units for the main content.
@gridSidebarFirst: 8;
Basing from the @gridTotalUnits, how many units does the sidebar-second occupy? Note that @gridSidebarFirst + @gridSidebarSecond = number of units for the main content.
@gridSidebarSecond: 4;
How many units does the node-aside region inside the main content occupy? Must be less than the no. of units of main content when 2 sidebars are present.
@gridNodeAside: 6;
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