Espresso 2: Create and Edit CSS3 Like Never Before

Web developers rejoice, Espresso 2 has finally been released and it brings tons of improvements that you’ll definitely want to check out.

Join us was we take a refreshed look at what Espresso is, what’s new about it and why it’s officially at the top of our list of awesome apps that web developers should have.

Espresso 2 is Here

screenshot

Espresso 2

I’m going to go ahead and admit that I’m a huge fan of Espresso. It’s hands down my favorite IDE and the central piece of my entire web development workflow. In fact, it’s one of my favorite Mac apps period.

Needless to say, when I started reading about the newest version, Espresso 2, I got very excited. Like many of you I had been using the Kaboom releases (beta) for a while but I’ve now switched over to the official stable release and it’s a beauty. Let’s take a look!

CSSEdit Merges with Espresso

I’ll start with the biggest news that accompanies this release: MacRabbit has discontinued its amazing CSS editing application CSSEdit and integrated its features into Espresso.

This is definitely great news for users of both apps as you now get the best of both worlds in one affordable and super powerful package.

Visual CSS Editing

So what’s so good about CSSEdit you ask? The answer is of course that CSSEdit provided a really nice visual UI for adding and adjusting CSS properties. This now appears on the right side of your CSS files in Espresso:

screenshot

Visual CSS Editing

These controls actually write clean, valid CSS for you as you press the buttons. The panel is split up into three tabs: Text, Decoration and Layout, which together comprise a great deal of the CSS properties that you’ll ever work with.

screenshot

The Three CSS Editing Tabs

I’m actually not a fan of WYSIWYG code editors, but this is really quite different as it’s entirely code focused and simply helps you style elements faster and more efficiently. It’s an excellent edition that I find myself using all the time.

Code CSS3 Like a Boss

Some really experienced coders might roll their eyes and wonder why they need a visual interface to help them code, but surely even this crowd will appreciate this feature when it comes to CSS3. Coding things like gradients by hand is a such a pain that there are a million online tools to help with the process. Now you can get these types of visual coding tools right in your IDE.

screenshot

Creating a gradient with visual tools is awesome

As further good news for CSS developers, Espresso 2 is packed with CSS3 support so you won’t have to memorize all those annoying browser prefixes and exact syntaxes. Just start typing and Espresso will finish your thought for you.

Interface

For the most part, the Espresso interface should feel just like it always did. There are a few slight tweaks and improvements but it’s close enough to the original that longtime users will feel right at home.

screenshot

The Espresso 2 Interface

For those not familiar with how Espresso works, there are three basic columns. The first of these contains an interactive file tree for the folder that you’ve deemed the destination for a project (any folder works), your “Workspace” (the files that you’re currently editing), and the “Publish” settings, which allow you to upload files to your server right in Espresso.

screenshot

Workspace, Project Files and Publish Settings

Also notice the “Preview” icon. One of my favorite things about Espresso is its preview window, which updates live as you change your code, no refresh needed. We’ll discuss this more in a little later.

Code Column

The next column is your active coding window, which shows whatever file you have selected. You can also use multiple tabs or drag out individual windows.

screenshot

The Coding Column

This section has everything you would expect in a solid IDE: syntax highlighting, a superb autocomplete, line numbers, code folding and more. There are also some excellent time savers like custom macros and built-in Zen Coding functionality, which should delight experienced coders.

Tools Column

The tools column is context-sensitive so it’s different depending on what type of file you’re viewing. For instance, above we saw that visual CSS editing tools that appear here. In an HTML doc though, you get the navigator:

screenshot

The Tools Column

Here you get an automatically generated outline of your file that allows you to click and jump to any specific portion. This is all pretty standard stuff for advanced code editors but trust me when I say there’s a certain smoothness and finesse to it all that you won’t easily find elsewhere.

Preview Window

As I mentioned above, Espresso has an awesome preview window that updates live without the annoyance of manual refreshes. One really cool feature here is the ability to not just see a local site you’re working on but also any site on the web. You can bring up any website you like and tweak the code while previewing the results live.

screenshot

You can view and tweak any website right from Espresso

X-ray

