Ultimate web design course

Collection lists are one of the two main ways we can design and develop with content from a collection. Here's a sample collection we created for a group of team members. From any page in our project, we can access the Collection List right from the Elements panel, and drag it right onto the Canvas.

We want to quickly cover three aspects of a collection list: the basic layout, binding to a collection (this is super powerful), and collection list settings.

Let's do basic layout.

We're dragging the collection list and dropping it right on the Canvas. So we have a bunch of empty purple boxes. And though we're just getting started, we can choose our collection from the dropdown, and we can play around with layout options.

Regardless of the layout we choose, if we go to Preview, we'll see the current design: literally nothing's there. Let's go back out of Preview. There's nothing there because we haven't referenced any of our content.

Since our collection list gives us access to anything from a collection, we can drop an element right into any collection item in our collection list. Let's make this heading an H3, but it could be any text element.

And we can bind that element right to a specific field from our collection. This is just getting the name from our team members. And that's it. We're looking at the content — we have an H3 for each of our items in the collection list.

Let's keep going. We can drag in an image element. And when we're dropping these elements in, they're static. They're static until we bind them to something from a collection. And when we do? Each item in our collection list is referencing the relevant field.

All we're doing is dragging in normal elements (static elements) and binding them to specific fields in our collection.

We can, of course, add styles to any of these. And as we're adjusting here, we can see that changes in a collection list are done in lockstep. That is: changing anything in one collection item affects the others. That's by design. If we drag in a div block to wrap and style the content in each item? Those changes are happening in all our collection items.

There's still a major advantage to using classes — that is: while everything's done in lockstep in this collection list, we might want other collection lists on other pages throughout our project. Of course, classes will empower us make style changes project-wide.

And we're accelerating here (quite a bit) so you don't have to sit through each and every frame, but the idea here is that you can bind dynamic content to static elements in a collection list.

That's binding. Let's look at our settings.

We can select our Collection List Wrapper element (or our Collection List element) and adjust our layout at any time.

Our collection list settings also let us add filters. Filters empower us to show only the collection items we want — collection items that match one or more criteria.

We can also choose all sorts of options related to sort order — how we want the collection items to be sorted. Maybe based on when the collection item was updated: newest to oldest.

If we go back into the CMS and into our collection? And we go inside one of our items to make a change? Of course, we know that'll affect how recently this item has been updated.

Which means back in our collection list, we'll see that Dale is displayed first. We're sorting based on when the collection list was updated. Newest to oldest.

We can also put limits on the number of collection items displayed. This will only display the number of items specified here.

So. Collection lists. We can drop them in anywhere. They give us access to anything from a collection. We can choose our layout, we can bind collection content to elements inside the list, and we can, of course, configure our settings to tell the collection list how to sort and display the items in our design.

The Video field is straightforward: from here, we can paste in any link to a YouTube or Vimeo Video. This can be done, of course, in the CMS — or by a collaborator or client in the Editor.

So how do we implement? On the Canvas, we can drag in a Video element from the Elements panel into any Collection List or Collection Page. And when we do that, we can get the Video right from our collection — we can bind it right to the Video field.

Of course, we can format this just as we'd format the element if it was using a static YouTube link. In this case, the Video link that's used here is bound to the Video field in the item that's being referenced.

That's the Video field.

This is it. This is the Style Panel. From here, we can control each and every aspect of styling. We can create classes which let us reuse our styles throughout the project.

And we’re going to cover some of the more powerful features and functions of the Style Panel. And this will give us extremely granular control over the way elements are styled throughout our project.

Three things we'll cover: the top section which includes our Selector field, the anatomy of the style sections, and the indicators we'll see when we're using the Style Panel.

Let's start at the top. When we select an element, we can see the element type right at the top of the Style Panel.

Under that is the Selector field. This is where we'll see the option to select a class or a tag which will apply to the selected element. When we're styling, we'll see that class or tag right inside the Selector field.

The other feature here is the target icon. This will give us a page and project count — how many times this class or tag is used.

We can even click on this to toggle a pink or magenta outline to identify these elements if they're visible.

