Best WYSWYG Mac editor for CSS and Bootstrap Themes?

Envato Authors CodeCanyon
1

I purchased one of the CSS3/HTML5 templates here and am struggling to find a good editor for editing it. I am a very novice user when it comes to CSS editing. I have years of editing HTML, but my knowledge is outdated. I have used Dreamweaver for 15+ years, but am only using Dreamweaver CS5 currently.

I’ve downloaded several editors, but they don’t present me with a realistic view of my pages when editing. The best I’ve found so far is Pingendo3, but it doesn’t come even close to showing me my pages accurately. Usually, elements are overlapping, in the wrong location, etc.

Can someone recommend a very solid program for a CSS novice for editing? I am willing to pay any price, just need to find the right tool. Thanks!

2

No comments or input? Surely, some of you must be using a good Mac tool!

3

Hi pointwide! The best way to write/edit CSS in my experience is to use Google Chrome (or firefox). There are two things you’ll want to do:

  1. Right click on the page and click “inspect element”. This allows you to see the CSS ids and Classes that are tied to the objects that you want to modify.
  2. Chrome has an extension called CSS Live Editor. It allows you to inject CSS onto the page and you can see the changes happening realtime. Once you looked up a class or id from #1, you can use it to write CSS in the live editor. No need to refresh the page as all happens realtime. https://chrome.google.com/webstore/detail/live-css-editor/oelggcmknbjmhkpgjfhakedcfnkgbdpg?hl=en

I use the above to write all my CSS and when I’m happy with the styling I just copy/paste it into a stylesheet file for my website.

Hope this helps someone out - take care!

4

Thanks for the response! That looks like a great way to subtly “tweak” a nearly-finished design, and I will check it out. But, it doesn’t sound like it will allow me to drag-n-drop new elements onto pages? For example, if I want to delete a slider and insert a 4 column portfolio module?

5

You aren’t going to like this answer - but you should never use a WYSWYG for web design or development, especially when it comes to CSS. They usually create a bunch of excess code and will never perform or be as flexible as writing the code yourself. You should check out https://www.codecademy.com/learn/web and learn more about CSS and maybe you’ll feel more comfortable doing so.

6

Actually, I read through your comment again and think you should check out this wordpress plugin http://codecanyon.net/item/visual-composer-page-builder-for-wordpress/242431. It will give you the drag/drop experience you are looking for…

7

Thanks, but I’m not using a Wordpress theme. Its CSS/HTML5. As I mentioned, Pingendo3 is not bad, but not very good, either. Still looking for a useful tool for a non-coder like me.

8

I always used CSSEdit, found it the best. It’s not a standalone app now, it’s built into Espresso. Take a look here: http://macrabbit.com/espresso/