5 ms·

My job is to design sites that work responsively, from widths randing from 200px - 2000px. There's no way one layout that could be achieved through drag-and-dro

by err4nt 11y ago

My job is to design sites that work responsively, from widths randing from 200px - 2000px. There's no way one layout that could be achieved through drag-and-drop like this could adapt to fit desktop, tablet, and phone users, unless you have multiple, entirely different layouts built for different widths using the same elements, so then it 'jumps' between totally different layouts between phone, tablet, and desktop. That's not ideal since desktop users may resize their browser into 'tablet' mode and totally lose the experience. Jumping between alternate layouts is jarring. The nature of responsive CSS is that the simplest way to build a responsive website isn't to use a tool - but just to write the CSS by hand. I don't even use SASS or Less to compile CSS for me. At the end of the day, if the result you want is lines of CSS in a file, the simplest way to arrive at that result is to write only the lines of CSS you need. If you're wanting to design responsive websites I'd say the easiest tool to use would be a text editor!

oliv__ 11y ago
No no, of course. I agree that typing css is still the best way. I just meant that moving things around and seeing the CSS change accordingly would be an educating "bonus" tool for beginners within what would be a fully fledged "live view" editor for people like you or me.
- err4nt 11y ago
  I only use Firefox for testing, not as my primary development browser - but they do have a number of visual editing tools built into Firefox Developer Edition that may fit the bill for desktop users! https://www.mozilla.org/en-US/firefox/developer https://www.mozilla.org/en-US/firefox/developer
OldSchoolJohnny 11y ago
I agree, I only work with hand crafted artisanal css harvested from the finest css trees in the highlands of Discordia.
- err4nt 11y ago
  If CSS is written properly it can cascade! I think some people enjoy doing more work than they need because sometimes it adds fun or makes their particular job on a team less intense. But I get paid based on how much work I am able to do, so getting things done as directly and pragmatically as possible benefits me the most. You can also use some expressions to match selectors in CSS, for example I use `.float-none`, `.float-left`, and `.float-right` as class names for my basic image floats. I can select all images with these classes applied with `img[class^="float-"]` and I can catch individual classes with `.float-left` or something like `img[class*="-right"]`. I think people would sooner learn and use tools that promise to make CSS easy, instead of advancing their CSS skills. Check out http://elementqueries.com http://elementqueries.com for some of the crazy fun stuff you can do with CSS by extending the language with a little JS. I'd sooner write styles like this that let you reduce the amount of HTML and CSS you have to write than to start introducing extra steps and tools between my files and the browser that multiply the amount of HTML and CSS being output before I can see the result. I do also author and publish my own CSS stylesheets and plugins that can be used in other sites, so pretty quickly I can bring good CSS into any codebase to fix most common problems.
splatcollision 11y ago
You can actually, I've done it before. Just have your drag and drop logic work in percentages of containers, instead of pixels.
- err4nt 11y ago
  Got any examples? You're not going to come up with a design like my examples through any kind of a visual editor that didn't already have code specifically pre-written for this sort of responsive interactivity. Try resizing these from phone width to desktop width to see how the content adapts responsively: - http://elementqueries.com/demos/pricing-chart.html http://elementqueries.com/demos/pricing-chart.html - http://elementqueries.com/demos/content-blocks.html http://elementqueries.com/demos/content-blocks.html - http://staticresource.com/modals.html http://staticresource.com/modals.html - http://elementqueries.com/demos/testimonial.html http://elementqueries.com/demos/testimonial.html

by err4nt 11y ago

oliv__ 11y ago

No no, of course. I agree that typing css is still the best way. I just meant that moving things around and seeing the CSS change accordingly would be an educating "bonus" tool for beginners within what would be a fully fledged "live view" editor for people like you or me.

err4nt 11y ago
I only use Firefox for testing, not as my primary development browser - but they do have a number of visual editing tools built into Firefox Developer Edition that may fit the bill for desktop users! https://www.mozilla.org/en-US/firefox/developer https://www.mozilla.org/en-US/firefox/developer

OldSchoolJohnny 11y ago

I agree, I only work with hand crafted artisanal css harvested from the finest css trees in the highlands of Discordia.

err4nt 11y ago
If CSS is written properly it can cascade! I think some people enjoy doing more work than they need because sometimes it adds fun or makes their particular job on a team less intense. But I get paid based on how much work I am able to do, so getting things done as directly and pragmatically as possible benefits me the most. You can also use some expressions to match selectors in CSS, for example I use `.float-none`, `.float-left`, and `.float-right` as class names for my basic image floats. I can select all images with these classes applied with `img[class^="float-"]` and I can catch individual classes with `.float-left` or something like `img[class*="-right"]`. I think people would sooner learn and use tools that promise to make CSS easy, instead of advancing their CSS skills. Check out http://elementqueries.com http://elementqueries.com for some of the crazy fun stuff you can do with CSS by extending the language with a little JS. I'd sooner write styles like this that let you reduce the amount of HTML and CSS you have to write than to start introducing extra steps and tools between my files and the browser that multiply the amount of HTML and CSS being output before I can see the result. I do also author and publish my own CSS stylesheets and plugins that can be used in other sites, so pretty quickly I can bring good CSS into any codebase to fix most common problems.

splatcollision 11y ago

You can actually, I've done it before. Just have your drag and drop logic work in percentages of containers, instead of pixels.

err4nt 11y ago
Got any examples? You're not going to come up with a design like my examples through any kind of a visual editor that didn't already have code specifically pre-written for this sort of responsive interactivity. Try resizing these from phone width to desktop width to see how the content adapts responsively: - http://elementqueries.com/demos/pricing-chart.html http://elementqueries.com/demos/pricing-chart.html - http://elementqueries.com/demos/content-blocks.html http://elementqueries.com/demos/content-blocks.html - http://staticresource.com/modals.html http://staticresource.com/modals.html - http://elementqueries.com/demos/testimonial.html http://elementqueries.com/demos/testimonial.html