PVII Harmony: Best Practices Series

The User Class Options

You can assign an optional User Classes to Harmony Sections, Columns, or the entire Harmony Grid. User classes are one of the most powerful features in Harmony, allowing you full freedom to customize individual elements beyond the options in the UI. User classes are assigned directly in the Harmony interface and point to CSS classes that you create, giving you total design freedom. If you are a proficient CSS author, the User Class entry boxes in the Harmony UI allow entry of multiple class names. Simply separate each class name with a space. Just remember that user class names must never contain the word harmony or the acronym hmy.

Note: This tutorial is based on Harmony version 1.1.6 or later. If your version is older, please re-download now.

The Section User Class

The section element should never be assigned box-model properties, such as borders, padding, or margins. Anything else is fair game.

Note: User Class rules are best kept in a separate CSS file so they can be more efficiently managed. We suggest creating a new CSS file and naming the file p7HMY-user.css and placing it inside your p7hmy folder. Link the file in your document head so that it comes after the default Harmony CSS file link:

<link href="../p7hmy/p7HMY-01.css" rel="stylesheet" type="text/css" media="all">
<link href="../p7hmy/p7HMY-user.css" rel="stylesheet" type="text/css" media="all">

Section User Class CSS

Though an extremely useful option, the Section User Class is probably going to be the least used... Until you learn how powerful an option it actually is.

Changing Column Order via Media Query

Let's say you want this column, which displays as the second column in this Harmony row, to appear before the screen capture at left when this page is viewed on a small screen. To do that, we'll use the order property to assign an order to both sections in this row. We'll do this by assigning a user class to both sections. The first section (the one containing the screen capture) is assigned a class of intro-01 and the second section (this section) is assigned a class of intro-02. We put these classes inside a media query set to run when the screen is 600px wide or less.

@media only screen and (min-width: 0px) and (max-width: 600px) {
.intro-01 {order: 2;}
.intro-02 {order: 1;}
}

Note: When assigning order to Harmony sections, all sections in the Harmony instance, must be assigned an order.

Try it out...

Preview this page in a browser, make your window narrow, and watch what happens when the columns linearize—this column will change its order, appearing above its row sibling.

This column is assigned the User Class abstract-bg, which sets a background image. You can also use the content user class to assign font attributes, colors, and just about anything else you need to customize your Harmony pages. There are no limitations.

Content User Class CSS

The power built into Harmony is unparalleled. Your Harmony page can be anything you want it to be!

Assigning a Background Image

.abstract-bg {
background-image: url(images/art.jpg);
background-repeat: no-repeat;
background-size: cover;
}

Content User Class

Box-model properties, such as borders, padding, or margins can be assigned freely to the content element.

Note: User Class rules are best kept in a separate CSS file so they can be more efficiently managed. We suggest creating a new CSS file and naming the file p7HMY-user.css and placing it inside your p7hmy folder. Link the file in your document head so that it comes after the default Harmony CSS file link:

<link href="../p7hmy/p7HMY-01.css" rel="stylesheet" type="text/css" media="all">
<link href="../p7hmy/p7HMY-user.css" rel="stylesheet" type="text/css" media="all">

Grid User Class

The grid is the entire Harmony instance—its root DIV. Here we assign the user class grid-matte, which assigns a semi-transparent background color, allowing this page's background image to peek through.

.grid-matte {background-color: rgba(0,0,0,.80);}

Adding a Descendant Selector

Since we only want to display a single column, and we don't want that column to stretch the entire width of the screen, we can use a descendant selector to target the hmy-section element inside the grid, setting a max-width and auto margins (to center it). Here's the CSS rule:

.grid-matte .hmy-section {max-width: 1200px; margin: auto;}

Note: User Class rules are best kept in a separate CSS file so they can be more efficiently managed. We suggest creating a new CSS file and naming the file p7HMY-user.css and placing it inside your p7hmy folder. Link the file in your document head so that it comes after the default Harmony CSS file link:

<link href="../p7hmy/p7HMY-01.css" rel="stylesheet" type="text/css" media="all">
<link href="../p7hmy/p7HMY-user.css" rel="stylesheet" type="text/css" media="all">

Where does the CSS go?

User Class rules are best kept in a separate CSS file so they can be more efficiently managed. We suggest creating a new CSS file and naming the file p7HMY-user.css and placing it inside your p7hmy folder. Link the file in your document head so that it comes after the default Harmony CSS file link:

<link href="../p7hmy/p7HMY-01.css" rel="stylesheet" type="text/css" media="all">
<link href="../p7hmy/p7HMY-user.css" rel="stylesheet" type="text/css" media="all">

 

Wrapping it up...

PVII Harmony is a responsive page layout tool that leverages the full power of the CSS Flexbox specification. Months of R&D have yielded a tool that gives you access to all of Flexbox's power in a simple to use automated interface running inside Dreamweaver, without having to worry about browser quirks. Harmony is a definitive solution—a bridge to the future of web page design, a new way forward that you can use today, on new or existing pages.

Navigation