Another great feature of the Espresso 2 preview window is X-ray, which allows you to visualize the bounds, padding and margins on an element and see the applied styles.

screenshot

Click on an area to see details about it

The X-ray HUD is directly connected to the CSS file so just double click on anything in that little window to be taken directly to that area in your CSS. This is really nice for troubleshooting those tricky layouts.

A Worthy Follow Up

This is the part of the review where I say that the app is good but could be better in certain areas, but I really only have positive things to say about Espresso 2. The Kaboom version, like all pre-release software, had some quirks but as far as I can tell all of these have been smoothed out so if you tried an early preview it’s time to take another look.

The inclusion of visual CSS editing is really icing on the cake of this already superb web development suite. It’s there when you want it to be and out of the way when you just want to code by hand, a perfect combination of useful and flexible. You can even use the controls to go back and tweak what you already wrote by hand.

If you’re a professional web developer, you simply have to try Espresso 2 for yourself. It might just streamline your entire process.

Conclusion

Inside and out, Espresso 2 is a perfect picture of why Mac software has such a stellar reputation. In a time where all of us are filling our Applications folders with quick and dirty $0.99 specials from the App Store, it’s incredibly refreshing to review an app as solid and deep as Espresso. Developers like MacRabbit were around far before App Store gold rushes and are obviously committed to quality in a way that’s not easy to find these days. Priced at $79, Espresso is worth every penny.

Want to get your hands on it before you fork out the dough? Stop by the Espresso website and download the 15-day trial.


Summary

One of the best web editing tools for the Mac just got a lot better. I almost never dole out a perfect 10 but I simply love this app. Visual CSS Editing, X-ray on live previews and a lot more make this a must-have for web developers.

