This is amazing - it changes everything! + contributing templates + is feedback helpful?

Wow, wow, wow. I’m not sure how long it took you to develop this tool but I’m gonna guess it was a heckuva long time because what this brings to the table is utterly amazing!

I discovered WebFlow last night before dinner, and before going to bed I had created an entire high level and relatively complex design.

Let me tell you, I couldn’t get signed up quickly enough this morning!!

I am a professional developer, and this changes EVERYTHING.

I saw you’re looking for people to contribute templates to the library. So far I’ve signed up to the highest plan, but honestly I feel like you deserve even more than that for this tool so I’ll be totally happy to help fill up the template pool. I have some deadlines at the moment, but please let me know how I can help in this regard a little ways down the track.

I am also wondering if feedback / feature requests are helpful at this point in time?

From my end, what you’ve provided takes so much dev time out I really don’t have any problem with a couple of code tweaks after export, so I’m just more wondering if you’re looking for information from users on things that would be helpful?

I know you probably have a roadmap chock full with plenty of plans, so I don’t want to give suggestions you’re already moving towards. But if feedback is something that contributes, please let me know.

Thanks for being awesome!!

Kezz

3 Likes

Thanks so much Kezz! I’m very happy you’re excited about Webflow and that it’s bringing a lot of value for you! Yeah we have been working on it for a while now. And our to-do list is filling up every day. I’m sure you’ll get get even more value from Webflow as it grows.

As for feedback - we always welcome any ideas, feature requests or general feedback you have.

Thanks again! :smiley:

@kezzb, yes! We would love a larger selection of templates. Once anyone has a template ready to share feel free to let @thesergie or myself know and we’ll be happy to showcase it.

Cool magool. :smile:

I have a couple of things that I would have loved to be able to do as I went along with my first webflow based design, so I kept a little notepad on them.

Again, the system is amazing as is so these are just “nice to haves”. I might also have missed something in the interface so I apologize if any of these are already there.

  • The ability to set default styles for links within a given parent, e.g. site wide defaults as a child of the body, or alternatively as a child of a class defined in the design.

I defined link styles with a placeholder class name then moved the styles into default element definitions in the stylesheet after export.

  • The ability to select ems as a unit instead of px on text and layout elements.

I’ve been working with pure em based layouts recently because if the default html/body text size is set only as 1em it allows a whole design to scale to fit whatever the default text size is on any given device or browser. Because different devices/browsers set their default font sizes for optimum readability this in turn allows sites to have optimum readability on those devices/browsers. It also applies in the same way if users have adjusted their own personal default font sizes.

The idea comes from “The Goldilocks Approach” which I feel is quite brilliant: http://goldilocksapproach.com/. I don’t use their framework but I do love the logic of their approach and so have adopted it. Base designs are calculated assuming a 16px base font size as its the most common and they scale from there. I’ve tested it out and so far it works great.

