Advanced Options

Component Categories

You can place each component in your style guide into a category, like this:

<div data-mf-name="Big Product Tile" data-mf-category="Product Catalog">
...
</div>

Nesting Components using Dropzones

Often you’ll want to be able to place components inside each other. You can specify where components can be placed by adding a data-mf-dropzone attribute to the container, like this:

<div data-mf-name="Big Product Tile">
    <div data-mf-dropzone></div>
</div>

If a component has multiple dropzones, each one needs a unique name, like this:

<div data-mf-name="Two Column Layout">
    <div data-mf-dropzone="column-1"></div>
    <div data-mf-dropzone="column-2"></div>
</div>

The dropzone container will appear with a dotted outline when you place the component on the page, so you can see where new components can be dropped.

Page Templates

By default, each page will start out completely blank. However, if your style guide is in a template — for example, a header, main content region and footer, you can use it in your mockups. MixFrame will clear out the main content region for you, and you can start dropping components into it.

All you need to do is mark the template content region with the data-mf-template-content attribute, like this:

<header>
    {{Site's logo and main menu are here.}}
</header>
<div data-mf-template-content>
    {{Your style guide is here.}}
</div>
<footer>
    {{Site's footer menu and copyright are here.}}
</footer>

Next time you create a page, you will have an option to use a blank page or the template.