10
  • Yaro

    10/10? Must. Buy. Now.

  • http://www.webkarnage.net/ WebKarnage

    I love this as a coding app. Since Espresso 1.2 it’s been good, this is a whole lot better! Incredible results from such a small development team. Yes I have other well known coding apps like Coda, but this is the one that gets opened every time.

    OK Panic, your move next…

  • Jeffrey

    Can’t wait for Coda 2 vs Espresso 2. Fight!

    • Mediumjones

      Yeah, Coda is really starting to feel dated now

    • http://twitter.com/#!/__chh __chh

      And TextMate 2!

      • http://www.albertkinng.com Albertkinng

        Coda and Textmate… I remember those days. Today I only use Espresso.

  • http://www.davidhellmann.com David Hellmann

    I like espresso but i miss a ftp files view on the left sidebar :/

  • http://toliveischrist.info Tim C

    Hear hear from a long-time coda user who is itching to be weaned off coda and onto Espresso 2 asap! I was blown away by Kaboom and have been waiting for the full released with bated breath… :-)

  • Philipp

    I’ve been using Kaboom and still am. I wonder why there wasn’t a notice to inform me about the release yet.

    However, is there a place where i can see differences between the latest kaboom and the final version, or is the latest kaboom the final version?

  • http://cody-jones.com Mediumjones

    Woo! Just got a free upgrade from Espresso 1! MacRabbit rocks!

    • Josh

      You are? I’m not :L

  • Eric Mantooth

    I agree 100%, this app deserves a 10/10. There’s nothing more perfect than it for creating effortless code in minutes. If you do this kind of work, don’t hesitate to buy it!

  • Marius Masalar

    Just another vote for the superiority of Espresso. Truly magnificent coding environment. At this point, the only thing Coda has that would be nice to see is the robust FTP engine from Transmit built in. Otherwise Espresso is now wiping the floor with its competitors.

    Eager to see the counterattack!

  • Andrew D

    I’m a big fan of CSSEdit, so I’m sorry to see it go, but glad its being incorporated to Espresso- can’t wait to try t out. I’m really mad that the CSSEdit icon is no more with it’s famous “IE Sucks!”

    • http://www.coroflot.com/joshuajohnson Joshua Johnson

      I had never noticed that, excellent!

  • http://www.macheights.com/ Macheights

    X-ray feature is really great, vamos MacRabbit!!

  • Pingback: Weekend Wrap – Interesting Reads on the Tech Blogs | Geekosity

  • http://blog.jesusyepes.com Jesus

    I tested today, it’s great (same as version one), but for an non beginner coder this is not 10/10.

    a) FTP is very basic. I don’t wanna upload and sync all files…. it missed some options to configure such things.
    b) Visual css editor. Sure this helps a beginner, but code by hand is more quickly.
    c) x-ray and preview window. This is almost the same that using firebug and inspecting elements. If you edit the css the original file is saved… but, if you use less (i you don’t you should) this is nothing, cause it writes the css file, not the less file (obvious).
    d)Lacks more and more configuration. I only tested for one day, but i still don’t know hoy to show / hide the right column without the mouse!

    For me, now, for projects that don’t have tons of business logic in the server, TextMate + Less app + Firefox w FireBug. If the project has tons and tons of programming, i replace TextMate for netbeans

    • http://www.coroflot.com/joshuajohnson Joshua Johnson

      I addressed point b) in the article:

      “Some really experienced coders might roll their eyes and wonder why they need a visual interface to help them code, but surely even this crowd will appreciate this feature when it comes to CSS3. Coding things like gradients by hand is a such a pain that there are a million online tools to help with the process. Now you can get these types of visual coding tools right in your IDE.”

    • Ignaty Nikulin

      Jesus Christ!

      • Kim

        Meaning what??

    • Gazzer

      “Visual css editor. Sure this helps a beginner, but code by hand is more quickly.”

      You’ve got this wrong. You can code CSS allows you to code by hand while it *live* updates. This is supremely awesome if you have everything running on a local server.

      I code for major companies and CSSEdit was the one tool (with BBEdit) that was indispensable. You have hand coding and visual stuff if you want. Nothing is better than changing 1.1em to say 1.2em and actually seeing the changes as you type *without reloading*.

  • http://mactua.tk MathiasB

    Espresso rocks!
    I use Espresso 1 for a long while and i’m now updating to version 2…

    I think that Espresso is the best solution if you write all code by hand.

  • http://refinedshot.com Adam

    I need to give this a shot!

  • Josh

    I like it, but with no education discount and the announcement of a textmate 2 alpha approaching a long with hopefully Coda 2 soon. I’m going to hang it out and see what happens or wait until its in the MAS.

  • http://thedrearlight.com Garrett

    Been a fan of Espresso for a long time, and the 2.0 update is nice. I think, somewhere in there, is SASS support.

    I’d never be too interested in using Textmate or Sublime again, if only Espresso could bracket highlight.

  • http://www.monofactor.com Onur Oztaskiran

    Espresso has been and is my most favorite code editor. As I also wrote on my blog, Macrabbit just listens their customers and doesn’t care about anything else, which made them winner on my end.

  • Matthew

    As a php coder, Espresso falls short in that it doesn’t provide autocomplete for my custom functions/classes. If it had that feature, it’d be about perfect.

  • Matt

    Espresso rocks! I’ve been using it since its first version. After trying all other editors available on Mac I could find none as nice to use and as aesthetically pleasing as Espresso.

    Version 2 looks great – I don’t personally have the need for the features of CSSEdit integrated in it but it’s awesome to see they are looking after developers who are still learning the ropes. For me the best thing is that it shows they are still active and developing, my this app last forever!

  • Kristan

    Meh. Sublime Text/Netbeans + Chrome Dev Tools is my weapon of choice.. and I would say I am no code-ninja.. more at intermediate level.

    The visual CSS editor puts you in Dreamweaver land no? WYSIWYG style? Is it reeeeeaaalllly better to illustrate all of these CSS values with icons or does that just get in the way? (Like .. is it really a good idea to choose text alignment based on the “leeetle peeectures” or is it more valuable to just learn ‘text-align:center”, etc? I would say the former actually *hinders* your development as a coder)

    I know it’s not all about the CSS editor, but apart from that the code tools just pale in comparison to more mature apps.

    To me, Espresso just has a “My Little Pony” vibe that I just don’t dig. But I would suggest it to a casual “web-designer/stay-at-home-mom” as a better alternative to Dreamweaver, which just *mangles* your code. But if I had to push Coda or Espresso I would still give points to Coda for the built in FTP which takes some of the complication out of the whole site design/maintenance cycle for beginners

    • Benxamin

      +1 Agreed.
      Coda is about the most UI that I can stand. I code as much as I can from hand, and reuse snippets & mixins all the time. I’m a fan of JetBrains PhpStorm as a PHP IDE, and they have SASS integration!
      If you have a CSS editor, and it’s doesn’t natively support SASS (or even LESS), then you have an second rate system.

    • Scott

      Thx +1 Again. A friend of mine told me about this, I’ve been doing some digging. I used Text Wrangler for a while and rolled over to Komodo for the side-by-side feature. After reading your post that just reinforces my initial assumption. This is a limited, candy-coated version of things that I already do with MAMP, FIrebug, and Komodo. Right it’s nice to have everything in one package, but the whole CSS WYSIWYG tool turns me away, plus the inability to recognize my custom PHP functions. Props to their team however, it’s nice to see people out there bringing new tools and ideas to the table.

  • Johannes

    >>One really cool feature here is the ability to not just see a local site you’re working on but also any site on the web. You can bring up any website you like and tweak the code while previewing the results live.

    How is this supposed to work? I tried, but could not find out. How do I get a live preview of my own php pages on the server while tweaking the code?

    I come from CSSEdit and (since it is dead now) try to evaluate Espresso. Unfortunately the documentation is poor, so many things are easy to miss. Thanks for the good review!

    Johannes

    • Andrew

      The live preview is only for local and live HTML. For PHP, open the site in preview and use the refresh button after uploading new code to the server.

      • Gazzer

        @Andrew,
        Not so. Run a server locally.
        Open the *same* local CSS file this server is loading. View the website in Espresso 2 such as mysite.local just as you would a live server, and use the override function to use the open CSS file. Since a local server acts just like a live one this works just the same.

  • Johannes

    Thanks, Andrew, for the clarification. I hope macrabbit will make this a bit more convenient with the next version. I don’t need live preview as I type, but automatically refreshing the Preview after a Quick Publish would save hundreds of window switching and cmd-R actions per day.

    Johannes

  • Murray

    Love the app so much I went and paid for it. After several emails I still have no serial number. Does anyone know if Macrabbit are still operating?

    • Muzza

      bump

    • http://www.webdesignlift.com windo

      any news about this, I’m going to buy it in several day

  • RickB

    Anyone have any links or suggestions for beginner tutorials for Expresso2?

  • http://www.webdesignlift.com windo

    Been Trying espresso 2 for 15 days, Love it’s interface and the css edit facilities, I have tried other like dreamweaver and coda, but I think espresso is the most suited to me. especially the awesome navigator feature,. really really awesome! I think I’m going to buy 1

  • Pingback: Best of AppStorm in October | androide.rs

  • http://bitstream.ca eco_bach

    Intuitive, powerful, mac software at its best! Couple minor complaints, like I need the ability to search-replace individual project folders and not the entire project, and I wish there was a way to customize the formatting AND syntax highlighting for various languages. Surely good enough for ‘pros’ and not just ‘web-designer/stay-at-home-mom’ types!

  • Anil K Solanki

    CSSEdit was great for graphic designers who simply wanted to edit CSS files. Now we are being asked to pay triple for features we don’t want or need.

    Damn shame. A point your article missed totally.

    • http://www.deluxive.se/blog Christopher Anderton

      Also the UI is not the same for the CSS part in Espresso VS CSSEdit. It’s much more worse and clunky in Espresso.

    • Adrian

      Seconded. For CSS it falls short of CSSEdit cramming the left styles navigator pane and the properties options into one column.

      Damn shame.

    • http://www.owlboy.com/ Bryan Bortz

      I totally agree. And am I missing something? Were are the list element controls.

    • http://garyhorsman.com Gary Horsman

      Same here. Not sure why they would stop development of the excellent CSSEdit and then take many of those great CSS editing features away in Espresso. Very scant documentation.

      I’ve written an email to MacRabbit with my feedback. I guess I’ll see how they’ll respond.

      • Christopher Anderton

        Now it’s 2013, and i still using CSSEdit. To keep it somewhat updated, i added auto-completion for CSS3 (Google it), and is now using Chrome with LiveReload+XRAY.

        I still don’t know why somebody could just rip the UI from CSSEdit. Espresso, still not comparable with CSSEdit.

  • Pingback: 30 More Great Apps You Won’t Find on the App Store | Best Web Magazine

  • Pingback: 30 Great Apps You Won’t Find on the App Store! | Netbu

  • Pingback: Chocolat: The New Mac Text Editor on the Block | Mac.AppStorm

  • Pingback: Chocolat: The New Mac Text Editor on the Block | Design City

  • Pingback: Chocolat: The New Mac Text Editor on the Block | Apple World

  • Aldo

    Great app! but I don’t like autocomplete, does anybody know how to disable this feature??

  • Pingback: Espresso 2 – CSS for MAC app | João Vagner

  • Pingback: 100 Mac Apps To Rule Them All | Design City

  • wRkA

    Espresso 2 it’s a good editor but still need more features about php, the css editor it’s fine but not so powerful. i only use for a simple sites.

    I personally use on my mac for working with wordpress themes the best editor it’s PHP Storm 3.x and the best editor for CSS in mac and win it’s Stylizer

    • tribalplague

      Stylizer is clunky, a memory hog and doesnt support CSS3

  • http://katalog.gery.pl/strona169983_Pobieranie_z_wrzuty.html Dusty Baeringer

    Hello. Cool write-up. There’s an problem with the website in internet explorer, and you might want to test this… The browser will be the marketplace chief and a large element of other folks will miss your wonderful writing due to this issue.

  • http://www.singaporeescorts.me singapore escorts service

    Aw, this was a very nice post. In concept I wish to put in writing like this moreover – taking time and precise effort to make a very good article… but what can I say… I procrastinate alot and not at all appear to get something done.

  • http://www.buysunglassesnz.com replica oakleys

    WONDERFUL Post.thanks for share..extra wait .. …

  • Christo

    Well I’ve used coda, textmate, sublime and espresso to code psd too html, css, and jquery files. As a front-end coder I appreciate what macrabbit are doing and what they have delivered, and in a short time frame release cycle too.

    Espresso contrary to some comments above does support LESS (via sugars), has ftp tools built in (Server Sync and Browse) and has awesome code completion, a super find, awesome css tools, and of course a great visual inspector (xray) which in sync with LESS watch works well for quick development (Even via localhost). All of which speeds up accurate and quality front end development.

    It’s not trying to be the most advanced editor but it’s certainly a great light-medium code editor, one of which I’m proud to use.

  • http://www.best-dehumidifierreviews.org/frigidaire-fad704tdp-70-pint-dehumidifier-reviews.html Frigidaire FAD704TDP 70-Pint dehumidifier reviews

    I went over this site and I conceive you have a lot of wonderful information, saved to fav (:.

  • http://www.vlado1.com Vladimir Varbanov

    It’s a great Editor. I’m using it since CSS edit Espresso version 1.
    There is something really weird in the version 2 and their ftp support. On some of my sites / hosts Espresso just can’t connect – its something like time out or something – I don’t know, but I have problems with Transmit, console terminal or any other client.
    where can I see some error log of this?

  • Lonzo

    Where are the Less Sugars Espresso 2? The only ones I can find a 2 years old.

    • cellfish

      There are some third-party LESS sugars out there, but I haven’t found anything decent. However, there’s an elegant way to make Espresso highlight LESS syntax: http://forr.st/~gxI

  • ed

    I’d like to see a comparison of Coda 2 and Espresso 2

    • http://techinch.com/ Matthew Guay

      We’re planning on getting one written up :)

  • Filipe

    Is there an alternative for the live view that espresso has for windows? thanks

  • Pingback: Best of AppStorm in October | Android.AppStorm

  • Pingback: Best of AppStorm in October | Windows.AppStorm

  • http://www.lawsart.com hozey

    I’m a big wysiwyg guy since I use a Mac. I’ve been using WebDesign by Rage Software for editing after publication. But, it crashes a lot. Been looking at Coda and Espresso. Do either have the ability to click on text or an object in preview and have it highlighted in the code window? This was a huge help in WebDesign.

theatre-aglow
theatre-aglow
theatre-aglow
theatre-aglow