Theme Settings

Groundwork is modular. The size of your CSS depends on the components, bundles, and colors you enable/disable at Groundwork's theme settings page of your Drupal installation.

Main CSS Files


The app-styles.css is where you put your custom styles. This is enabled by default.


By default, Groundwork uses groundwork.css file as the main css file generated by the groundwork.scss file. If you are developing your theme using SCSS, disable groundwork.css in the theme settings and Groundwork will then use the groundwork-overrides.css generated from groundwork-overrides.scss. There is also an _app-settings.scss file you can use for your variable overrides. 


Groundwork components are reusable style classes you can use when designing your site or during content creation. How to use these components are described on their own corresponding pages.


Style bundles are components with ready-made styles applied to specific page elements on your site. Most are enabled by default. If you do not like a particular style, just disable it and you can then style the element into your own liking.


Groundwork comes with 12 different colors. You may choose a skin color to apply a color scheme of that color to basic elements of your site. Choose "None" if you do not want Groundwork to apply a skin color on your site.

These 12 colors are also available as classes which you can use on your site. How to use these classes are described itheir corresponding pages.