in Responsive Design

Responsive Design Tool for Brackets

Over the last month or so I have been working on something that is completely different from anything I’ve done before. It all started because I was thinking about how I could create a responsive design tool specifically aimed at developers. Adobe already has an amazing tool for designers called Edge Reflow. You can check out my tutorial if you want to see how that tool works.

But for developers, most of the time you are going to want to hand-edit your CSS code and potentially do a wide array of specific tweaks for each media query. So what I’ve built is a responsive design feature for Brackets. For those who don’t know, Brackets is our open-source web editor that is built entirely using HTML, CSS, and JavaScript. This fact makes it extremely easy to build visual tools. In the beginning, I was not a believer in the whole building a web editor using web standards. I like SublimeText and that is still what I use today. But after this experience I firmly believe that building such an editor is not only possible, but also could be amazing if enough attention is paid to performance.

I presented some of this tool at the Adobe MAX sneaks event last week in LA, but unfortunately I was arrested before I could finish :).

Check out the video and please let me know your comments. It is working pretty solid but it is not ready to be released quite yet as there are lots of bugs and unfinished areas. But I will keep you updated once I find out what the future of this thing is.

One of the primary goals of doing this was to give myself a crash-course in modern web standards. Things have dramatically changed for the better since the days of Netscape 4.7 and IE 5. It was during this time period that I said F this mess and moved to Flash. Now some of you will ask, are you stopping doing Flash now? Hell no. But in my future posts and tutorials, I want to move to helping developers transition smoothly into doing these types of things in JavaScript, because that is where it is all heading.

I can honestly say that I love doing CSS and JavaScript now. What are the biggest reasons? No compiling, no SDKs, and being able to go into the developer tools and hack and tweak your creations live as they’re running.

I look forward to your feedback!