For now, we'll move on to the various style sections.

Some of these have an Advanced toggle. When we activate or deactivate that option, the number of options we can see increases or decreases.

We can also collapse any of these style sections. We can click right on the label for each pane to collapse or expand.

And as we go through Layout, Typography, Background — we can see all the CSS properties we can visually manipulate. We've created instructional content on each of these, but something we want to highlight right now is the indicators we can already see on the screen.

In the Style Panel, orange indicators tell us that a value is being inherited from somewhere else. If we click that orange indicator, we can see exactly where the style is coming from.

If our current class or tag has its own value for something, that's indicated in blue.

So when we collapse these style sections — when these panes are collapsed, the blue and orange indicators are giving us a quick overview so we can glance and see what's affecting the current class or tag.

Now, we can also use the Inheritance Menu to quickly visualize and select from the different classes and tags affecting our current styling. We can make a change — in this case we're changing the font — then, at any time, go right back to where we were styling.

So. We have the top section which contains our Selector field: show's what we're styling.

We have our style sections, which can collapse or expand — these panes give us control over all our CSS properties — all our styling options.

And finally, we have orange and blue indicators. Orange means whatever we're styling is inheriting a value from something else, and blue means we've added or styled something on the current class or tag.

We'll cover all of this comprehensively — but this is a good overview of the layout and the anatomy of the Style Panel.

Tags give us a great way to control the default styling for a particular element type. As we already know, we can set a lot of defaults for our project — like font settings — inside our Body (All Pages) Tag. This is a great starting point.

So we're going cover three examples for styling Tags: Headings, Links, and Images.

Let's do Headings. If we drag in a Heading from our Elements panel? Make it an H1? Of course, we're getting some style values here, like font, from our Body (All Pages) Tag.

But let's use our dropdown, and select All H1 Headings. And just like that, we have access to styling the Tag. All H1 Headings throughout our project. Let's make some changes to the margin to affect spacing, and we can go in and affect font size. Maybe we want all our H1s to have a thicker font weight so we can adjust the font weight.

And now whenever we drag an H1 into our project, we're starting with these defaults.

This doesn't stop us from using classes. In fact, we can create a class on any of our H1s — maybe this one is a major Heading — so we'll make some changes to affect that. These changes are using the All H1 Headings Tag as a starting point. Of course, not every H1 in our project needs to look identical. Or we can remove that class, and check our orange indicator to see that, once again, things are being inherited from our All H1 Headings Tag.

So, headings here can take a lot of styling cues from the Body. When we modify our All H1 Headings Tag, we're affecting the default styling for H1s. We can style further by adding a class, and we can even do variants of those using combo classes.

The combo class takes its styling cues from its base class, which takes its styling cues from the Tag, which takes its styling cues from the body, which takes its styling cues from GQ.

That's Headings.

Let's power through Links. Here's a paragraph. Let's go in (double-click) then select some text. And we'll make it a Link. Let's do the same thing for some more text, again, making this a Link. And with any of these selected, let's go up in our Style panel and hit the dropdown to select All Links.

From here, we can mess with text decoration. Or we can change our default Link color. Keep in mind that All Links also serves as the basis for other types of Links. So in Hover here, we can change the font color. But if we go over again to the Elements panel, then we drag in a button, on hover, we can see that our All Links style affects this, too. So that's something to keep in mind when styling.

That's the All Links Tag.

Let's end on Images.

From our Asset Manager, we'll drag an Image right onto the page. And with any Image selected (like this one), let's go to our All Images Tag. Actually, this is a great time to go back and show that we can do this even after we've added a class or combo class. Let's create a quick class and hit enter. And now, we can click in over here, and select our Tag right from the dropdown: the All Images Tag.

Say, by default, we want Image elements we add to our project to have rounded corners. We can set our rounding, and not only can we see it on the Canvas, but if we go into the Asset Manager and pick a new Image to drag in? It's carrying those defaults from the Tag (the All Images Tag).

That's Images.

So. Tags. Do you need them? Hanes might argue "no." Others, like Dale, will argue "yes."

