Frustration over styling

[Robert_Craig]

Hi guys I often just head into the blue and start just building up a design. Often is the case I realise that I should be naming things differently in terms of classes. In the case of two or more items of similar style.

However I often get myself in to a situation where I am starting to add secondary classes for what in my mind is a shortfall in my design process.

It would be really good if I could copy a style set from one class and apply it to a new class. Would save me a heap of time. As sometimes it really holds the design flow back trying to remember every style change I made while remodelling the layout

Is this something that could be implemented with a keyboard shortcut? I guess what I am asking for here is a copy paste and clear style type arrangement. Thinking about it as a feature I think it would be real handy and something that could be on the style panel at the top as a set of buttons also.

I hope you see what I mean.

Heres a kind of process:

create three divs
call them iconDiv
style them
oops i need to change the middle one and add a second class
oops i need to do this to the third also
ok start again…
create three divs
call them iconDivLeft , iconDivMid, iconDivRight
Now I have to remember the styling ← (If only I had a copy/paste style option )

LOL I’m rambling now

[ryanmadhorse (Ryan Leal)]

If you want to use the same styling on another element. All you need to do is use the same class or set of classes. if you go back and make an adjustment to the element with that class it will update any elements using the same class. This will produce faster and cleaner cod. You only want to use a new class or nested class on an element if you it need to be different.

check this tutorial out if you haven’t already
http://tutorials.webflow.com/intro-series/adding-classes

[Robert_Craig]

Thanks for the response I know how classes work The problem I have is redefining class naming because of design changes and the ability to quickly restyle. Copy/Paste/Clear style would facilitate this and make my life easier Also I think it is a powerful feature to add to the already amazing design tool

[vincent (Vincent Bidaux)]

Hi Rob,

I’m taking the occasion to say something that I say regularly and that I find important.

It’s about Mockups, Prototypes, Production.

Webflow often advertise itself as "Skip Mockups, go to Prototypes. Or “Don’t just do Mockups, make production websites”.

I have a slightly more traditional approach: I skip nothing. For every project, I do mockups (using one of the following tools: pen+paper, iPad app (Adobe Ideas, Adobe Draw, Mockups), of on Desktop with Balsamiq Mockups).

Once the Mockup phase and discussions around it has ended, I know what my main structure will be. I add a layer on top of it, where I draw the div structure and think of the class names and level of nesting I’ll be needing.

I then start prototyping. When I start in Webflow, I consider myself doing a prototype, not a production website. The only difference, and real advantage of Webflow, is that I’ll use the SAME project for prototype and production. But most likely, in 80% of the case, an elaborated element (think of a well refined well detailed section with interactive elements, animations etc), once finished, will be redone from scratch, just underneath, with an even better, cleaner div structure and class names policy. One redone, I delete the “draft prototype” version, and go to the styles tab to clean unused styles.

I think you’re having a fight you’ll never win. You’re trying to either have it right at first try, or being able to fix your first draft for production… even the best designers I know can’t achieve that. You need to mockup, prototype, test, refine, and eventually redo for production.

The thing is, redoing a section that took you 2 days to fine tune takes… no time, like 30 mn, 1 hour. You know exactly where you go, and the result is better, cleaner, more solid. As coders do, you’re refactoring your design, your Webflow project. And Webflow is really tailored for that, allowing you to clean your project of unused classes, and of unused assets (by duplicating projects, and soon I’m sure with a built in feature.)

Adopting the classic design process makes your life easier and your work really much better, I’m convinced.

[Nikar]

@vincent

add a layer on top of it, where I draw the div structure

Is it possible for you to upload a screenshot of what your typical “add a layer on top of it, where I draw the div structure” looks like? I assume it’s something like a psd layer and then you draw on top of it? Your workflow seems really solid.

Also, for the re-doing of the prototype to become production, how do you do it? Is it like putting 2 windows of webflow together side by side (one proto, one production) and working on it to match them exactly?

[vincent (Vincent Bidaux)]

Sure.

Here’s what a mockup can look like (here made in Balsamiq Mockups):

http://vincent.polenordstudio.fr/snap/elo2r.jpg

And here is how the research on div structure can look like (here quickly made with my screencap tool Monosnap, but if I have to write down more precise specs, I’d do it in Photoshop with a labelling plugin, or in Pages, or in Keynote…):

http://vincent.polenordstudio.fr/snap/lqptl.jpg

I always use the same color hierarchy, which is the color swatches order of Monosnap:

http://vincent.polenordstudio.fr/snap/6fsxc.jpg

@Nikar

Also, for the re-doing of the prototype to become production, how do you do it? Is it like putting 2 windows of webflow together side by side (one proto, one production) and working on it to match them exactly?

Much more simpler, as I said, the prototype project is the same than the production project. When I redo a section, I redo it right under the prototyped one, in the same page and project, so I have my model right there and I can copy the blocks that I had right, and HTML structures that I want to keep as it. Once done, I delete the prototyped section and go clean the unused classes.

[Nikar]

Tks for sharing your workflow! It really cleared up a lot of doubts I had.

Due to the way Webflow markets itself with the whole “no mockups, go straight into production websites” thing, I have been puzzled the past few weeks wondering how is it possible for designers to stare at the Webflow workspace and instantly create the final website without any visualization or mockup, even paper ones

Webflow is a really good tool, though. Sure makes the others out there like Macaw look like a joke

[vincent (Vincent Bidaux)]

@Nikar

“no mockups, go straight into production websites”

They actually say “skip mockup go to prototype” and it’s kind of true (: And I never think they exagerate how easy and convenient Webflow is. And we’re all here on the forum to go beyond the basic usage of the tool, we’re here to master it aren’t we?

And if you take a bit of distance, Webflow or not, my workflow makes sense I think. These are the needed steps to understand a clients’ needs and find a desig solution for it.

[Robert_Craig]

Cant help but agree with all you say here Vincent However I still think a copy/paste/clear styling set of buttons would make my life loads easier

[vincent (Vincent Bidaux)]

@Robert_Craig

However I still think a copy/paste/clear styling set of buttons would make my life loads easier

I was not going against that, at all. I was just taking the occasion to enlarge the topic a bit and have a dicussion about workflow (: I’d be please to see new features, any kind of new features (: