Stacks4Stacks

When you have Codafy open to inspect elements on a webpage, it can tell you the following information about an individual element:

• What type of element has been selected.
• The ID applied to the element (if it has one).
• The class names applied to the element (if it has any).
• Where the element is located in the DOM (document object model) hierarchy.
• The dimensions (size) of the element.
• Positioning and any floats applied to the element.
• Border, margin and padding details.

Here is a screenshot showing the Codify stack, with an ImageWizard stack selected in preview:



Codafy won't bombard you with masses of complicated details. You still have the web inspector if you need to know everything! This stack is intended to only display the most useful information, relating to the box-model of an element. The Codafy HUD can be dragged around on the page and you can also navigate the DOM hierarchy by clicking on the tags.

Example

This is a working example of the Codafy stack. Click the button to start...
 

 
 

Compatibility

Because Codafy is intended solely for use within RapidWeaver preview, there as been no effort made to test Codafy or fix any problems outside of Safari. With this in mind, it should be anticipated that this stack will not work particularly well in other web browsers like Firefox, Chrome or Edge. The free Elemental stack offers compatibility with a wider choice of web browsers, but displays less information.

Setup

To use Codafy, follow these simple steps:

1. Once installed into Stacks and RapidWeaver, open your Stacks library and find Codafy.
2. Drag and drop a copy of Codafy into your webpage (only one copy of the stack is required).
3. Preview your webpage in RapidWeaver and click the 'Launch Codafy' button.
4. With your mouse, click an element in the page to view its box-model information.

Other information

A good feature of Codafy is that it only works in RapidWeaver preview (the button is hidden when you export or publish your website). You can permanently keep Codafy in the webpage at all times, if you choose to. It's also possible to setup Codafy as a Partial in Stacks 3 (so you can reuse the same stack on all pages of a website) or @import Codafy into certain non-Stack pages using PlusKit.

This is a really useful stack to have installed, if you are experimenting with custom CSS code or in instances where a stack requires you to enter the class or ID of another element (like a navigation menu). It quickly gives you all the basic information about an element.

Codafy was previously sold through Nimblehost.com as a page plugin. Now that RapidWeaver already includes a web inspector, we have taken the Codafy name and applied it to this stack. The original Codafy plugin is no longer receiving any support or updates. It is recommended that you use this stack instead.

 

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.