Stacks4Stacks

"Does exactly what I need. [UsefulStack] is slowly but surely mutating into a Swiss Army knife stack. Wonderful, thanks a lot!" Matthias

UsefulStack was released in July 2013 for the Stacks plugin. Originally UsefulStack was developed with the single task of applying proportionate padding and margins around stack elements, within a page. However the feature set provided in UsefulStack has slowly grown over time. It's now widely regarded as one of the most useful responsive layout stacks elements ever released, and is currently used in thousands of websites. UsefulStack can help you build page layouts which are far more responsive and flexible. UsefulStack also gives you conditional support, so you can display or hide content, at different screen sizes. Recent updates to UsefulStack have introduced support for minimum and maximum width constraint settings, and float alignment too.

Now up-to version 2, UsefulStack has gained a useful setting to display diagnostics and other debug information about your setup, which an addon developer might request from you when you open a support case. Another reason for downloading and installing this excellent stack.

Some key features of UsefulStack include the following:

• Allows you to apply class selector names to a block of content in a page. Useful if you're seeking to apply custom CSS code to elements in your page or if you need to make parts of your page editable using a CMS (content management system) like Surreal or Cushy.
• Apply differing amounts of padding and margin around a stack. Plus the ability to specify the units of measurement used and opt to use more fluid, proportional units like percentages (brilliant in responsive page designs).
• Use a system of conditional logic to hide or show the UsefulStack, depending on whether the screen viewing the page falls-under or exceeds the size you set. For example, multiple columns could be swapped-out and replaced with a more simplified layout on smaller screens.
• Specify the language of the UsefulStack content, which can be of great assistance to search engines and translation tools.
• Optionally provide a title for UsefulStack. If provided, this is shown as an informational web browser tooltip, when an end user hovers their mouse cursor over UsefulStack.
• Set minimum and maximum widths, for UsefulStack.
• Support for ARIA roles (useful for improving webpage accessibility).
• Ability to embed content directly into a theme ExtraContent area.
• Control z-index layering of content.
• Hide content in UsefulStack, on your published website (useful for part-constructed websites and staging).
• Set UsefulStacks (and their content) to be hidden from print or PDF output.
• Apply unique class selector names to list items or sort lists into alphabetical order.
• Output detailed diagnostic information about a webpage, including details like the PHP configuration.

To use this stack, simply drag and drop one or more UsefulStack elements into your page. Ignore the standard stack settings for things like padding and margin, and instead use the UsefulStack padding and margin settings. Adjust anything you need in the stack settings, preview your page to test it, publish and go.

UsefulStack is built on the CSS box-model (using pure CSS and HTML code) and has no dependancies on Javascript (other than the optional list utilities). This makes UsefulStack extremely efficient and reliable to use in pages. For best results, use a quality, responsive and speed-optimised RapidWeaver theme.

Examples

Resize your browser window and watch the padding around the images adjust proportionally as the screen size increases or decreases.

 
In both of the above image examples, the horizontal padding on the images was set to 10% in the stack settings, and 5% on the vertical sides. Because the images only have a width of 1000px, the maximum width of the UsefulStacks was set to 1000px. We also test the conditional logic function, and alternate between two coloured boxes, based on the screen width.

New in version 1.2.0

Options have been added so that you can hide UsefulStack content on published websites, and only display it in Stacks edit mode. This is useful if you're in the process of building new pages and you're experimenting with content or layouts that you don't want the public to see. This hidden content will still get published with the page (and is available to view in the page source code) but will be hidden from view using the CSS display:none code. We also added the option to hide UsefulStack content from print / PDF output, following a discussion on the RapidWeaver forums.

New in version 1.1.0

UsefulStack now allows you to set a minimum and maximum width (in pixels) on the UsefulStack container. This is ideal if you want to constrain the width of UsefulStack on larger monitors, and prevent content becoming overly stretched or distorted. Likewise you can also set a minimum width, which content in UsefulStack is permitted to shrink-down to. A new drop-down menu of options lets you change the alignment of constrained UsefulStack's, within your page.

UsefulStack List Utilities

Added in version 1.4, the 'List Utilities' provide basic options to restyle and reorder an unordered (bulleted) or ordered (numbered) list in your RapidWeaver project. You can do so without the time or expense of using complicated markup or other stack elements. Generally when we're talking about ordered and unordered lists, we're dealing with HTML list markup like this:

<div id="my-list">
	<ul>
		<li>Pears</li>
		<li>Grapes</li>
		<li>Oranges</li>
		<li>Apples</li>
	</ul>
</div>

Checking the 'Unique ID's' option and providing a list selector name of #my-list would result in the markup for your list being converted to something like this:

<div id="my-list">
	<ul class="list-group-1">
		<li class="list-item-1">Pears</li>
		<li class="list-item-2">Grapes</li>
		<li class="list-item-3">Oranges</li>
		<li class="list-item-4">Apples</li>
	</ul>
</div>

So at this point, you can target individual list items with custom CSS code, like text colouring or backgrounds:

.list-tem-1,
.list-item-4 {
	color: green;
}

Through using the Sort Alphabetically checkbox option and providing a list selector of #my-list ul, the list items will be sorted into alphabetical order like this:

<div id="my-list">
	<ul>
		<li>Apples</li>
		<li>Grapes</li>
		<li>Oranges</li>
		<li>Pears</li>
	</ul>
</div>

Both of these list utility options can be used for lists within your main page or sidebar container. Alternatively it can be applied to theme navigation menu's, if your chosen RapidWeaver theme does not already give menu items individual ID's. Note that this has long been a feature in most ThemeFlood RapidWeaver themes for several years.

 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.