Relume
Log in

Community forum for knowledge and support

Updated 10 months ago

Getting Started with Classes, Components, and Attributes in Design Tools

At a glance

The community member is a beginner with Webflow and is looking for an introduction to concepts like classes, components, and attributes, and how to edit them. The comments suggest watching the Webflow 101 course on Webflow University, which is described as explaining key concepts well. Another community member provides a simple explanation of HTML, CSS, classes, and components in the context of Webflow. The community members recommend the Webflow 101 course and Relume University as helpful resources for learning Webflow.

Useful resources
SSaraLi Forouzanfar
·

Is there an introduction video/article with info on what classes, components, attributes, etc. are and how to edit them? I'm a total beginner and I don't feel like I know what to do after creating ok-looking wireframes in relume and bringing them to either figma or webflow for next steps.

1
J
S
E
8 comments
JJack Glacken

Do you mean you're a total beginner with webflow, or with relume, or both? 😊

SSaraLi Forouzanfar

Webflow; I've spent about 3 weeks making a sitemap and wireframe in relume so not a complete beginner with this tool now. but when I watch videos there's so much jargon but no place explaining it, like attributes and classes and anything I google isn't simple enough for a non-techie like me to understand. This is important so that when I'm moving things to webflow I can fix/update things properly

EEmily Marais

Have you tried watching webflow university 101? They explain key concepts really well and its entertaining too

JJack Glacken

I was about to suggest this - Webflow 101 on Webflow university. I would imagine it's the bare minimum you need to work with Webflow!

BBlair

Try this:
https://university.webflow.com/courses/webflow-101

BBlair

A super simple explanation of Webflow is really an explanation of HTML and CSS.

  • Everything in HTML is a box of some kind
  • Boxes are defined using tags in HTML and are displayed as actual boxes in Webflow
  • Some boxes (or tags) are

    for heading 1 or
      for unordered list, aka bulleted list

  • You can style a box and its content by defining properties (characteristics), e.g. font = time new Roman or color = red
  • A collection of properties is called a class

Example, I can create a class called "margin-bottom" and define a bottom margin. Then every box or tag I apply that class to will have a bottom margin, e.g. some content that goes above an image and needs space below.

So basically the thing that is defining how the content of your site looks is the classes you apply to your html.

You can apply multiple classes to a box, e.g. margin-bottom and margin-large which will give the box a large bottom margin (you define the values for *large* using the Style panel on the right).

Components are just elements that have been structured (using the elements panel on the left) and then styled using the styles panel. Example is a navbar, you want it to be the same on all pages so you design it and then create a component from it. Then you can add it to multiple pages and any updates to the component will be reflected on each page.

SSaraLi Forouzanfar

Thank you very much, fellow Lumers! Especially for the crash course 🙂 (I'll be putting this on a post-it to keep handy!)

BBlair

The videos will be way more helpful 😊 all the best getting started with Webflow. I knew html and css prior to,using Webflow. It is essentially a much faster way of writing the code you normally would write manually. And it is optimised and uses best practices. An awesome product.

The trick is when you import or,paste in a Relume component all you're doing most of the time is applying your client's brand to it and adding your content. So you save even more time. Use Relume University to learn how to import components and style them initially using the style guide.

Add a reply
Sign up and join the conversation on Slack