Learning to Code April 13, 2020

CSS Grab n'go Editor v4.0

Dmitry A. @dr_dimitru

After success on Hacker News two weeks ago, by looking at analytics numbers (11K returning users, and counting), I realized there's a real need in this tool.

Thank you all for feedback and feature requests — I put my hands on it, right after talking to you (users). A bit more than a week later, I'm happy to deploy the latest release. I've shifted focus from just tinkering to learning and sharing your experience. If you can't wait, here's a direct link to the tool.

So, what's new?

  • In the first place a lot of new CSS3 properties, like blending modes and background clipping, see this example
  • Every property Now has a link to MDN documentation
  • Every property supported by its code-sample right above it
  • Generated CSS, SASS, SCSS, and LESS code now well-prefixed to work on >0.5, not dead, and IE9 to IE11 with autoprefixer
  • Keyboard shortcuts as in any other editor! Undo/Redo
  • New sharing experiences — after the desired result is achieved it can be shared via direct link, or saved as to your snippets list
  • Fonts! Now you can toggle between different fonts, default, system, and top5 from Google Fonts. Let me know if your favorite font is missing. I'll be happy to add it :)
  • Much better performance, especially on heavy filters, blurs, and 3D transitions
  • Much better on mobile devices
  • It's a full-featured PWA. It means you can install it via "Add to Home Screen" on iOS and Android devices and have this tool everywhere with you, even if you're offline!
  • Demos, to kick your inspiration and show capabilities of this tool, I've prepared a few examples (send me yours, I'll add your "styles" and name on our list):

I hope this tool is going to find its place in your bookmarks. Do not hesitate to ask for more features and share your CSS3 artwork, — I'll be happy to add it and your name to our snippet and example lists.

Let me know wdyt 🤔

  1. 2

    @dr_dimitru, I have been looking for something like this for a while. Thank you for sharing.

    Do you have a demo video of you using the tool? I find it a bit hard to use, and seeing somebody do it on video would be helpful. I am most interested in positioning elements (e.g., centering, responsive grid).

    1. 1

      Thank you for feedback, I'm glad you found it useful.

      There are a few videos on our youtube channel, but all of them time-lapse.

      The thing is our tool is focused on styling single DOM element and/or image/text in it.
      I'm afraid there is no feature for responsive grid, layouts, or flow.

      But if you need to quickly prototype border-radius, background, blending, filters, 3D transitions, colors, fonts, buttons, inputs — this tool will help you a lot

      1. 1

        The videos really helpful. Thank you. Yes, this will definitely help me for prototyping single DOM elements. I just subscribed to your channel.

        Can you recommend any good WYSIWYG CSS editors for layouts / positioning of multiple elements?

        1. 1

          Not those which will let you grab the CSS code and go.
          Usually I recommend editors from wix, webflow, and etc constructors, but again, they won't let you grab the code and go. Take a look on Figma, maybe they have what you're looking for.

          Thank you for valuable feedback, nice to see you among users.

  2. 2

    Great work! CSS has been always the hardest thing in front end development for me :)

    1. 1

      Thank you for kind words. I wish this toll will find its place in your browser bookmarks, and will help with learning and quick "styles" prototyping 🚀
      I'm actually myself using it on daily basis, especially for transform3d and border radius, don't know exactly why border-radius is that difficult to me 😅

Recommended Posts