I'm really into collage editing platforms, like mmm.page, that let you drag and drop, rotate, and resize images while everything is anchored to a centered div. As an artist working on game design and other art projects, I want something similar but with a built-in code editor and the ability to self-host. I'm searching for editors or VS Code extensions that offer even some of this functionality. I'd also appreciate any Chrome or Firefox extensions that can help capture absolute div info for CSS. Additionally, I'm looking for tools that can convert SVG code into HTML/CSS packages. Currently, I dump code into VS Code, use a server, and reposition elements using dev tools, but then I have to manually copy and paste the styles back into VS Code. This is fun but super time-consuming, and I'm struggling with how to make it relative to a centered div for better responsiveness. Any suggestions?
3 Answers
You're spot on in wanting a mix of visual ease and code flexibility. If you want flexibility, using CSS Flexbox or Grid is a solid approach for making your design responsive without relying too much on absolute positioning. Regarding SVG manipulation, SVG to JSX converters might help streamline your workflow too. If you have some coding skills, creating a custom extension that allows for visual positioning might also be a worthwhile project in the long run!
If you're focusing on the final output rather than a real-time editor, consider creating your designs in Photoshop and exporting them as images. This is if you really just want aesthetic layouts rather than interactive HTML elements. But if you need separate HTML elements for interactivity, stick with a tool that keeps the HTML structure intact, like Webflow or even Figma paired with plugins that export to HTML.
Exactly! Photoshop works great for just images, but make sure whatever tool you choose for code can handle those interactions you want.
To get that centered div, you'll want a CSS setup that works with Flexbox or Grid. This way, you can have everything centered and easily manage the layout for different screen sizes. It seems like you'll benefit from using tools like Webflow, which gives you drag-and-drop functionalities and outputs clean code that you can self-host. It's not exactly a code editor, but it allows you to lay out designs quickly. For VS Code, check out extensions like Live Sass Compiler or CSS Peek for enhanced styling features.
Webflow sounds cool! I've used it for other projects and it definitely helps with layout responsiveness.
Great tips! A custom tool sounds like quite the project, but it could really pay off.