Need good CSS editor for Responsive editing on the fly that exports corresponding media query related to edit.
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
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?)
Anyway... I ended up just hiding the footer altogether. http://www.rockermanoftexas.com/...
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!
As a Sass man, are you using the Susy grid system?
- 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
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.
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!
"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"
Which Android browser are you using? The default browser on Android has a lot of quirks, rendering issues, and is missing features (which is why Google has made Chrome the new default browser). I recommend downloading the Android versions of Chrome, Opera, and Firefox - all use better and more current rendering engines. To cover the bases for Android, make sure to test your site in all four browsers.
For mobile debugging, check out Adobe Edge Inspect CC and Chrome Remote Debugging for Android. They allow you to inspect and change code on your desktop/laptop and have it update on the mobile device in real-time.
https://creative.adobe.com/products/inspect... - supports simultaneous iOS and Android devices
https://developer.chrome.com/devtools/docs/remote-debugging... - supports Android only
I agree with all mesuva's points. If you want to write modular, maintainable, and non-repetitive CSS, you will want to learn a CSS pre-processor like Less or Sass (I also use Sass). All of this is based on knowing the fundamentals though - using Dreamweaver can often act as a crutch in preventing you from getting deeper into how things work.
For getting up to speed on topics in a fairly painless way, I highly recommend Lynda.com and Teamtreehouse.com, both are very cheap for the quality.
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.