The truth is, the real answer is somewhere in between: it's entirely up to you. If you're creating a quick one-page project with a Heading and a paragraph, do you need to go in and configure all your Tags? Probably not. But as you scale, Tags can save you a ton of time by giving certain element types a starting point. A basis for styles on particular kinds of elements.

But that's it. Those are some of our thoughts on Tags.

Making manual style changes to each and every element is a pain. It takes a ton of time to enter repetitive values, and once you've done that, changes to those values can seem even more frustrating. Classes contain styling information, and you can apply these classes to as many elements as you want throughout your project.

We have three things to cover here — really straightforward: creating classes, applying classes, and editing classes. Let's create a class.

Now this page has a number of sections, and each section has a heading inside at the top. These headings have been dragged right in — nothing has been applied — nothing has been styled. So we're styling from scratch.

With our element selected, we can begin styling right away. We can make changes to our layout like margin. We can adjust typography — maybe choose a different font or adjust the font color. We can adjust all sorts of style values.

The big takeaway here is that the moment we began styling, a class was automatically created. And when we intend to reuse (or even just organize) this class, we can double click it to rename. Let's call this Best Heading Ever. And you can call it whatever you want.

As an alternative, you can select any element that doesn't have a class applied, and instead of styling first, you can actually start by clicking in and naming a new class.

That's creating classes.

Applying classes is where things start to get interesting. Now we can see inside our Selector field that this element — this heading — has the Best Heading Ever class applied. But right now, this is the only element that's using that class.

So let's go down to another heading and select that one. And if we click inside our Selector field, we can type in Best Heading Ever. Hit Enter. And the class has been applied.

Let's do it again to this heading. This time, we can see the class name appears as we start typing it out, so we can use the keyboard arrows or the mouse to select our class.

Now what if an element already has a class? Here's a heading which already seems to have a different class listed in the Selector field. If we hover over and click on the down arrow, we can remove that class. And just the like the others, we can click inside and apply our Best Heading Ever class.

That's applying classes.

Finally, let's edit our classes.

Once a class has been created, we can select any element that's using our Best Heading Ever class.

When we go in and make a change, that change affects all instances where that class is used throughout the project. No more manually changing each and every tiny detail. You do it once. Classes do the heavy lifting.

And if we want to rename our class? Maybe it deserves a promotion? Again, just double-click, and type the new name. This will change the name of the class throughout the project.

So, we can create classes which contain all our style information. We can apply classes to as many elements as we'd like. And of course, we can edit the styling on these classes, and those changes will affect the styling on each and every element that's using that class.

Sometimes it's impractical to create separate classes every time you want to make a change. If we've taken the time to create the most glorious heading on the planet, and we want to use that class as a starting point for a variation? If we want the same thing somewhere else but in light blue? We could create a new class and go through the entire process again. Or we can use a Combo Class.

We'll cover three aspects of Combo Classes: creating a Combo Class, overriding Styles, and selecting the Base Class. Let's create a Combo Class.

And we'll work with this button. There are a lot of buttons on this page, all of them completely unstyled. And what we'll do is click to type in and create a class (since we intend to reuse this styling).

And we can go in and make changes. Like setting a background color on this class. Or, going in under typography and setting a font color. And, we might want to change the default padding on the button, so we can make adjustments there, clicking and dragging while holding option or alt to affect opposing sides of the button at the same time. And finally, let's round things out by going down to the radius. Add some rounding on the corners.

Now, we already named this class, so we can go through and apply it to some of the other unstyled buttons on the page. We're simply selecting each of these buttons, and applying the class we just created to each of them.

But wait a second. This section, when we apply our class to the button, doesn't have the greatest contrast. We could remove the class and try and remember all those changes — creating a new class from scratch. Or, we can create a Combo Class. We're going to click in the blank space to the right of the Base Class (the one we created before), and type to create our Combo Class. And of course hit enter.

And it’s worth noting that a Combo Class, just like a regular class, is applying directly to the element. So if we check out any of the other buttons? Nothing's changed.

But with our button down here? Once we've created a Combo Class, we can add or override Styles without affecting the original class.