Write a Comment



  1. Hi Lee, awesome to see you now working on the tooling for front-end developers.

    What you just showed us is amazing, there’s no doubt about it. I think the most important thing is to keep a balance between tools and general performance. I’m not sure Brackets (or Edge Code) is ready for prime time, but I’m sure it’s on the right way.

    Regarding your transition to Javascript, you were/are a great guide for us (former-)flashers, and I think you’re going to be an even better one in HTML/Javascript/CSS.

    • Hey thanks Dhaya I really appreciate the kind words. I still use SublimeText so I agree that Brackets is missing some stuff. But for once, I actually think it can be awesome. The focus needs to be on performance, performance, performance.

  2. That seriously kick my ass, a lot of great features. Sounds like a super easy way to build responsive website. I just can’t wait to try it. Great job !

    • Thanks. Hopefully we’ll have something out for you to try soon. No idea right now though. I need to get some real developers to look at my code :)

      • Why don’t you put it on github and let us help you out then, I’ll be more than glad to give my humble contribute.

  3. hey, this is great. Looks like a very good workflow to start creating a responsive website out of a fixed width design. I also really like the way you showed that you’re not too much concerned about screen widths of certain devices but more when the design is breaking.

    Also, the inspect mode alone looks like a piece of gold. I am using brackets quite a bit and one thing that gets in the way is when you are using live preview and then open developer tools in chrome – which then breaks the live preview connection. So this would be a good way around this problem.


    • +1 for the simultaneous Chrome inspect and Brackets live preview.

      And once more Lee, amazing work! You simply never cease to pull us all forward with you! Can’t wait for this addition.

  4. Amazing work ! This is a huge step toward to merging browser, inspector and editor.

    What about using preprocessors ? LESS or SASS for CSS, but also PHP instead of simple HTML files ?

    Would also be cool to highlight the CSS within media queries with their respective top bar colors.

    • Yeah I’ve been thinking about the LESS/SASS thing. I’m not sure you need that so much for doing responsive stuff. Aren’t you basically overriding the original variables to something else? I guess if you wanted to reference your LESS variables in your media queries then it would make sense. It would have to be done using source maps like how the latest Chrome Canary devtools does it.

  5. Amazing work, Lee! This is going to be a game changer. I was at MAX watching the sneaks, and I was as hacked off as you were that you didn’t get the time to finish. So glad you made this video. Many congrats, and thanks in advance for the hundreds of hours of squinting at code that you just saved me!

    • Thanks Ric! Yeah the sneaks were wild. Turns it out it was nobody’s fault. We just needed more than 5 minutes.

  6. I too would like to know what happens when you start looking at something built on a framework, you may as well just do what we’ve done for years and chimp the browser.

    • Sorry Andy I’ve been out of this world for a while. What kind of framework do you mean? What do you mean chimping the browser? Using the devtools?

  7. Lee, I really loved what you showed at Sneaks. I was also very sorry you didn’t have 10 mins (damn Eric Estrada!). ;) I hadn’t looked at Brackets in about a year (I’ve been using Sublime as well), but was very intrigued by the direction its going.

    For me, the other “missing feature” in Brackets is definitely the Sass support. When looking at the CSS, and tweaking values, it would be in my compiled CSS, not my SCSS. Thus, it would be wiped out the next time I compiled—just like inspecting in a browser. I’d like to be making those changes at the .SCSS level.

    Also, you should look at how Sass does the media query variables. It’s awesome. Using variables and @content in Sass, I can nest the different declarations for each breakpoint right within the rule itself. It makes maintenance much simpler. (See more here: )

    So though you don’t have to have Sass support to do what you’re doing with the responsive idea, having Sass support there (and just in Brackets in general) would be the deal sealer for me. ;)

    Keep up the good work… Cheers!

    • Thanks Stephanie!

      Yeah I would think adding SASS would be a requirement. The trouble is I haven’t even used SASS myself yet so I have no idea how it would be implemented.

      They are going to be focusing more on performance soon for Brackets so I really believe it can be a top-flight editor.

      See you soon.

      • I think you really need to start using Sass.

        The power of Sass is it’s ability to provide logic flow mixins (like functions that create css) and it’s awesome ability to efficiently organise attributes amongs previous selectors that cover the current selectors target.

        Pre processors are so much more than simple variables (which is a very procedural way to look at it)

  8. Tremendous work Lee, this is really amazing. Brackets is a great tool as well, once it’s mature and fully released it will definitely be my html/css editor of choice.

  9. This looks fantastic, great work! Have you thought about how this would work with mobile first responsive design, for example using min-width in the media query CSS output?

    • Yes absolutely. This was kind of a simple prototype but I’m already thinking about how to include all kinds of queries besides just max-width. How to visualize 5 overlapping media queries is an interesting problem to solve :)

  10. This is great work and I’m excited to see where it goes. The designers and developers who are creating responsive projects are yearning for the right tools to help them craft a clean experience. I look forward to seeing where this goes and when it gets released. As a developer and designer, I can see myself using this to rapidly build prototypes. As for full-fidelity websites? Probably not yet. We love our code editors. :)

  11. Lee this is fantastic, thank you so much for working on this! I will definitely be using this when it released.

  12. I would stick with plain html javascipt css. Lass Sass etc, is just another technology that can change and become irrelevant like jquery. Rather keep it simple and straightforward. Even typescript was cool but ended up being more trouble than it was worth (working with external js libraries). Plain javascript is working out great. Just to add that I felt a little schitzo working in nodejs and as3 on the same project, like coding as1 and as3 together :0

  13. “I can honestly say that I love doing CSS and JavaScript now. What are the biggest reasons? No compiling, no SDKs, and being able to go into the developer tools and hack and tweak your creations live as they’re running.”

    Nothing to do with your employer then? ;)

    • Hey you know me Tink, I don’t BS. Truth is that I was f’ing pissed that we (Flashers) were being forced to start doing JS. But I honestly am really liking it now. Not having to deal with compiling, SDKs, and bloated editors are a big part of why.

    • It definitely will be open-source and up on Github. But the plan is to build it into Brackets in some way, so there will be a delay in getting it out there. We want to make sure that when people start contributing to it, they are contributing to the actual project.

  14. Hi Lee, great video, what are the extensions installed on your Brackets? I downloaded but it does not come with installed extensions obviously
    See you in Maceió! :)

  15. I love it! I’m disappointed that Fireworks got the boot (seemed like an ideal target for developers and responsive projects) but I’m always looking forward to great, innovative ideas that inspire. This is very inspiring and wonderful that you’re aiming at responsive – the tools are definitely needed! :-)

    In saying that, I’m wondering if you’re also aiming at developer/designer workflow. It makes sense for designers to start at desktop and design down to mobile (especially for comps and prototypes For developers, the opposite approach is popular. Something to help bridge such a potentially large gap would be epic!

    Also very interested in responsive taking other patterns than min or max width (which can sometimes, be bit of a blunt tool). Very inspiring just to wonder about.

    Keep up the inspiring work and best of luck in future endeavors!


  16. You know what, I was just beginning to get the hang of AS3 when I noticed a decidedly clear move towards JS, CSS and HTML5. I was really taken aback because I had invested so much time and effort in that end (hey, I even managed to jumble up a clumsy XML driven media player in AS3). And the whole time, my greatest source of inspiration and tips was gotoandlearn and I am now pleased that you are now doing the new stuff. I am in your debt lee as many of those techniques, I have been able to port them into the JS world. Thank you.

  17. How many comments do you need to make this open beta ;-)?
    This is way too cool to keep it to yourself! But thanks for a great show, now I’m eagerly waiting to try it myself.

  18. It’s really exciting to see the future of development being publicly developed!

    It is also really frustrating that we have such poor tools to work with today for doing this kind of work. The entire Edge toolchain is at best alpha software and no usable day-to-day yet.

    For this awesome feature-set, it would be great if it auto-snapped to some of the more popular widths such as 1024, 768, 640, 320, etc. Seeing you pick random widths made my brain flinch :)

    Either way, thanks for putting this out there! Can’t wait for the real tools to be released!


  19. That’s some amazing piece of work you have made.

    I was wondering if this has been released yet, or if you plan in releasing it anytime soon.

  20. I just wanted to add my voice to this thread of enthusiastic Brackets users who are thrilled with the concept presented above. From your video, your tool looks very intuitive and perfect for someone like me who can code, but is more visually-oriented. I too can’t wait to apply for beta testing or whatever next steps you require.

    I’ll be keeping track of its progress. And I’m grateful to you for coming up with such a revolutionary idea!

    Have a wonderful sabbatical!


  21. Lee, Great job so far. I expect you will continue to tinker and that is a good thing. I was wondering what you were up to as you frequency of video posts has tapered off. I see you have been quite productive with MAX and all. I am going to have to have me some Piccolo for sure. Nice concept and follow through. Thanks for the contribution.

  22. Hi Lee,
    Can’t wait to see this live and available in brackets! I notice it’s been a while since your demo. Have you finished working on it? Has this been canned by Adobe because it’s too much like Edge Reflow? Either way, am looking forward to seeing it in the wild and in use.
    I’m still a big fan of notepad++ for much of my dev work (php), but this is the kind of thing that I’ll want to change over for.
    Hope your having a good time on your sabbatical. :)

  23. Looks like a really powerful tool to have. Any word on its progress? This seems like something that should be available as either an extension, or added as a full fledged feature of Brackets/Edge Code

  24. Can we please have a release date for this amazing tool. It feels like the updates are scanty at best. I would love to start using this right away. Thanks.

  25. Marvelous moves. Great transitions and features. Please let us know when the plug it´s finally beta or v 1.0. Very clever desitions and functionalities, indeed! :)

  26. We want this please share with open source quickly will be fix….

    we want this.
    we want this.
    we want this.
    we want this.

    Thank you.

  27. Hi Lee

    This looks like a great tool. Are you still developing it and going to release it for Brackets?

    Can I help you with any of the work?


  28. Fantastic stuff Lee. I’d like to add my support for putting this on github and letting the community help you with this. We want this ASAP for brackets, please :)

  29. Hi,
    this is a killer feature! I downloaded sprint 35 but it wasn’t in there? Is it still being worked on? Hopefully you’re still not in jail. Please, please release this to the masses.

    • Pretty sure this is dead, since Lee hasn’t spoken of this anything at all since the video. He probably couldn’t get it to work correctly and now he can’t admit it. OR, Adobe won’t let this be released into the open source version.

  30. Anybody can develop this tool for brackets. Brackets is fully editable right in brackets, all the source files are right there. You mean that Lee is the only one thats capable of doing this, I suggest we in the development community start writing and developing this ourselves, If your waiting for the project or code to show up somewhere then stop waiting and start writing.. This is going nowhere after 1 year lets start our own for goodness sake..

  31. Man, thank you so much for saving the world from the bad web. It’s really inspiring, please keep up and have all the fun. Peace!

  32. Not a single response to when this might be available. Why showcase it, build anticipation, and then leave people hanging for a year?

  33. Wow! Looks really amazing :)

    I love brackets as it is and with this tool it would be even more awesome :P

    Anyone got any idea when, or if this will available at all?

  34. Almost an year ago you told that you’ll release it soon, did you turn a musician from a programmer ? (like Rick Ellis turned a programmer from a Musician)

  35. Just another vote (or plea) that this be released. It, or something like it, really streamlines the workflow of responsive development. I just started checking out Brackets, and it looks quite promising. When I saw your demo video, I thought Wow, that’s wonderful, and it’s from a year ago, surely the extension is available by now? Imagine the sinking feeling when I realized that, 2 weeks shy of a year later, still nada. I can’t even find an entry for it on the Trello board.
    What’s the status?
    As there’s no way (that I could find) to discuss it on the Trello board, I’ll mention an idea here. Your demo showed a great workflow for rolling your own media queries, but it would be doubly hot if such an extension could pick up already existing media queries, such as might be provided by… oh, bootstrap ;), and let you work with those in the ways you showed.
    Brilliant work, in any case! The world should get to use it.

  36. Please lets have it!
    I am teaching responsive WEB design, and such an extension would do my job easier :)