CSS and HTML editor

CSS and HTML editor

Hello everybody,

As a newcomer to the Agile Platform and even to web development, I am starting to realize the role and importance of CSS in web development including that in Agile Platform. My question for the veteran Agile Platform developers, do you see a value for using a specialized HTML editor along with Service Studio to work with CSS in Agile Platform? and if yes then what is the recommended tool you have used successfully and seamlessly with in your Agile Platform projects?
I know that I always want to touch up or modify the CSS that comes with the theme in Service Studio but I keep thinking if there is a more visual way to visualize the complete style sheet reflected on the used template pages/blocks and this same visual method to allows me to modify/add those CSS tags and properties.
Hi Shraim.

I usualy do the changes I need using Firebug or Chrome's WebConsole. It is pretty nice because you can tweek and change and see imediate feedback . When I'm satisfied, I copy the final result to SC and publish.

Hope it helps.
Thank you Pedro. I guess I still need lots of guidance around web development landscape.

I came across this one and hoped for your professional opnion on its usefulness compared to (or in addition to) FireBug and WebConsole.

It's cool that you found that one, because yes, I use it also  :)

It has some features that are not available (or I don't know where...) in the ones that I've mentioned, like enabling a determined CSS, resizing, etc.

But for the use case that you talked about, changing CSS, FireBug and alike is much more confortable, because the editing is powerfull. You can add new styles, disable existing, change values and much more. One thing I like is the metrics that tell you exacly how borders, paddings, width, etc are in a determined element.

Thank you very much Pedro. So if you are to share your arsenal of developer tools, are there any other tools worth considering?

Also for FireBug, do you advise any tutorials out there to quickly get me up and running with its use ?

Thank againg for always being so generous in your wisdom :)
No need to thank me Shraim :) I'm always glad to help and share what I know. It's a great satisfaction to help!

So, in my Chrome I have the following tools installed:
  • Resize Window: I use it to set the size of the browser to the most common width x heigth out there;
  • MeasureIt: A tool that helps with alignments and sizes;
  • Developer Toolbar: Fresh installed after I got from you that it was available to Chrome :) I used to switch to FireFox to use it. I was not aware that it was available to Chrome
  • and the unavoidable WebConsole
In FireFox I just use the Developer Toolbar and Firebug. I use FireBug to debug JavaScript and always get surprised by the power of it.

In terms of tutorials I don't know of any, because I use the tools for a log time from now, and beeing so I don't really feel the need...

If you're in to some CSS knowledge, when I have some doughts I use w3cschools to get it.

Hi guys,

If you haven't heard about WebPutty then you're in for a treat! :D

It's a CSS/SCSS development tool that turns the development process from:
  • Test + tweak in browser;
  • Copy / paste to your dev tool;
  • Publish changes;
  • Refresh browser;
  • Check if everything`s OK;
  • Repeat...
  • Develop in browser + live preview/compare + instant publish
The major downside is having your CSS out of your regular development workflow (which can also be a good thing if you want to allocate the web design and development to different teams).

For projects that can't use WebPutty, I'd second Pedro recomendation of Chrome DevTools (Wait, DevTools could do THAT? - igvita.com).
For mobile web development checkout Adobe Edge Inspect or just leverage weinre for remotely testing DOM/CSS on the mobile devices (those using webkit at least).

SASS and LESS are also worth a peek in that they are both "improvements on CSS" (previous topic on how to use them with the Agile Platform).

Happy reading! :)