I’m a web design, learning the web flow ropes. Nice to meet you all! I’m sure you’ll be hearing a lot from me in the near future as I feel i’m in here for the long run!
I’m just going through the tutorials, in specific the one with the SLATE app website creation. He discusses a couple of things that I need to just verify:
It was mentioned that he used ‘float left’ on elements to make them horizontally inline with each other; could you just make the elements Inline or Inline Block? Also, can’t you just use Columns in your Container or parent Container to stack these boxes inline? What are some other uses for Floating, apart from the navigation logo?
A little bit similar, the tutorial uses three div blocks to create three icons under text in a Container - I was wondering, couldn’t you use 3 columns in the Container once again? Is it significant to use Divs in this case? I’m very weary of good etiquette in design at this moment in time.
What is the difference for buttons on the website between; Text Link, Button and Link Box. When would each one be most appropriate to use? Are there limitations that I should between these three?
Thank you so much for the help, sorry for the hassle
Good questions I’m going to tell a few general things, not very specific to your questions.
Columns is a webflow element, a combination of native HTML elements to make your life easier. It comes with a setup regarding devices to make the columns inline or stacked. I’d say only use columns when at least one of your breakpoint will require a change from inline to stack. If this is not the case, go for divs and Inline Blocks.
DIV is a genuine HTML element. It’s a “division of page”. You can “have too many DJs” but there is no such thing as “too many DIVs” Nest your DIVs in order not to put too many CSS properties on one element. It’s easier to maintain this way, it also proves to be better browser compatible.
There is not only one way to do things, especially when it comes to layout. But there are ways that are more solid than others. For example, to align elements, I’d always prefer Inline and Inline Blocks over floating, anytime it’s possible. It’s more solid, and there is no need to clear the float.
Using absolute positioning is not a bad thing! Some people always feel like cheating when they use it.
There is no HTML CSS etiquette, but there are rules about Semantic and Accessibility.
You can worry very much about the code you write when you write it. Webflow writes it for you, and employ various techniques to make to code solid and compatible. Hence you’re never really going to control the quality of your code. But you are right, you want a good and clean elements and CSS structure, and that’s a good thing, and definitely something you CAN do in Webflow.
Text Link is for when you just need a text link. Button is a convenient Webflow element, it’s a time saver (and a real one!). Link Block is the base element to wrap a link around anything. use it when you link is not going to be just a line of text or a button. IN THE END everything will be wrapped between in the code. Those are just time saving elements in Webflow.
In the end: I think you’re asking yourself the good questions, it proves you quite get what HTML and CSS are meant for. Use what works well, save your time and move forward. As long as you don’t frankenstein your code, you’re fine. You still have to possibility to come back and redo sections after sections, and clean the unused classes. This way, your Webflow site is self cleaning.
I’m going to tell a few general things, not very specific to your questions.
Nest your DIVs in order not to put too many CSS properties on one element. It’s easier to maintain this way, it also proves to be better browser compatible.