Scrrenshot: Home of Groundwork Front-end Framework
Gwikons are custom icon sets that are stored in "Noceda Font Pro",  a light and

Presenting Groundwork version 2... A progressive mobile first front-end framework for Drupal with modular scale typography and powerful layout engine for faster and more effective web development.

The groundwork has already been laid. Reduce your custom theming time! Use the starter theme as is, as a theme with simplistic/minimalistic design, or easily create your own sub-theme for faster theme development.

Here are the key features of Groundwork :

  • HTML 5
  • Responsive design (mobile-first) with configurable breakpoints. Defaults to 768, 960 and 1152
  • Typography using modular scale.
  • Web accessibility optimized with ARIA roles
  • Semantic markup with separation of style with content.
  • Bulletproof flexible grid system with 24 columns (units) as default.
  • Configurable grid
    • Configurable number of columns in the grid
    • Configurable gutter width
  • Comes with its own special font "Noceda Font Pro", a light, elegant and open sans-serif font built in with 304 Gwikons (Groundwork icons)
  • Supports both sidebars
  • 17 regions with a special "Aside" region visible only in nodes.
  • Optimized typography for all standard elements
  • Block source ordering per region
  • Powerful layout engine provides unlimited layout possibilities
  • Collection of preset CSS classes
  • LESS CSS enhanced with loads of Drupal-specific mixins and bundles.
  • HTML5 polyfill to support older browsers
  • Drush support - Create your custom theme with advanced options in just one command.
  • and many more.

What is Groundwork?

GroundworkGroundwork is a front-end framework especially made for Drupal. It was built to help you design beautiful websites faster and more efficient. As its name implies, it's a groundwork which comes already with sensible generic style defaults, CSS browser hacks, collection of mixins, bundles and more. Because of Groundwork's basic generic style, you may also wish to use its starter sub-theme as is, as a structured minimalistic theme or design your own.

Groundwork uses a 24 grid system as default. The layout options available 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. The other 14 regions are available to you for unlimited block placement and layout options.

For complete documentation of Groundwork 2.x, please visit http://groundwork.noceda.me

Demo and Docs of 1.x branch have been moved to http://groundwork-7.x-1.x.noceda.no. There will still be full support for the 1.x branch, but no new features... only maintenance fixes.

Getting Started

For the complete documentation, please visit http://groundwork.noceda.me

Before you begin...

  1. Install (and configure) Drupal.
  2. Install the LESS module and the LESSPHP library.

Installation Via Command Line (Drush)

  1. Download Groundwork:
    drush dl groundwork
  2. Clear the cache:
    drush cc all
  3. Create your custom theme. For this example, we name it Philippine Sea with
    machine name philsea:
    drush groundwork 'Philippine Sea' philsea
  4. Enable and set your new theme philsea as default:
    drush en philsea --yes && drush vset theme_default philsea

See "drush help groundwork" to view advanced options.

Manual Installation

  1. Download Groundwork 2.x
  2. Extract the downloaded file and place the groundwork folder in your Drupal
    installation under one of the following locations:

    • sites/all/themes
    • sites/default/themes
    • sites/example.com/themes

    Please check Drupal documentation to learn the differences of these folders:
    https://drupal.org/getting-started/install-contrib/themes

  3. Copy the folder CustomWork (found inside the Groundwork folder) to the same
    folder as where you extracted Groundwork.
    For example:
    sites/all/themes/groundwork
    sites/all/themes/CustomWork
  4. Rename the folder of CustomWork to the desired machine name of your new
    custom theme. For example: philsea
    sites/all/themes/philsea
  5. Inside the 'philsea' folder, rename CustomWork.info.txt to the same name of
    the folder and remove the '.txt'.
    For example: philsea.info
  6. Edit philsea.info and find name= CustomwWork This is the human-friendly name
    of your theme. Change it to the name of your theme.
    For example: name= Philippine Sea
  7. Edit app-settings.css.less found inside the custom directory of your new
    theme, and define the location of your theme.
    For example: @themeDirectory: sites/all/themes/philsea;
  8. In the browser, log in as admin in your Drupal installation and go to
    Administration > Appearance > List: http://example.com/admin/appearance/list.
    Click the "Enable and set default" link on your new custom theme.

Note: It is not necessary to enable Groundwork but it must be present.

Alternative Installation

Use an existing sub-theme. Easy design development:

  1. Look for a Groundwork sub-theme which looks the nearest you want to achieve
    with your site design. Download and install it.
  2. Go to the custom folder of the subtheme and rename all 5 files that end with
    css.less.txt to css.less.
    For example: app-settings.css.less.txt to app-settings.css.less
  3. Customize away!

Recommended modules

If you wish to use classes on your markup instead of declaring mixins on selectors, may I suggest the modules:

  • Block Class
    Add classes to any block through the block's configuration interface.
  • Menu Attributes
    Specify additional attributes for menu items such as id and class.

Available Sub-themes

Visit Groundwork's main site to see the full list of available sub-themes of Groundwork.

Credits

Drupal design and development by Noceda Media Lab
Development of the Groundwork project is sponsored by Noceda Media Lab.

Project Information

Downloads