Makerpad & Flowmingo: Webflow fundamentals and shortcuts
Let's dive into the basics so you can start building some awesome Webflow sites.
Hero Content
You may be thinking... "Computers Suck Sometimes?" Yes, they do, but the CSS I'm referring to here stands for Cascading Styles Sheets.
To control the layout, positioning, width, height, colors, and everything else, you'll use CSS.
In order apply styling to an html element you need to first add a Class to that element.
In Webflow, you'll add a class by selecting an element, then adding a class in the "Selector" panel in the right sidebar.
Think of a Class as a todo list of styling for your element.
This allows you to reuse the Container class on as many elements as we'd like throughout our site. This is useful because if we make a change to one element with the Container class, it'd update every instance of that class.
But this can be a double edged sword. What if you want to only slightly tweak one instance of a class without it affecting it everywhere else on the site?
That's where Combo Classes come in.
A Combo Class is a way to override, tweak, or add styles to a single instance of a class. So in that Container class, we could add a Combo class of Container Medium to change the width, but keep the other styles in tact.
Webflow allows us to add styles to all the various html elements (H1, H2, Paragraphs, Links, Images, etc) by default by selecting the Global Class.
These classes stand apart from the rest by being pink, which is totally on brand for Flowmingo.
You can even select the body element's global class and apply styles which would get applied to every page.
This is a good place to set your base typography styles (font family, font size, etc) and background colors.
By selecting the drop down arrow in the selector panel, you can apply styles to various user states.
For example, if you wanted to change the font color when a user hovers their mouse the link, you'd select the hover state and apply your styles to that state.
Ok, remember that CSS stands for Cascading Style Sheets?
The cascading part is important.
Basically, styles cascade down. Meaning elements inherit styles from their parents.
Which means you don't need to add a class to every element.
For example, say you need to change the font size of a text block inside a div.
If that div element already has a class, there's no need to add a class to the text block as well.
Instead just apply the typography styles directly to the parent div's class and it'll inherit down to the text block.
It turns out, the hardest problem when it comes to building websites isn't design, or structure, or anything else.
It's actually, what the hell do I name these classes?
Webflow makes our life easy by not requiring you to add a class to an element before you start styling it.
With any element selected, you can just start applying styles and Webflow will automatically add a class for you.
The problem is you end up with something like this:
If you're not careful your website can get difficult to manage, very quickly.
There's actually a helpful way to go about structuring your class names in a modular way, and it's call BEM.
Basically, BEM stands for Block, Element & Modifier.
A block would be your wrapper, elements are the children of that wrapper, and modifiers (combo classes in Webflow) are variations of styles of the elements.
For example, take a blog post:
.post is the block.
.post_thumbnail, .post_description, .post_button are the elements.
.post_button--profile would be the modifier (in this case a Combo Class, changing the background color to white).
Now personally, I don't love the naming convention (with the underscores in front of an element, and -- in front of a modifier), but I do like the structure.
So what I do is keep the BEM structure, but write them a bit more friendly, like so:
In the, there's no hard rule that says you need to do anything one way or another.
Basically your goal is to write as few classes as possible, inheriting styles when you can, so that your site is easy to maintain going forward.
These are the shortcuts I personally use in my workflow. For a full list, use "?" to open up the keyboard shortcut modal.
