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?
Groundwork 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...
- Install (and configure) Drupal.
- Install the LESS module and the LESSPHP library.
Groundwork 7.x-2.0-rc1 does not work with the latest LESS module. Please see #2301113: Less error, no styling applied for a solution/workaround.
Installation Via Command Line (Drush)
- Download Groundwork:
drush dl groundwork - Clear the cache:
drush cc all - Create your custom theme. For this example, we name it Philippine Sea with
machine name philsea:
drush groundwork 'Philippine Sea' philsea - 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
- Download Groundwork 2.x
-
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 - 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 - Rename the folder of CustomWork to the desired machine name of your new
custom theme. For example: philsea
sites/all/themes/philsea - Inside the 'philsea' folder, rename CustomWork.info.txt to the same name of
the folder and remove the '.txt'.
For example: philsea.info - 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 - 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; - 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:
- Look for a Groundwork sub-theme which looks the nearest you want to achieve
with your site design. Download and install it. - 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 - 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
Development of the Groundwork project is sponsored by Noceda Media Lab.