That leads us to the next step: overriding Styles.

Because our selector field has the Combo Class showing up here, any Styles we add or override will only affect the Combo Class.

Let's check out these indicators — we can see that our Background Color and our Font Color — all the Style values we added before, they're all coming from the Base Class we created earlier.

Let's change that. We'll adjust our Background color — we can go in and change that value. And we'll go in to do the same thing — this time making a change to the Font Color.

Of course, each of these changes has turned the orange indicator blue. We know that means the currently-selected class (our Combo Class) has its own Styles that are now being set.

Now, those pre-existing Style changes aren't necessary. You can add new Styles to a Combo Class that weren't explicitly set in our Base Class, like all-caps.

But that's how we override and add Styles on a Combo Class. Let's talk about the Base Class.

Again, because we're styling the Combo Class, these Style changes aren't affecting our Base Class. That's because the Combo Class is a more specific selection.

But let's select one of the original buttons and make a change to the font size. Notice how doing that affects the button that has the Combo Class applied. That's because we didn't override the font size. If we click in and take a look at our orange indicator, we can see that the font size, that change, is being inherited from our Base Class.

We can also select the Base Class from our Selector Field. Simply click the dropdown, and select the Base Class. Even though our newer button still has that Combo Class applied, we're currently styling the Base Class: changing the font here will affect our Base Class everywhere. We can switch back to styling our Combo Class by simply pressing Go back. And if we check our font here in the Combo Class, we can see it's being inherited right from the Base Class we just modified.

So, Combo Classes save us a ton of time. We can create Combo Classes (which inherit the styling from our Base Class), we can override or add our own Styles, but we can still go in and select the Base Class to make changes at any time.

As we know from both HTML element hierarchy and Louisiana Civil Code, elements can pass Text Style information down through to their children. We can set Text Styles on parent elements which pass styling down, and we can override these styles on their child elements.

We're going to show three examples to demo this. That's it. We'll start with the first one.

Let's look at this ultra-simple layout. We have our page body, then inside that we have our Section, then a container inside the Section. Let's drag in a paragraph to join our heading. Now we've applied no classes — no styling of any type to any of these elements.

By default, if we check our paragraph (press our orange indicator), we can see it's getting the font from the body. Let's select the body. And with the body selected, we'll change the font.

Now because this updates in real time, this part has already been spoiled. We know that our heading and our paragraph are inheriting this new font change from the body. We can override this, though. Make a change, now have a blue indicator which, of course, shows us that we've made a style change here. Or we can remove that. Again, if we click the indicator, it's inheriting from the body.

And keep in mind: while the body is the top level element, we'll have to apply that body class (which was automatically created when we changed the font) — we'll have to apply that to the body on other pages, too. A great alternative — and we'll remove this class right now — is to go in and select our Body (All Pages) tag. Changes here will set those defaults on all pages in the project.

That's example 1.

Example 2 is a Section.

And even though it's not a text element, we can apply font styling here, too. First, let's see where it’s coming from. Of course, it's coming from our body tag for all pages. With our Section selected, let's override this font, and while we're at it, let's change the font color, too. Notice how the heading and paragraph inside — both child elements of the Section — notice how these are affected by the changes. That's because this override broke the chain of inheritance.

Before, the Section's child elements (the heading and the paragraph) didn't have any indication from their direct parents (like the container or the Section) regarding font. The Section and the container weren't specifying anything, so the heading and paragraph looked all the way up the hierarchy to the body for that styling info. So it didn't matter.

But since we've added styling to the Section, that's overriding that styling. If we take a closer look at the inheritance, we can see the value is now coming from the Section.

Just like we overrode the body earlier, we can do the same thing here. Any child element can override text styling. We can see our blue indicator which means exactly that. Let's remove it, and again, we're inheriting from our Section.

That's example 2.

Example 3 is a Link Block. Same idea here.

Here's some text sitting inside a Link Block. We could style the text directly, or we could simply select the Link Block and change the styling here. Once we do that, we can go in and select our text.

Where is this style value coming from? Of course, it's coming from our Link Block.

