All websites are in some way built up using blocks. As a framework Morph is a structure by nature, so what better way to structure the code than using the principal of building blocks to make up the page - plus give you various methods of control to quick and easy manage each block.

Even a simple website with a header, left sidebar, content area and footer can be seen as being made up of 4 main blocks of content. This is also apparent in nearly any CMS theming system which separates the blocks of content into different files.

Click here to view the interactive layout demo

Stepping up to the challenge

The biggest challenge in creating Morph's structure was for us to know which blocks you will use when, how, on what pages and in what context. It would also have to cater for a wide variety of layouts, to literally change shape and suit virtually any layout requirements for any project.

We knew that if we could do this, and give you precise control on what to do with each block of content, it would help you build websites with Joomla so much easier and faster than you are used to. Based on the principal of blocks, we structured Morph's code into sections, which are essentially strategically placed building blocks making up a website. These blocks can then be controlled in Configurator.

So what is so special about Morph if most websites are built using blocks?

It is not so much that Morph is made up of blocks as much as what can be done with each block and the level of control. Not only that, there is also an intelligent side to the blocks that make everything so much easier for you.

Morphs building blocks are contextual. Each block will vary in what it does and what can be done with it, based on where it is positioned and what its possible uses are. Lets look at 4 of the blocks characteristics and 2 of the options available to you to control each block.

Characteristic -> Module positions

Wondering what the relation of a block in Morph is to a module position in Joomla?

Nearly all of the blocks in Morph have a matching module position (others more than one) in Joomla. This gives you the ability to easily publish your Joomla modules to any block.

Characteristic -> Intelligent grids / modules

What if you need 2 or 3 modules to display along side each other in a 2 or 3 column fashion?

Morph will do all the work...all you need to do is publish the number of modules you need (1-3) in that block and Morph will work out how much space is needed for each module.

You can even turn on equal heights on some blocks if you need it (depending on your scenario). Publish 3 modules and they will each use one third 33% of the available space in the block.

If you are using 2 modules in any intelligent grid block they will automatically share the space using 50% each by default.

You can also further set the ratio between these 2 modules depending on how you want to use them. Perhaps a 70% / 30% split works better for what you want to do in a particular block.

This currently works with 1 to 3 modules, but more variations are in the works to give you an extremely wide array of options to choose from.

Characteristic -> Collapsible blocks

Blocks are by default inactive until content in the form of a module is published to them.

This makes Morph ideally scalable for small or large websites. Although Morph is made up of dozens of blocks and positions, they only load if something is put inside them. If you want to hide a block, you can either turn it of from a master setting in Configurator or you can unpublish any content to it and it will disappear from the page entirely.

Characteristic -> Complete Overrides

Maybe you don't like what we have in a block because it's not flexible enough for what you want to do?

Morph even gives you the ability to completely override a blocks code output and put your own html, javascript, php or even Joomla module positions and other core Joomla functions inside of the block.

The footer on this website is using a footer block override to add a set of footer links in the column format we wanted. This is because its much easier and faster to code these links (mostly external) by hand than creating and assigning all these menus in Joomla.

Option -> Block level control in Configurator

To give you full control of your layouts, each block has a set of options that are available to you in Morphs' Configurator.

Using this companion tool to Morph, you can carry out a wide variety of block specific tasks, from simply disabling the block, or setting the dimensions, to completely converting the block into different output types based on how it is to be used.

One important thing to note is that these options are contextual. This means that the options for each block will vary and is specific to that block based on where it is in the overall layout and the context within which it may be used. eg. the block that contains the main navigation module will have different options to the footer block because its positioned and used differently.

Option -> ChromeFX

Set a different code output for each module in a block, for example convert a block with 3 modules side by side into a set of 3 tabs to have more space for your content. Read the ChromeFX basics.

Sidebar widths

These options are specific to the sidebar blocks, as it's used to set default sidebar width and position. In Morph each sidebar module position (left/right) is tied to a specific layout scheme.

Outer Layout: This controls the left module positions (sidebar) width and position in relation to the main content and right sidebar.

Inner Layouts: This controls the right module position (sidebar) width and position in relation to the main content only.

The left position can be positioned on the right, or as the name suggests, outside of the inner (right) position.

Movable

Certain blocks can have their position in relation to other blocks on the page changed to accommodate for more types of layouts. These changes are limited to certain blocks but are strategically chosen to provide most flexibility.

Lets say your menu block is set to display below the header, you can move it above the header instead, or even above the main branding to the top of the page.

Grid split

If you are using 2 modules in any intelligent grid block then they will automatically share the space 50% each by default. You can also further set the ratio between these 2 modules depending on how you want to use them. Perhaps a 70% / 30% split works better for what you want to do in a particular block.

HTML hooks

To further allow for more varied layouts, specific strategic blocks can have additional markup added and wrapped inside or outside of the block. This to apply a surprisingly wide array of design variations and effects. As themelet developers for Morph, this is one of the tiny features that goes along way in our work to create vastly varied looking layouts.

Turn block into a slider

This is currently still in its infancy and works in only one position at the moment, but will be extended to more. It allows you to turn a block into a "sliding shelf". This means the content will be hidden by default and a button will display instead. When clicked it will slide down with the content inside of it. The text that is displayed on the button you can easily set inside Configurator.

Disable modules

Even though a block will automatically disappear from the page if no content is published to it, sometimes (for example when testing) it's more of a hassle to have to go unpublish everything. You can easily turn the block of, it is like a master switch you can use to override everything else and hide the block completely.

Equalize modules

You are going to want some blocks, depending on how they are used, to have equal height or it will look strange on your website. Particularly if a background is used on a set of horizontal modules. The equalize modules option, if set on that block, will automatically calculate the heights of the modules for you.

Default module FX style per block

You are able to set a default ModuleFX style for each block. These styles will be the same styles that are applied to the modules using Morph's ModuleFX, which by adding a suffix to the module changes the look of the module. The only catch with this feature is if you want all modules to have a particular style in that block, you have to open each module and add the suffix. This feature is a shortcut and allows you to set a default ModuleFX set of styles to all modules in a particular block.