Webflow Unlocks Class Attribute

Summary

The video script discusses the recent enhancement in Webflow that allows the 'class' attribute to be used on all elements, not just custom elements. This advancement has removed previous limitations and offers greater flexibility. The demonstration shows how to use the 'class' attribute to control the layout of a webpage, specifically how to switch the flex direction from horizontal to vertical on a tablet, and how to reverse the order of elements. The script also covers how to use the 'is-reversed' class to change the flex direction and styling of elements. It explains how to create a component in Webflow that includes a custom attribute for layout style, allowing users to easily add or remove classes like 'is-reversed'. The example provided shows how to apply this to a collection list, giving users the ability to control the layout style directly within collection items. This update in Webflow empowers users to create more dynamic and responsive web designs with ease.

Takeaways

• 🔓 **New Feature**: Webflow has unlocked the 'class' attribute on all elements, enhancing its flexibility beyond just custom elements.
• 📱 **Responsive Design**: The script demonstrates changing layout direction from horizontal to vertical on tablets for better content stacking.
• 🔄 **Class Reusability**: The 'is-reversed' class can be applied to different base classes to achieve distinct styling effects.
• 🖼️ **Image Width Control**: To prevent images from extending beyond their parent container, a specific class can be used to adjust their width.
• 📊 **Component Creation**: The script shows how to turn a section into a reusable component and link it to component fields for easier management.
• 🌐 **Custom Attributes**: Custom attributes can be used to control the combination of classes applied to elements within the component.
• 📋 **Class Management**: A single field can manage multiple classes, allowing for easier manipulation and less redundancy.
• 🔄 **Conditional Class Application**: Classes like 'is-reversed' can be conditionally applied based on user input in collection items.
• 📝 **Field Linking**: The layout style can be linked to an option dropdown field, providing users with a simple interface to control the layout.
• 🔧 **Dynamic Styling**: The script illustrates how to dynamically change the styling of elements within a component based on user-selected classes.
• ⚙️ **Component Customization**: Users can easily customize components by adding or removing classes without needing to know the specific class names.

Q & A

What new feature has Webflow unlocked on all elements?

Webflow has unlocked the 'class' attribute on all elements, previously this could only be used on custom elements.

How does setting a div to 'flex horizontal' affect its layout?

Setting a div to 'flex horizontal' arranges the child elements in a row. On tablet view, the direction can be switched to 'vertical' to stack the elements.

What class can be used to reverse the order of elements within a flex container?

The 'is-reversed' class can be used to reverse the order of elements within a flex container.

How does the 'is-reversed' class affect the flex direction?

When the 'is-reversed' class is attached, it changes the flex direction to 'row-reverse', which means the image appears first followed by the text.

What is the purpose of setting the image width to '50vw'?

Setting the image width to '50vw' (viewport width) makes the image extend to half the width of the viewport, regardless of its parent container's width.

How can you prevent an image from extending past the width of its parent?

To prevent an image from extending past its parent, you can apply the 'is-reversed' class to the visual wrapper of the image to align it to the right.

What is the benefit of turning a section into a component in Webflow?

Turning a section into a component allows for easier reuse and management of the layout across different parts of the website. It also simplifies the process of linking elements to component fields.

How can you control the layout style of a component through custom attributes?

You can control the layout style of a component by adding a custom attribute, such as 'class', and linking it to a field. This allows users to add or remove classes like 'is-reversed' without knowing the class name.

What is the advantage of linking the 'is-reversed' class to the same field for both the section and the image wrapper?

Linking the 'is-reversed' class to the same field for both the section and the image wrapper ensures consistency in the layout style and prevents the need to manage the class from separate fields.

How can you apply the 'is-reversed' class to other elements within the component?

You can apply the 'is-reversed' class to other elements like the title or any other elements by adding the class to those specific elements and linking them to the same field controlling the layout style.

What is the purpose of adding an option dropdown field to collection items?

