Hi barkingtuna,

I'm afraid that there isn't any software that supports the exact feature you are looking for. There is good news though, there is a program that sorta kinda does what you are looking for called Adobe Edge Reflow. Edge Reflow is designed for doing responsive layouts and mockups, not for making full web pages. The full page code it exports works, but is not something you would use for a production website. What it does well is allow you to drag a slider to control the screen width, create a breakpoint at a desired width, edit something on the page, then copy the css for that element. The copied css is for whatever is being declared for that breakpoint and can be pasted into your production design.

https://creative.adobe.com/products/reflow... - product information
http://tv.adobe.com/show/adobe-edge-reflow... - tutorials

It might also be worth looking athttp://macaw.co/
That is a design tool that can output css, but also understands breakpoints.

I am intrigued by your question though, as I'm trying to envisage the kind of scenarios where you'd want to do this.

I'll use tools like Firebug or Chrome's Developer Tools to tweak and test CSS changes on the fly, and occasionally I might want to copy and paste the CSS I've applied between the browser and my stylesheets, but if I'm resolving an issue that relates to browser resizing I've either already got media queries set up in my styles and I'll put my CSS into the appropriate section, or when we're using Sass (which is nearly all the time now) I target the breakpoint using a Sass mechanism.

If you've worked out a great workflow that works for you, I don't want to knock it, but perhaps it's worth taking a step back and considering some ways other ways to organise your CSS so you don't have to do so much work with in the browser..? (or maybe even use a pre-processor like Sass or Less to help with things like media queries?)

First off.. thank you both for your suggestions. I use a combination of Firebug, Chrome Developer Tools, and Dreamweaver to clean things up. You make a great point, Responsive CSS is not my strength and I need to better understand min-width vs. max-width and the ranges etc. I've never used Sass and will take a better look. The issue I was having that drove me to ask the question was related to an element in the footer not resizing properly on my Droid ( no I don't want to get an iPhone 6 ;) ) in landscape mode yet it was rendering properly in Chrome Dev Tools and was resizing properly in Firefox and iOS devices. It's an anomaly that still is befuddling because I can't seem pinpoint where I'd fix it that doesn't throw everything else off. Call me crazy, but wouldn't it be nice to use Chrome Dev Tools to resize in standard mobile sizes, live edit the CSS, and then export it with the corresponding break points?

Anyway... I ended up just hiding the footer altogether. http://www.rockermanoftexas.com/...

Just a note with Sass, it's a great way to wrangle CSS and help speed up development, but I'd warn that it's still fairly complex, so I'd suggest that you leave checking it out until you feel confident you understand media queries and related matters fully.

In other words, a tool like Sass is great way to write CSS, but you still need to know the actual principles behind what you are doing.

I hear what you are saying in terms of Dev Tools being able to export CSS with media queries, but I think the question is: what would the breakpoint actually target? Would it target smaller than your width, larger, between two sizes, would it snap to commonly used breakpoints? There's just enough complexity to media queries that there wouldn't be just one way to output this extra css I don't think.

Your actual issue sounds like a browser bug or quirk for your Android device, rather than a CSS issue unfortunately!

mesuva,

As a Sass man, are you using the Susy grid system?

Absolutely, nearly on every project. Susy is phenomenal, it makes more traditional grid systems feel so limited in comparison. The main things I love about it are:

- We can specify any number of columns, at any size and adjust that easy down the track if we need. I can change one number at the top of the sass file and they whole site expands or contracts. Sometimes we'll get a design from a designer that isn't 940 or 960, they might have stuck to the grid.. we can just dial up some numbers that match whatever they've done. At different breakpoints we can change the number of total columns, the number an element takes up and do all sorts of tricks.
- We can change the source order of columns (helpful to order content on mobile devices correctly), WITHOUT having to re-adjust CSS. It doesn't matter if a sidebar is on the left or right, in mobile we can have it after our main content by simply having the areas output in that order.
- We can nest grids easily, with different numbers of total columns, and basically create a new grid specification for that area. A cool trick with this too is that we can play with the maths of nested regions to adjust the spacing _between_ columns - this is useful for cases where a design isn't 100% to the grid and there's a bit of overlap in areas into the gutters.

I could go on and on.

We actually still use 'Susy One', as I believe version 2 still isn't as easy to get working with older version of IE, but to be honest we've not has any compelling reason to use 2 yet.

We'll probably start using version 2 when we start theming for c5.7

Which versions of IE were you having problems with? I am using selectivizr and jQuery to get it working on older versions of IE. Selectivizr gives old versions of IE enough of the CSS3 selectors to get Susy 2 working.
http://selectivizr.com/

On the topic of theming, I will be curious to know what kind of solution you use to handle 5.7's new custom layouts. While testing with the Elemental theme, I found that choosing the default free form grids assigns a Boostrap col-sm-* class to only the container of the layout columns. The contents stay floated and don't break at any width. Using the Bootstrap 3 layout makes the columns behave as expected.

Since we can't control for what users might do, I was thinking it might be useful to use Bootstrap 3 fluid for the custom layouts and use Susy for everything else. I am eagerly awaiting the grid support documentation to see what other options might work better (like custom Susy grids).

Btw, I want to thank you for the concrete5 tutorials on your website. They were clearly explained and I learned a lot from them.

There wasn't an IE problem in particular we were avoiding (we use selectivizr too), it's simply a case that we started using Susy before version 2 came out, and when it first came out I had read that IE9 support wasn't completed finished.

But it's great to hear that you've not had any problems, it was quite a while ago that I looked into it, so it's perhaps time for an update!

I've watched some of the theming vids for 5.7, but I haven't actually tackled building a theme yet. My understanding is though that the new PageTheme class that is used to specify details for a theme will allow these column classes to be specified. So my plan would be to just create my own .col-span-1, etc, classes in a theme and use Susy to define them. (I think it be more complex than that, it might required some clever Sass to loop through and output the different combinations of columns, it'll be interesting..)

I a trickier bit will be the omega column, but I'm hoping this will able to be solved with a use of last-child somewhere in the mix.

You've very welcome re our blog - I've always got a list of things to write up, it's just about finding the opportunity. I already have a few things I'd like to share for 5.7, there's lots of new features to talk about!

Thanks again for the help... I'm a one may show and I know enough to get myself into trouble as they say. I work full time in web marketing sales, not Dev, and take on small projects for fun these days. My old instincts, coming from the hand coded HTML with inline CSS world, sometimes takeover and I try and attack each individual nuance regardless of their being a better, more global approach through proper CSS. I most definitely have a lot to learn, and I'm willing to listen and better my knowledge of a craft I truly enjoy!

While it won't do exactly what you are looking for, the latest beta of Chrome's web dev tools is awesome for understanding breakpoints. There's a right up about the new features here:
http://blog.chromium.org/2014/09/responsive-web-design-with-devtool...
Personally, I haven't found anything better for CSS than Espresso (which is Mac only.) I've been using it for a long time, and used it's dad CSSEdit before that. If you've got a mac, it's worth checking in to.