Easy to use CSS editor (WYSIWYG)

[Skechers]

Hi there, new member,

I'm looking for a CSS editor that provides a visual layout feature.

I'd like to layout the elements using the mouse drag and drop and if necessary then enter parameters by hand.

I'd like to do this instead of coding CSS style by hand. Though I'd like to be able view and edit the code by hand if necessary too.

Most important is ease of use. Second is richness. Third is price ($500 is reasonable for me).

Thank you, Caesar.

 

[HobeSoundDarryl]

Flux by the Escapers is my favorite: http://www.theescapers.com/product.php?product=flux It's often in the super bundle offers from various companies but well worth full price if you can't find a deal somewhere.

 

[Skechers]

Thank you, it does look promising.

 

[hwojtek]

FLUX is a powerful tool, I would however suggest Espresso http://macrabbit.com/espresso/ - the X-Ray live CSS editor capabilities of this app may be of use to the OP.

 

[jakeOSX]

second vote for Espresso, it is a fantastic tool all around

 

[Skechers]

Yes, Flux was a confusing. There were almost no getting started resources. What there was is a few videos on the web. I still can't figure out how to add some text and style it ...

I could see it has a lot of features though.

I'll try this one as well.

Thank you, Caesar.
[doublepost=1471618906][/doublepost]Well Espresso presents the user with a text editor with no visual controls when creating a new project. I don't know how to open up an existing web page and start editing it.

The help file is very sparse, no getting started content. Mind you this is the Download version so it may have had features stripped out.

 

[hwojtek]

My advice would be: download a free sample layout from Templated, for example, to your desktop, open the index.html file in Espresso and start exploring.
I use it solely for CSS X-Ray editing (I used CSSEdit from Macrabbit before, now it's incorporated into Espresso) and find it excellent. That said, your workflow may obviously vary...

 

[MechaSpanky]

Some people in another forum recommended Blocs and it looks pretty slick but I haven't used it myself. It might be what you are looking for. http://blocsapp.com

Mecha

 

[decksnap]

My advice would be: download a free sample layout from Templated, for example, to your desktop, open the index.html file in Espresso and start exploring.
I use it solely for CSS X-Ray editing (I used CSSEdit from Macrabbit before, now it's incorporated into Espresso) and find it excellent. That said, your workflow may obviously vary...

I have been using CSS Edit for years because i did not like the full-fledged (non-css) features of Espresso when I tried it way back then. How are you getting along using this simply as a CSS editor? Is it simple or do you have to jump through hoops to get the rest of the interface out of your way? Would love to upgrade to something newer that still has the magic of CSS Edit.

 

[hwojtek]

I believe at this version of Espresso, you can actually use it almost exactly as the CSS Edit. It's fully incorporated.

 

[iPaintCode]

Espresso has some great CSS support but sadly it's be dormant and no activity from the developers (MacRabbit). Far as drag and drop and self tweaking, CSS can be finicky especially if you're using less supported cross browser features. Do yourself justice and just take a few free online tutorials from Code Academy or a free trial through Pluralsight and take their CSS3 course. There are other good free sites like Nettuts or the plethora of blog/tutorial sites out there. You can use Atom or Sublime and have it sync changes from DevTools to the css file it has loaded.

 

[decksnap]

Espresso has some great CSS support but sadly it's be dormant and no activity from the developers (MacRabbit). Far as drag and drop and self tweaking, CSS can be finicky especially if you're using less supported cross browser features. Do yourself justice and just take a few free online tutorials from Code Academy or a free trial through Pluralsight and take their CSS3 course. There are other good free sites like Nettuts or the plethora of blog/tutorial sites out there. You can use Atom or Sublime and have it sync changes from DevTools to the css file it has loaded.

I don't have any problems writing CSS by hand, CSS Edit just makes it so much better of an experience. Live preview, x-ray, etc.

 

[iPaintCode]

I don't have any problems writing CSS by hand, CSS Edit just makes it so much better of an experience. Live preview, x-ray, etc.

You could always use CodeKit, it's a super easy app to use and it does live preview and you can use the DevTools to cover all the other bases. For designers or even devs who don't want to setup grunt or gulp just for watch it's a top notch alternative. With a modern editor like Atom, CodeKit and Chrome DevTools, it's a pretty solid setup and you're using all modern tooling not tools that are dated. Though YMMV in this case, use what works best for you.

 

[MacSince1985]

Not exactly what you're looking for, but I develop with Coda and CodeKit. I write all the styles in LESS (CSS with variables, mixins and more). The autocomplete and syntax highlighting of Coda help reduce mistakes. CodeKit compiles LESS to CSS.

 

[baruchsienna]

Most important is ease of use.

Check out Sparkle.cx

I designed a website in no time, and loved doing it.