Grummage
Grummage proportionally,
Grummage vertically centered.
Grummage perspective,
Grummage 2 Column
Grummage Everything
Grummage stacks are Foundation Columns with a difference.
Lots of Alignment Options
Ultra lightweight
grummage
/'grʌ(m)ɪlɪdʒ/
verb
to firtle, fiiddle or generally caress to achieve the desired action
putting something where it was not meant to be
acting below the outer layer of covering
As soon as you update to Stacks 3 you will automatically recieve the new Grummage stacks in your updater. Previous instances of Grummage, GrummagePlus and Grummage 2col will be labelled as Legacy stacks in your page. They will continue to work and you can even still edit their settings.
Please visit the Whats New in Grummage for Stacks 3 pages for full details.
Vertical Centering
Grummage 2 Column allows you to vertically center columns 1 and 2.
No settings, just a check box.
Vertical Centering behaves perfectly responsively as you would expect
Grummage solves this common layout problem easily. But it doesn't stop there...
You can easily offset the layout too.
Scroll down to the next section to see....
Offset Centering
Offset Centering allows you to add either percentage or rem padding to the vertical center of either column.
Column 1 on the left is offset down by 30%
Better still there are responsive breakpoints so that this padding is removed for mobile views.
No shims and visibility stacks needed, the extra padding is gone when you don't need it.
Keep your page contents lean and mean with Grummage. Why add extra stacks when a one line Grummage media query can do it all.
Full Width Content
Both Grummage 1 and 2 column stacks now allow full width content.
This allows you to break free of the Foundation site max width setting for portions of your content.
Notice how this section will expand beyond the Site Styles max with when you make the browser wider
And of course, Header Plus stacks with autoscaling enabled are an ideal way to make the most of this space, while still behaving perfectly as small screen sizes.
Why Full Width Content?
This was actually a user requested feature for a specific layout.
We liked the idea so much that we incorporated it into Grummage Plus.
See the Width Controls Examples page to see the available combinations
Usually all of you content is limited in width by the Site Width setting in site styles.
This is a good thing to preserve a good looking site on large wide monitors.
Occasionally though, layouts call for content that overspills this width, while the bulk of the content remains inside as normal.
The image grid below is an example of this.
At large browser widths you can see the difference between the normally constrained content in these columns and the full width Grummaged content below.
Contact Us
Contact Us
Gluten-free paleo gastropub authentic flexitarian fixie tote bag, scenester Cosby sweater irony locavore.
Contact Us
Polymersan
Contact Us
© Template design by Justin Easthall - www.easthalldesign.com
Reproduced with kind permission.
Much More Layout Control
Grummage introduced proportional padding to Foundation columns.
Grummage Plus and Grummage 2 Column build on this capability significantly.
Separate padding units for vertical and horizontal.
Adjust the gutter between columns, as with this content
Space columns easily
If you want top and bottom in rem, while the left and right are proportional then now you can.
Grummage 2 Column has all the features of Grummage Plus but in addition...
You can separately proportionally pad each of the columns independently.
Responsive Options
One comment from the original Grummage was that sometimes people did not want the padding to be retained on mobile, even though it is proportional.
Grummage Plus has this covered.
There is now full control of the breakpoint where you can choose to remove the padding if required.
Total Padding Removal
There are times when a layout calls for total removal of the default Foundation row and column padding.
Grummage Plus and Grummage 2 column allow this via a simple check box You get the effect that you want without adding more stacks
Legacy Support
The original Grummage stack will remain in place for both legacy support of existing pages and as an even lighter weight alternative when the new features are not needed.
Use Grummage Plus freely though in new projects, the code size in sitll tiny compared to multi stack solutions to achieve the same effect.
What is more, it is a lot clearer in edit mode without many layers of stacks inside one another.
Fully Foundation
All the Grummage stacks are pure Foundation rows and columns.
They are light weight an add an absolute minimum of code to your published page.
CSS that is not needed is not generated.
Grummage is the single most efficient layout system for Foundation, not to mention the most flexible.
We have worked hard on this update to build on the strengths of the original Grummage stack and take it to the next level
The Basics of Proportional Padding
THIS PARAGRAPH IS SITTING IN A FOUNDATION 1Col GRUMAGE AND HAS 10% PROPORTIONAL PADDING LEFT AND RGHT AND 5% TOP AND BOTTOM . See how the left and right padding size is reduced for smaller screens proportionally and the content is kept perfectly centered.
Gluten-free paleo gastropub authentic flexitarian fixie tote bag, scenester Cosby sweater irony locavore. Gentrify American Apparel craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard meggings fap Terry Richardson XOXO. Sartorial vinyl cornhole, fap kogi Austin meh Terry Richardson art party hella.
THIS PARAGRAPH IS SITTING IN A STANDARD FOUNDATION 1Col AND HAS 80px NORMAL PADDING LEFT AND RIGHT AND 30px TOP AND BOTTOM . See how the left and right padding size takes up too much space on Small Narrow screens and how the Top and Bottom Padding is too small on wide screens
Gluten-free paleo gastropub authentic flexitarian fixie tote bag, scenester Cosby sweater irony locavore. Gentrify American Apparel craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard meggings fap Terry Richardson XOXO. Sartorial vinyl cornhole, fap kogi Austin meh Terry Richardson art party hella.
THIS PARAGRAPH IS SITTING IN A FOUNDATION 1Col GRUMAGE PLUS AND IS JUST LIKE THE FIRST ONE BUT HAS THE RESPONSIVE BREAKPOINT FEATURE SWITCHED ON .
See how the left and right padding size is REMOVED for small screens
Gluten-free paleo gastropub authentic flexitarian fixie tote bag, scenester Cosby sweater irony locavore. Gentrify American Apparel craft beer aesthetic Echo Park. Polaroid Marfa cray dreamcatcher, chambray ennui hella Godard meggings fap Terry Richardson XOXO. Sartorial vinyl cornhole, fap kogi Austin meh Terry Richardson art party hella.
Now the creative stuff...
Plus Stacks
Plus stacks contain original code
© Joe Workman