Subscribe
Sign in
p/css-generatorVisual CSS, SASS, SCSS, LESS generator 🏗 for 👨‍💻.
Start new thread
Dmitriy A.

CSS Grab n' Go Editor - Visual editor for learning and quick CSS mocking

by•

This tool is made for quick prototyping, mocking, and learning CSS via tinkering its properties. The editor is capable of generating valid and prefixed, when necessary, CSS, SASS, SCSS, and LESS code compatible with all browsers

Add a comment

Replies

Best
Dmitriy A.
Maker
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 (e.g. today), I'm happy to deploy the latest release. I've shifted focus from just tinkering to learning and sharing your experience. So, what's exactly new? - In the first place a lot of new CSS3 properties, like blending modes and background clipping - 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 off 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 with your name to our snippet and example lists. Let me know wdyt 🤔
S. Sharma
@smart_egg Hey Dmitriy, First of all, congratulation on the release. I am documenting journey of individuals who are innovating, inventing, and creating things in general, through out the world. The proposal is to do a short interview, capture it in video, and let it out to the world, so that others can get inspiration. And, at the same time you and your team will get acknowledgement for the hustle. I would like to request you to please let me know when you are available so that we can discuss this in more detail at tellmeaboutit510{at}gmail.com . Thanks, and good luck! Subodh
Dmitriy A.
Maker
@subodh__ Thank you for reaching out :) Sounds like you're working on something interesting and inspiring.
Dmitriy A.
Maker
Love our main image creative styles? Here's direct link to it — https://cssbuilder.veliovgroup.c...
Daniel 💻
Nice project!
Dmitriy A.
Maker
@iice89 Thank you! I'm glad you liked it
Abdessalam
Awesome! 😍
Dmitriy A.
Maker
@abdessalam_b98 Thank you for your feedback
Lillian Wight
I've been taking courses on CSS and Sass for a few months and of course practice is what really helps us learn. My two biggest weaknesses are position properties and alignments. Are you able to include something on these? I don't anticipate it would be easy, in particular because to get the practice I need I would want to be aligning/positioning two or three inter-related items (ex. container, content, sub-content), but I would really benefit from some relaxed play instead of the tension and anxiety I feel when working on my 'real' projects.
Dmitriy A.
Maker
@lillian2611 Thank you for feedback. As of right now we focusing on CSS features that can be applied on the single DOM element. But been thinking for a while how to implement multi-element UI to let users play with grid, flexbox, etc.
Ankit Singh
It's really nice!!
Dmitriy A.
Maker
@ankitsingh304 Thank you, I'm glad you found it useful.
Dmitriy A.
Maker
🏆 #1 product of the day — 18 Apr 2020 Wow! Thank you all for your support! I made this tool for us, as a developer for developers to let beginners understand how different CSS options are working and interacting with each other, and save mocking time for experienced front end and full-stack developers. Share what you think! Missing a feature? — Let me know, I'll add it! I have a question — should this project get open sourced?
Indira Tairova
It’s really useful 🤩👍🏻
Sebastian Tamayo
Cool idea
eFabgo
That's cool :)
Varun Satyam
Awesome product
Dmitriy A.
Maker
@satyam284 thank you for feedback
Sanghun
WOW!!!
Dmitriy A.
Maker
@sanghun Thank you for feedback 🎉
Dmitriy A.
Maker
Link to "water" font style — https://cssbuilder.veliovgroup.c...
Youtube Hero™
Blablacar la
Dmitriy A.
Maker
Great example of practicing CSS skills with "CSS Editor" — https://twitter.com/MarianaDuran...
Dmitriy A.
Maker
Just month and a half passed since its success on Product Hunt. Today I'm releasing fresh update to our awesome tool for front end developers — based on feedback of its first users. 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! — https://cssbuilder.veliovgroup.com/
Dmitriy A.
Maker
Regular maintenance update is out! 🎉 1. Upgrade to meteor to v2.0 — https://github.com/meteor/meteor... 2. Update all internal dependencies with better coverage for `auto-prefixer` and `postcss` 3. Showcase PWA usage and installation in this twit — https://twitter.com/VeliovGroup/... 4. Tested and validate `meteor-build-client` (https://www.npmjs.com/package/me...) compatibility with latest Meteor and used packages releases Try it out now at — https://cssbuilder.veliovgroup.com/ Feedback is highly welcome! 🙏