i would love a feature that when you are previewing page layout in each of the preset screen widths and you make a change to an elements size that it writes a media query for it, also if you want to change and or replace a new graphic at that predetermined size to be written into the css.
is this some thing that can happen as it will make layouts at different break points much more faster and intuitive to produce.
Not exactly sure what you're getting at here. Responsive elements already resize according to Bootstrap breakpoints. Non responsive elements (like images) can be made responsive by assigning them the img-fluid class. When you change the screen width, the program already keeps track of the size when you add a media query to a CSS rule. Not sure how you could make this any more intuitive. Can you give an example?
@OP...
What you seem to be wanting and describing is adaptive web design and not responsive web design.
I fail to see any advantage, as we already have full-responsive control. It's almost like giving users a loaded gun to make poor design decisions and major coding mistakes. The Tesla video is a great place to start to understand responsive web design and how to properly code a site.
Micro-management of an already responsive site could easily result in more work, slower display rendering and other fall-out.
What you are asking just doesn't seem right imo.
i think you all missed my point and wysywyg editor function request.
all i want in the wysiwyg editor is when you go from (screen icon size presets top right) XL mode to say XS mode in screen sizing in the display panel - you have elements that have set boundaries in px that work in XL but don't work well in XS mode all i want is the ability to click on that component in say XS mode and make a spatial change to the margin or padding (or any of the "look & feel" primary functions) that works at that screen size, but by changing the settings it generates for that selected item a media query for it and to prevent accidental changes, an alert pops up.
Other wysiwyg editors seems to be able to this with no issues what so ever without the 'loaded gun' and 'Poor design decisions'
To be honest im still finding my way around how this app functions but getting there - i dont see the issue of mixing responsive and adaptive to make the end user experience more thoughtful in the design layouts.
@smooo67
Can you give an example of a program that has this kind of feature. I'd like to take a look at how it works.
My only issue on this would be a billion media queries every time you make changes to a specific size. That's usually what most of those other apps do is create a ton of unnecessary media queries unless you specifically choose one to change. I would definitely prefer not to have my CSS messed up by auto coded stuff myself, especially a ton of media queries.
Personally, I'm very happy with how it works right now for things like media queries and classes/id's etc. There's a good balance for both automating it using the Look & Feel pane while at the same time giving those of us that code pretty full reign over the CSS. Works well as it is in my opinion without complicating it further with auto coding for sizing.
I agree with Jo. I think Adobe Muse used to do something like what the OP is describing, and the code it produced was abysmal. Probably the worst code I've ever seen.