Adding an option dropdown field to collection items allows the client to control the layout style, such as whether the layout is reversed or not, without needing to know the specific class names.

How does linking the layout style of collection items to an option dropdown field affect the layout?

Linking the layout style of collection items to an option dropdown field enables the client to easily select a layout style, such as 'is-reversed', for each item, which will then be applied to the corresponding section in the design.

Outlines

00:00

🚀 Enhanced Flexibility with Webflow's Class and Attribute Update

This paragraph discusses the recent update in Webflow that has unlocked the 'class' and 'attribute' capabilities on all elements, which were previously limited to custom elements. The update allows for more powerful and flexible use of these features. The speaker demonstrates how to use these features to adjust the layout of a webpage responsively. They show how to change a div's flex direction from horizontal to vertical on tablet screens and how to reverse the order of elements within a section. Additionally, they explain how to fix an issue where an image extends beyond the width of its parent container by applying a specific class. The paragraph concludes with the creation of a component to streamline the process of applying these styles and layouts, with the option to add or remove the 'is reversed' class between components using custom attributes.

Keywords

💡Webflow

Webflow is a web development platform that allows users to design, build, and launch responsive websites visually, without writing code. In the video, Webflow is used to demonstrate how to manipulate the layout and styling of web elements dynamically, which is central to the video's theme of web design and customization.

💡Class Attribute

The class attribute in HTML is used to specify a class name for an HTML element, which can then be used for styling with CSS or manipulating with JavaScript. In the context of the video, the class attribute is crucial for applying different styles and layouts to elements based on user-defined classes like 'is-reversed'.

💡Flexbox

Flexbox is a CSS layout model that allows for the easy arrangement of elements in a container, even when their size is unknown or dynamic. The video discusses setting a div to 'flex horizontal' and changing it to 'flex vertical' on tablet devices, showcasing the utility of Flexbox in responsive design.

💡Viewport Width

Viewport width is a CSS unit that represents the width of the visible area of the browser, which can be used to size elements relative to the screen size. In the video, an image is given a width of 50 viewport width, meaning it will take up 50% of the browser's width, regardless of the device.

💡Custom Attributes

Custom attributes in Webflow allow users to add unique data to elements for various purposes, such as styling or scripting. The video mentions using custom attributes to control the 'is-reversed' class, which is a key part of the dynamic layout functionality being demonstrated.

💡Component

In Webflow, a component is a reusable piece of the design that can be easily duplicated and customized across different parts of a website. The video demonstrates turning a section of the layout into a component, which simplifies the process of applying consistent styles and interactions across multiple instances.

💡Responsive Design

Responsive design is an approach to web design that makes web pages render well on a variety of devices and window or screen sizes. The video script includes examples of making layout changes based on the device type, such as switching from a horizontal to a vertical layout on tablets.

💡CSS Styling

Cascading Style Sheets (CSS) is used to describe the presentation of a document written in HTML or XML. The video discusses changing CSS properties like 'flex direction' and applying classes to alter the styling of elements, which is essential for achieving the desired layout and appearance.

💡Collection List

In Webflow, a collection list is a type of dynamic content that displays items from a collection. The video script describes pasting a component into a collection list item and using an option dropdown field to control the layout style, demonstrating how to manage dynamic content and layout variations.

💡Option Dropdown Field

An option dropdown field is a user interface element that allows users to select an option from a dropdown list. In the video, it is used within collection items to control whether the 'is-reversed' class is applied, providing an easy way for users to customize the layout without knowing the underlying class names.

💡Layout Style

Layout style refers to the visual arrangement or composition of elements within a webpage. The video focuses on how to control and change the layout style dynamically using classes and components, which is central to creating flexible and adaptable web designs.

Highlights

Webflow has unlocked the class attribute on all elements, previously limited to custom elements.

Flex horizontal layout can be switched to vertical on tablet devices for image and text stacking.

