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.
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:
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:
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.
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.
Just defining the buttonradius will have the default button color, text and padding.
If you wish to create buttons of your inline list Main Menu created above, you may use:
.button(@colorBlue, @colorWhite, 0 @size1, @size3);
Table of Contents
- Getting started
- Gwikons (Icons)
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
Documentation is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.
Theme powered by Groundwork Front-end Framework for Drupal