Settings

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

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
Privacidad