I used pixem (http://matthewkosloski.me/labs/pixem/) to convert the stylesheet to ems after export, but it would be awesome if em was there as a choice in the unit dropdown.

  • Skew transform.

The existing transforms are sooooo helpful! Instead of using skew I used rotate on some divs stacked behind another to achieve the same visual effect, but if it’s at all possible to add skew in the future that would be wonderful.

  • The ability to duplicate & rename a class.

Sometimes you need a class that’s almost identical to one that already exists. If it were possible to duplicate and rename a style you could then quickly bang out styles that are similar to one another.

  • The ability to append some custom code to a class.

This would be great to have in the event there’s some type of CSS that’s not yet achievable through the interface, so it could be added manually. For example, adding skew code or even some of the other funky CSS3 that’s gradually being rolled out.

  • Support for wide screen layouts on the ‘container’ and a wide screen breakpoint

I know we can already setup essentially whatever layouts we want, but it would be great if it were also possible to use the in built container wrapper with support for something like 1200px width with a breakpoint at somewhere around that width.

This would allow for optimization on desktop displays - I looked up the stats recently and apparently 90% of all desktop displays are now greater than 1200px wide, with the most common being 1366px, so I’ve been trying to include optimization for that space in my layouts lately as well.

I have two other ideas, but they’d involve things that are probably a bit too far from where the software is now to be helpful. But I’ll share them anyway. :smile:

The first is the ability to save classes out to your account, so they would in effect become like layer styles saved out in Photoshop that you could then apply to your designs any time. This would probably also need the ability to asign more than one class to an element in order to be workable.

The second would require a preprocessor like LESS, and is the ablity to define variables and use them throughout the design. This would be super helpful for things like defining a base color scheme and being able to modify it easily by tweaking the base color variables.

I hope this wasn’t all too much to read. As you can tell, it’s all got my mind racing!

Thanks again for this software. It’s simply amazing. I haven’t been this excited about a piece of technology since I got my first game console for Christmas when I was 10 years old! :smile:

No problem at all!

I’d be setting out to make templates just for Webflow, so is there any style of template in particular people have been asking for? I’d like to make things for you guys that are as helpful as possible.

@kezzb

It’s great to see someone as exited as I am over here. I’m not pro but at this point, I do produce greater results than pros … I’ll post our website soon.

Thank to the fact I’m a poweruser in Mac Keynote.

With the new multi page support … I mean this is a game changer. (You’re lucky cause it’s been a big pain for me the manage a big projet in XX individual projects.)

First, em is supported. just type “em” or “px” after your value.

OH yes !! because it’s kind of impossible to create a without creating a mess

Support for wide screen layouts on the ‘container’ and a wide screen breakpoint

Totally cause I would like to force a max width for large screens.

Well, I really have to stop writing here and work :smile:

See ya guys

Pascal
A big cheers from Montréal

1 Like

@devmtl

Thanks so much for the tip on ems! That’s mega helpful as I’m working on a new design right now and will be able to set it up how I’d like from the get go.

Legend!

EDIT: Is it possible to set margin or padding with em values too?

@kezzb
no and I would love to.

but there is a way. use div-block. use % from there. It’s a bit intense at first but it’s great when you get the point :slight_smile:

Check this out : Row (Col) ratio trouble in view Phone Views - #5 by thesergie - General - Forum | Webflow

@kezzb, we’re working on giving an input option for margin/padding like so:

1 Like

That is utterly fantastic. You guys are amazing!!!

Thanks so much. :smiley:

Oh @devmtl and @kezzb we’re also working on the 1200px media query.

Absolute legends. I had a feeling you were probably already planning half the things I mentioned. :smiley:

Haha, we’ve actually talked about implementing variables/mixins somehow and building out our style manager to be more flexible and be able to move elements across projects. Skew transform we can easily add. You can already rename a class (in the style manager click on the gear icon). You can also choose em’s, but you have to type in “em” after your unit and press enter.

This is just the beginning!

1 Like

@thesergie Those upcoming updates give me chill.

Can’t wait to work with them !!

Cheers from Montreal

I’m just loving Webflow more every day. It has literally DOUBLED my output this week, as in I now have twice as many completed designed as I had planned to achieve. That is phenomenal.

Sorry, I didn’t give a very clear description of what I meant by duplicating and renaming a class. I probably should have said duplicate then rename a class. Let me give an example use case.

Say I’ve created a div that holds blog posts in my site. At the top of that I place another div that’s designed to add a trim effect above the blog post, like a block of color or bg image or shadow effect. I give it the class “top_trim” and set its top margin to 50px so there will be space above each blog post, and I give it top, left and right borders.

Then, say I want to give essentially the same trim effect at the bottom of the blog post too. I add another div below, and what I want to apply to it is almost the same style as is on the div above the blog post, but with changes only to the margin and border settings.

In this scenario, it would be perfect if I could go to the style manager, select my top trim class, duplicate it keeping all the styles, then rename it to “bottom_trim”. I could then just remove the top margin, add bottom margin instead, and remove the top border, adding bottom border instead.

Because all the other style settings have been carried over via duplication, I could then make the minor changes quite quickly rather than copying each attribute one at a time.

This would also be super helpful for designs where there are many similar but slightly different styles used throughout.

Hope I’m not banging on too much. :smile:

Totally agree @kezzb! We want to build that kind of functionality in the style manager - so it’s easy to copy and paste styles from one class to another easily. In the short run we’ll be working on some important core elements but afterwards we’ll tackle something like this.

Awesome awesome! Thanks again!