CSS grab n'go editor — Made with Meteor ☄

announce
1

Hello Meteorites :wave:

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.

So, I put my hands on it. Thanks to everyone for the feedback and feature requests I’ve received so far. A week later, I’m happy to launch its latest release. I’ve shifted focus from just tinkering CSS properties to learning and sharing your experience. If you can’t wait, here’s a direct link to the tool.

:fire: And today is the day I’ve launched CSS grab n’go editor on Product Hunt :rocket:, feel free to support your fellow meteorite.

The most crucial part — yes, it’s built with Meteor as a client-only application via a meteor-build-client NPM package.

This project isn’t new, and it’s been for a while off my focus — until now. As of today, I’ve fully refactored codebase, made it efficient, and added a bunch of new features, again thanks for the feedback.

css-builder-shot-2
css-builder-shot-21572×942 98.1 KB

:man_technologist: Let’s start with used OSS:

css-builder-shot-3
css-builder-shot-31572×942 89.5 KB

:sparkles: New features

  • In the first place a lot of new CSS3 properties, like blending modes and background clipping, see this example
  • Every property supported with a link to MDN documentation and 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 top 5 from Google Fonts. Let me know if your favorite font is missing. I’ll be happy to add it :slight_smile:
  • 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):

css-builder-shot
css-builder-shot1024×536 127 KB

:trophy: Project achievements (so far):

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 with your name to our snippet and example lists.

Let me know wdyt :thinking:

24 Likes
2

This is really cool!
Is it open source or source available?
I’m curious how you’ve put it together

2 Likes
3

Thank you for feedback :heart:
No, not yet open source, but I’ve been actively thinking about it, so users can send PRs to add new features :thinking:

1 Like
4

Join the discussion on dev.to — CSS Grab n’go Editor v4.0

1 Like
5

It’s on top 1 today! Congrats !! :star_struck:

4 Likes
6

Thank you! You’re the first to bring good news today :sweat_smile:
Hope you’ll find a use in it, share your feedback!

2 Likes
7

After success on Product Hunt and collecting a lot of feedback we’re considering going open source. Before that we need to collect as much feedback as possible, why you want to see this project get open sourced:

  1. Are you willing to contribute?
  2. Open source just cool as it is
  3. Want to see what’s inside to learn more

It’s been few weeks after launch on Hacker News. If you’ve found day-to-day use in CSS editor — share what do you wish to change, fix, or add in this tool?

8

This is very cool!

Open source would be great to just checkout how it works and I would be happy to try to contribute.

I’m just thinking, it would be great if I could tinker on a live page too to make CSS edits. There are extensions available, but I quite like this UI too!

1 Like
9

@mypad thank you for feedback
Right now we focus on showing how the single DOM element can be styled.
My goal is to help to those who just start learning CSS to smoothen curve. And to cut tinkering time for experienced front end developers.

The rest seems like can be accomplished with DevTools, but DevTools not always that user friendly…

10

As of right now “CSS editor” got 399 upvotes on ProductHunt!

Recent project achievements:

Right now there is a chance of achieving “product of the week” and “product of the month”.
Hope developers like you and me will find a use in this tool, and if you do, feel free to support your fellow meteorite.

11

Just month and a half passed since its success on Product Hunt. Today I’m releasing fresh update based on feedback of its first users to our awesome tool for front end developers.

Here’s what’s new:

  • Smart shadows! No joke, creating nice long shadow effects for text and “box” elements just become much simpler! Whenever 3 shadows in a row has same pattern (step, color, etc.) all further shadows will follow the same rules!
  • Reorganize tools in the sidebar for better UX;
  • Updated “tips” documentation section;
  • Wider range for some CSS properties;
  • New DOM elements for styling;
  • New nice preview image;
  • New default DOM element styles;
  • Support for custom background image URL;
  • Less annoying Ads;
  • New pre-styled creatives to kick your inspiration.

New CSS properties:

  • text-stroke;
  • text-stroke-color;
  • text-stroke-width;
  • text-transform;
  • background-position;
  • background-position-x;
  • background-position-y;
  • overflow;
  • overflow-x;
  • overflow-y;
  • overflow-wrap;
  • line-break;
  • text-align-last;
  • text-indent;
  • white-space;
  • word-break;
  • word-spacing;
  • word-wrap;

Do not hesitate to try it!

1 Like