The ability to duplicate sections and apply a class to reverse the flex direction.

Using the 'is-reversed' class to change flex direction to right-to-left without wrapping.

Images can have a width of 50 viewport width, extending past the parent width.

Fixing visual wrapping issues by applying the 'is-reversed' class to a visual wrapper.

Styling can be adjusted independently for different base classes with the same class name.

Aligning elements to the right to allow an image to extend past its edge.

Overriding the 'is-reverse' class to stack elements vertically on tablet devices.

Creating a component from a section to link to component fields for flexibility.

Adding or removing the 'is-reversed' class between components via custom attributes.

The option to leave the 'is-reversed' class off by default for control purposes.

Linking multiple classes in a field, separated by spaces, for combined effects.

Applying the same 'is-reversed' class to an image wrapper for consistent styling.

Using class selectors like 'is-active' or 'is-featured' for various design elements.

The layout can be reset to its original state by removing or adding the 'is-reversed' class.

Embedding components into a collection list for dynamic content management.

Adding an option dropdown field to control the layout style within collection items.

Linking the layout style of collection items to an option dropdown for dynamic reversal.

Transcripts

webflow just unlocked the class

attribute on all elements before we

could only use this on the custom

element and it had some big limitations

but now it's much more powerful to see

this in action here we have a div set to

flex horizontal and on tablet let's

switch the direction to Vertical so that

the image Stacks underneath the text

sometimes we'll want the image on the

left and the text on the right to do

that let's duplicate our entire section

and for the second instance we'll select

this list and give it a class of is

reversed whenever that class is attached

we'll change our Flex direction to right

to left with no wrapping so that the

image appears first now this image has a

width of 50 viewport width which means

it's it's extending past the width of

its parent here to fix that we can give

this visual wrap a class of is reversed

and even though this is the same class

name it's different because it's stacked

on a different Base Class so we can

change the styling here as we want and

align it to the right instead so that

the image inside extends past this Edge

now on tablet we've overridden this list

with the class of is reverse to be a

horizontal direction we want to make

sure our is reverse class also Stacks

vertically on tablet so that the text

appears above the image like the first

section now we can turn this entire

first section into a component and we'll

call this section and we can start

linking things to component fields

so for the split list we want to

optionally add or remove the is reverse

class between components we're going to

need to leave this class off by default

that way we can control that combo from

the custom attributes we'll give it a

name of class and we'll set the value to

is reversed so that if this field is

empty it won't be reversed and if it is

filled it will be reversed and we can

have multiple classes in here as long as

they're separated by a space so I could

have a utility of background

brand and that could apply my blue

background color and space for my is

reversed and the order that these

classes are added in the field doesn't

matter in this case I'm just going to

leave the is reversed and I'll link this

to a field and I'll call this layout

style now we can either leave this class

off by default or leave it on I'm going

to leave it on that way it's easy for

whoever is using this component to just

remove without having to know the class

name to begin with so let's create now

we want to make sure that same is

reverse class is applied to this image

wrapper so we'll give this a class and

we'll link it to the same field we've

already created so they don't have to

manage the class from two separate

fields we could do the same thing by

adding is reverse to the title or any

other elements we want to change and we

could use this with an is active or is

featured or any other type of class we

want now if we close out this whole

component if we remove this the layout

is not reversed and then we can click to

reset to return it back to its original

state and I'm going to copy this whole

component and here I have a collection

list with two items I'm going to paste

this component inside the item now for

my items here I've added an option

dropdown field and I've called this

layout style and I've set the only

option to be is reversed and the field

is not required so on this first item

here the client has gone ahead and not

filled out the field at all and on the

second one the client has set the value

to is reversed so now we can control

this inside collection items so these

are my two items I'm going to select

them and I'm going to link their layout

style to that option drop- down field so

that the first one is reversed or is not

reversed and the second one is like so

and that's how to use the class selector

in web flow