Developers September 25, 2020

How to get CSS properties from a drag and drop element?

Ouss

Hi,

I would like to know if there is a CSS properties app where you can manipulate an element, like drag and drop a button and each time get its CSS properties.
I want such an app in order to help me write css to position my components because I don't have any experience in design and it really annoys me to always look up each property ( padding, margin...)

Thank you.

  1. 1

    I use this flexbox playground to get positioning right for my components. Not exactly what you're asking for, but it's quite useful: https://the-echoplex.net/flexyboxes/.

  2. 1

    If you're talking purely in the code, then the chrome dev tools (F12) lets you 'play' with elements and get the CSS you need. There are some handy shortcuts within it, like holding shift + arrow key will jump elements about 10px. See: https://developers.google.com/web/tools/chrome-devtools/shortcuts#elements

    It's not drag and drop but it's pretty close if you use it right. You shouldn't really be dragging and dropping anyway because you lose context of how the element is positioned: margin, padding, absolutes, flex positions, text alignment, etc - there's just too many options that are responsive design dependent.

    This is how you end up with ugly websites from website builders who have hard-coded positions for every resolution because the positioning was done "magically". Maybe someday we'll have an app which can do it properly, but I'm yet to see one

    1. 1

      Thank you.
      I actually don't refer to those website builders at all.
      I use material-ui components for React and I am looking for a quick way to position them in my app depending on the design on paper.

Recommended Posts