Bundles

Bundles are mixins that do specific styles you can use for your design. You are encouraged to share your own style bundle to the community by submitting an issue.

Below are the bundles pre-defined in Groundwork:
Inline List | Button

Inline List

To create inline lists, all you have to do is style your unordered list with the bundle .inline-list();

For example, if you decide to use the Main Menu block instead of the main menu pre-defined in the theme, you can do:

#block-system-main-menu {
  ul.menu {
    .inline-list();
  }
}

You can also define the space in-between using the global @sizeN variables

Side note: You may wish to hide the block title Main Menu if you have your menu as inline list. See Documentation > Mixins: Helpers for more info. Then you may use:

#block-system-main-menu {
  h2.block-title {
    .visually-hidden();
  }
  ul.menu {
    .inline-list(@size3);
  }
}

Back to top

Button

To create buttons, all you need is the bundle .button() for the default style. If you wish to customize the style of your button, you may use .button(@buttoncolor, @buttontext, @buttonpadding, @buttonradius).

@buttoncolor is where you define the color of your button
@buttontext is for the color of the text
@buttonpadding is the padding of the button
@buttonradius is the radius of the button.

.button();

The default button color is white, text color is 60% darker of the button color, 0 top padding and @size2 side padding, and with a radius of @size1.

.button(@buttonradius: @size2);

Just defining the buttonradius will have the default button color, text and padding.

.button(@buttonradius: @size3);

.button(@buttonradius: @size4);

.button(@buttonradius: @size5);

If you wish to create buttons of your inline list Main Menu created above, you may use:

#block-system-main-menu {
  h2.block-title {
    .visually-hidden();
  }
  ul.menu {
    .inline-list(@size3);
    a {
      .button(@colorBlue, @colorWhite, 0 @size1, @size3);
    }
  }
}

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