DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for hate CSS? use this extension instead
Hamed Baatour
Hamed Baatour

Posted on

hate CSS? use this extension instead

let's be honest, many developers just hate working with CSS because:

  1. you have to try a lot of CSS properties values just to get something just right (aka make it pixel perfect)
  2. it's extremely repetitive!!

how many times we just write the exact same thing?

display: flex, justify-content: center...

most CSS priorities just keep repeating over and over again to create any UI

soo... I made a browser extension to visually change any website's CSS instead!

🎨   35+ CSS properties
πŸ‘Œ Β Β  customizable CSS selector
✍   integrated code editor
⚑   super lightweight - 500KB


InTab visual css edtior


πŸ“± Β Β  ∞ virtual devices + realtime sync
πŸ”Ž Β  clean CSS inspector on hover
πŸ•Ά Β  breakpoints visualizer
🌲   HTML layers tree
☒   x-ray mode


InTab virtual devices


why not devtools?

  • modifying CSS is slow and exporting changes is a pain
  • refresh the page & all the CSS changes are gone!
  • hard to inspect CSS with lots of crossed-over properties
  • constantly resizing devtools or using one device at a time to test responsiveness

so to fix all of those issues I made InTab.

πŸ‘‰πŸ» give it a shot at intab.io
πŸŽ‰ just launched this also on ProductHunt

please show some πŸ’—

Cheers!

Top comments (10)

Collapse
thehassantahir profile image
Hassan Tahir

Crazy thing! 😍

Collapse
hamedbaatour profile image
Hamed Baatour Author • Edited on

Thanks Hassan, really appricate your support 😊

thanks

Collapse
jonaspetri profile image
Jonas Petri

This is a great idea! I have seen similair extensions (like VisBug), but this looks way more intuitive. Definitely something I'm gonna check out!

Collapse
hamedbaatour profile image
Hamed Baatour Author • Edited on

Thanks Jonas,
yeah I did use Visbug extensivly also and although it's a great tool it's has a major limitation of not being able to export any changes.
InTab on the other hand let's you export the CSS code and it even autogenerates CSS mediaquires if you fix a UI issue in one of the included virtual devices + a lot more visual debugging tools 😎

Collapse
jonaspetri profile image
Jonas Petri

Yeah, that’s true. And media queries sounds awesome!

Collapse
hamedbaatour profile image
Hamed Baatour Author

would love to hear your feedback guys!

Collapse
greenreader9 profile image
Greenreader9

When browsing in mobile safari, a video keeps popping up and auto-playing on me.

Collapse
hamedbaatour profile image
Hamed Baatour Author

humm that shouldn't happen! πŸ€” which safari verison do you use please so I can fix this?

Collapse
greenreader9 profile image
Greenreader9

It actually only happens in the pop-up in this app, when I actually open it in the official safari browser, it does not show up. Do you have the β€œautoplay” attribute on the video?

Thread Thread
hamedbaatour profile image
Hamed Baatour Author

that's weird, will investiage the issue. maybe I have left a "playsinline" attribute somewhere...

🌱 DEV runs on 100% open source code known as Forem.

Β 
Contribute to the codebase or learn how to host your own.