We can override at any time, or we can remove that and check to see that, yet again, we're inheriting that style value from the Link Block.

So, regardless of the context or the element type, text styling passes down through the hierarchy unless it's been overridden.

The Style Manager displays a comprehensive list of classes or tags we've created or used in our current project. It's a good overview of these styles, and it's a quick way to rename or even clean up anything we're not using.

With that in mind, we'll cover Anatomy, Renaming, and Clean Up using the Style Manager.

Let's start with anatomy. From anywhere in our project, we can click the Style Manager on the top-right. Tags we've styled will appear at the top. And that, we have our classes and combo classes appear underneath with a plus sign to their left. This is a quick way to determine class inheritance (the relationship between base classes and combo classes).

Let's select a heading here — no class is currently applied. Let's click to create a new one and give it a name. Press enter. Back over in the Style Manager, if we scroll all the way to to the bottom, we can see the new class we just created.

Classes are listed in the order they were created.

Now let's move on to renaming.

We'll select the wrench icon and rename the class we just created. If we do that, and go back to the Style panel? We can see that the class name has been updated. Double-click there, rename again, and if we go back to the Style Manager all the way at the bottom, the name's been updated there, too.

Finally, let's cover clean up. And for many, this can induce euphoria. Because it does the work for you, and automatically cleans up classes we're not using.

Let's actually start by removing the class from our heading. Now it's no longer used in our project.

Go back to the Style Manager, and if we scroll down, it's still there all the way at the bottom. That's because classes aren't removed from our project in case we want to use them elsewhere. But up on the top-right, we can see Clean Up. And press Clean Up, and we get a confirmation showing us any unused styles (anything not currently associated with page elements). Let's press Remove. And we're free to continue styling.

So, the Style Manager is a great reference for tags and classes we have in our project. We can get a quick overview, rename, or clean up unused styles at any time.

States. They're not just for links, but they're usually used for links. You can change the way elements look and behave by adding styling on different states. This adds interactivity to almost any kind of element.

And as we're styling, clicking the States dropdown lets you select between the various states you can access and style.

And there are four states we're going to cover: None (or normal), Hover, Pressed, and Focused.

Let's start with None: the normal state. This is the basis or the starting point for all other states.

And if we select this button, which has the Beautiful Button class applied, any styling changes we make are going to affect this state.

That's None. What about Hover?

If we select the States dropdown and press Hover? We're now styling the Hover state. And it's indicated in green.

We'll keep this simple, but you can make any number of styling choices. We'll choose to change our background color to green.

And we can switch back to None, and when we hover over with our pointer, the background color changes to green. Also, notice how the current state for the selected element is shown on the Canvas. As we're styling the Hover state, we see what the Hover state looks like on the Canvas. Whatever state we're in, the changes we make will be visible on the Canvas until we deselect or otherwise leave the state.

If we click the States dropdown, we now get a blue indicator to the right of Hover. That means there's a new value that's being set in the Hover state: in this case, we changed the background color to green.

We can switch between our Hover and None states any time to make changes to either.

That's Hover. Let's do Pressed.

And in CSS this is also called "Active" but it indicates what the styling will look like while the pointer is clicking down inside the boundary of our element.

And just like Hover inherited values from the None state, pressed will do that, too, but it'll also inherit values you've entered in the Hover state that override the None state. That's why the background color on Pressed is green.

We can change the background color again, this time selecting a darker green for this example. And let’s deselect our element. If we test this out? We see all three states: Normal, Hover, and Pressed.

That's the Pressed state.

And finally, let's cover Focused.

And this state is perfect for setting styles on elements that accept input — elements we can switch to by pressing Tab on the keyboard, like text fields.

If we're styling a class that's affecting each of the text fields here on the Canvas, any changes we make will show up when that text field is focused.

Now like any great artist, you might want a really, really bold, red glow on the text field when it's focused. We can make that adjustment to the Focused state, and when we go into Preview, that styling choice is really, almost painfully evident as we focus on each of our text fields.

So, those are the standard states we can style on elements throughout our projects.