Layout

Because of configurable grid setting, the layout options available with the Groundwork base theme are endless, which makes the Groundwork suite of themes extremely versatile. Customizing a website to specific layout and design is very easy. Groundwork supports 17 regions whereas the regions page_top, page_bottom, and help are special hidden regions. Unlimited block layout options can be achieved utilizing the Groundwork grid system which you can declare on your app-*.css.less files to semantically separate markup/content with styles. You may of course wish to use the helper classes to be found in the resources folder and add classes to your content instead.

For the default layout options, blocks in the Sidebar First region have a full width of 8 units and blocks in the Sidebar Second have a full width of 4 units (Please note that these widths can be defined by you in the app-settings.css.less file). The width of the Main Content varies depending on the presence of the sidebar regions. Aside from the Main Content, Node Aside, Header Annex, Sidebar First and Sidebar Second regions, all the remaining 9 regions have 100% width of their container (24 units). This means that the layout will be entirely up to you. The possibilities for different layouts are endless!

Blocks

On your app-progressive-*.css.less, you can declare the width of your block with the mixin .unit(N) where N is the number of units.

For example

If you want 3 columns in a particular region, divide your desired number of columns with the total number of units in that region. If you want 3 columns in the placard region (24 units / 3 = 8 units), you can declare the number of units like this:

app-progressive-*.css.less

#placard .block {
  .unit(8);
}

This means that all blocks in the placard region will have a width of 8 units, therefore achieving 3 columns in a region with a total of 24 units.

Since Groundwork is progressive, you need to declare the unit count in every media. If you only declare it in app-progressive-narrow.css.less, the width of the block will have the same width from narrow media and wider.

A concrete example

Looking into the footer of this website, we see that the footer has 4 columns. So that’s 24 units / 4 = 6 units. The declaration in our app-progressive-*css.less files look like this:

app-progressive-narrow.css.less

#footer .block {
  .unit(6);
}

app-progressive-standard.css.less

#footer .block {
  .unit(6);
}

app-progressive-wide.css.less

#footer .block {
  .unit(6);
}

• You have the opportunity to change the number of columns depending on the width of your media. Maybe styling the blocks in 4 equal columns are too small in the narrow media? Have 3 columns .unit(8) in app-progressive-narrow.css.less then, or have 6 columns .unit(4) in the wide media instead.
• You may of course override the width of a particular block by using its block id.

User-defined content

If you wish to use the grid system on your nodes, views, etc., you need to use 2 mixins: .column() and .unit(N).

For example

app-progressive-*.css.less

#node-1 p {
  .column();
  .unit(6);
}

.front .views-row {
  .column();
  .unit(8);
}

or grouping them to avoid CSS bloating

#node-1 p,
.front .views-row {
  .column();
}
#node-1 p {
  .unit(6);
}
.front .views-row {
  .unit(8);
}

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