4 ms·

Show HN: Xpressive - CSS3 Live Design Tool for Mac OSX

84 points by dilipray 13y ago

cliveowen 13y ago
I think a double display setup coupled with automatic page refresh after a change is more than enough to efficiently write CSS.
- bbrks 13y ago
  Yeah, I'm not quite sure why they're pushing "live changes" feature so hard. It's been around forever.
  - adyus 13y ago
    Yes, but there may be some non-dev designers that do not yet know how to set it up, or haven't heard of Grunt.
    - publicfig 13y ago
      That's what I was wondering about. Grunt is absolutely perfect for these kinds of workflows and if you want realtime changes that don't involve refreshing the page, just use the developer console.
joshcrowder 13y ago
This looks really interesting. Going to give it a play today. I'm interested in how you handle keyframe animations EDIT I had a quick look through your CSS (which I think is built using Xpressive) overall I think it looks pretty good. Although you could definitely shave of 30% off by inlining some of the rules. For instance for margin:0 auto; you call margin-left:auto, margin-right:auto. The same applies for background, using the shorter version cuts files sizes dramatically
- imjared 13y ago
  Just for the sake of clarification, I don't think "inlining" is what you're looking for. Using `margin: 0 auto;` is shorthand, not inline. Inline would be `<div style="margin: 0 auto;"></div>`. Definitely don't want that :)
loceng 13y ago
I wonder if this kind of native design would be easier to use than fully custom setup that many web applications are creating.
scrumper 13y ago
Looks very impressive; I only do CSS occasionally so an easy tool like this is of value to me. Will try it. A couple of things: I don't think the dot-org TLD is appropriate for a commercial venture. Your app store link takes me to an itunes web page on the Japanese app store, rather than launching App Store itself.
- dilipray 13y ago
  Hey, The link they pointed is https://itunes.apple.com/js/app/xpressive/id665817114?mt=12 https://itunes.apple.com/js/app/xpressive/id665817114?mt=12 They should have pointed it to global link https://itunes.apple.com/app/xpressive/id665817114 https://itunes.apple.com/app/xpressive/id665817114
samsnelling 13y ago
Just purchased the full version for 21.99 on the Mac App Store. Is there an email address to give feedback to? I assume OP wanted feedback?
- esusatyo 13y ago
  I found this: xpressive@modulay.com Also on Twitter: https://twitter.com/Xpressive_Team https://twitter.com/Xpressive_Team
oliverhunt 13y ago
What does this do that codekit and a browser cant?
- jasonlotito 13y ago
  How do I get that timeline editing feature in CodeKit and Chrome? Oh, and automating the vendor prefixing. That would be nice as well. Thanks!
  - STRML 13y ago
    The timeline editing is pretty cool. But you could easily get automatic vendor prefixing with SCSS/SASS (and you should be using a compile-to-CSS language if you're doing serious web design), and automatic reloads with Vogue or LiveReload. If I wanted to do serious CSS animations, though, this is worth a shot - and it's a great tool for inexperienced web designers or those short on time.
    - jasonlotito 13y ago
      I was asking because the OP to my comment implied it could be done with just a browser and CodeKit. I'd rather keep the number of dependencies to a minimum. I haven't used Chrome for front-end dev work for some time, so maybe it's added these features. And CodeKit does compilation, so I figured it would have this. If I have to go the route of installing a bunch of individual tools and maintaining them separately, then it becomes less appealing.
      - STRML 13y ago
        Yeah, I get that. It depends on how often you do web work. If you do it as often as I do, it makes a lot of sense to put in the extra effort now to streamline you work in the future. But obviously that doesn't apply to everyone.
arvin 13y ago
I just downloaded the trial, but the app requires Mac OS X 10.8, I'm still on 10.7. I suggest to put something in the website that it requires 10.8.
- schrijver 13y ago
  I would suggest to make it compatible with 10.7 :)
bountie 13y ago
FYI, the call to action is obscured (actually it's more accurate to say there is no call to action, i.e. a button to download the app) in iPad portrait mode. You can see this when you resize the desktop browser to that width.
tambourine_man 13y ago
This is not a fault of Xpressive, but of CSS3's implementation: doesn't it bother anyone that we're in 2013 and we still have non anti-aliased motion graphics? http://i.imgur.com/GAJuyqV.jpg http://i.imgur.com/GAJuyqV.jpg
- mmastrac 13y ago
  Interesting: I'm using Chrome and I don't actually see the graphic you linked. I saw a mess of boxes shaped roughly like what you posted halfway down the page and had no idea what it was. Chrome bug? Or maybe a CSS issue?
Concours 13y ago
looks fine I may give it a try to compare it with http://brackets.io/ http://brackets.io/ , can you tell me why would someone choose it over an amazing, free and open source project like http://brackets.io/ http://brackets.io/ ? Why should I use it over Bracket ?
dharma1 13y ago
will give it a go, though there are other ways to do the live reload (grunt for instance). Being able to save code changes in element inspector is nice, any way to do that in chrome? What were the other killer features?

84 points by dilipray 13y ago

I think a double display setup coupled with automatic page refresh after a change is more than enough to efficiently write CSS.

bbrks 13y ago
Yeah, I'm not quite sure why they're pushing "live changes" feature so hard. It's been around forever.
- adyus 13y ago
  Yes, but there may be some non-dev designers that do not yet know how to set it up, or haven't heard of Grunt.
  - publicfig 13y ago
    That's what I was wondering about. Grunt is absolutely perfect for these kinds of workflows and if you want realtime changes that don't involve refreshing the page, just use the developer console.

joshcrowder 13y ago

This looks really interesting. Going to give it a play today. I'm interested in how you handle keyframe animations EDIT I had a quick look through your CSS (which I think is built using Xpressive) overall I think it looks pretty good. Although you could definitely shave of 30% off by inlining some of the rules. For instance for margin:0 auto; you call margin-left:auto, margin-right:auto. The same applies for background, using the shorter version cuts files sizes dramatically

imjared 13y ago
Just for the sake of clarification, I don't think "inlining" is what you're looking for. Using `margin: 0 auto;` is shorthand, not inline. Inline would be `<div style="margin: 0 auto;"></div>`. Definitely don't want that :)

loceng 13y ago

I wonder if this kind of native design would be easier to use than fully custom setup that many web applications are creating.

scrumper 13y ago

Looks very impressive; I only do CSS occasionally so an easy tool like this is of value to me. Will try it. A couple of things: I don't think the dot-org TLD is appropriate for a commercial venture. Your app store link takes me to an itunes web page on the Japanese app store, rather than launching App Store itself.

dilipray 13y ago
Hey, The link they pointed is https://itunes.apple.com/js/app/xpressive/id665817114?mt=12 https://itunes.apple.com/js/app/xpressive/id665817114?mt=12 They should have pointed it to global link https://itunes.apple.com/app/xpressive/id665817114 https://itunes.apple.com/app/xpressive/id665817114

samsnelling 13y ago

Just purchased the full version for 21.99 on the Mac App Store. Is there an email address to give feedback to? I assume OP wanted feedback?

esusatyo 13y ago
I found this: xpressive@modulay.com Also on Twitter: https://twitter.com/Xpressive_Team https://twitter.com/Xpressive_Team

oliverhunt 13y ago

What does this do that codekit and a browser cant?

jasonlotito 13y ago
How do I get that timeline editing feature in CodeKit and Chrome? Oh, and automating the vendor prefixing. That would be nice as well. Thanks!
- STRML 13y ago
  The timeline editing is pretty cool. But you could easily get automatic vendor prefixing with SCSS/SASS (and you should be using a compile-to-CSS language if you're doing serious web design), and automatic reloads with Vogue or LiveReload. If I wanted to do serious CSS animations, though, this is worth a shot - and it's a great tool for inexperienced web designers or those short on time.
  - jasonlotito 13y ago
    I was asking because the OP to my comment implied it could be done with just a browser and CodeKit. I'd rather keep the number of dependencies to a minimum. I haven't used Chrome for front-end dev work for some time, so maybe it's added these features. And CodeKit does compilation, so I figured it would have this. If I have to go the route of installing a bunch of individual tools and maintaining them separately, then it becomes less appealing.
    - STRML 13y ago
      Yeah, I get that. It depends on how often you do web work. If you do it as often as I do, it makes a lot of sense to put in the extra effort now to streamline you work in the future. But obviously that doesn't apply to everyone.

arvin 13y ago

I just downloaded the trial, but the app requires Mac OS X 10.8, I'm still on 10.7. I suggest to put something in the website that it requires 10.8.

schrijver 13y ago
I would suggest to make it compatible with 10.7 :)

bountie 13y ago

FYI, the call to action is obscured (actually it's more accurate to say there is no call to action, i.e. a button to download the app) in iPad portrait mode. You can see this when you resize the desktop browser to that width.

tambourine_man 13y ago

This is not a fault of Xpressive, but of CSS3's implementation: doesn't it bother anyone that we're in 2013 and we still have non anti-aliased motion graphics? http://i.imgur.com/GAJuyqV.jpg http://i.imgur.com/GAJuyqV.jpg

mmastrac 13y ago
Interesting: I'm using Chrome and I don't actually see the graphic you linked. I saw a mess of boxes shaped roughly like what you posted halfway down the page and had no idea what it was. Chrome bug? Or maybe a CSS issue?

Concours 13y ago

looks fine I may give it a try to compare it with http://brackets.io/ http://brackets.io/ , can you tell me why would someone choose it over an amazing, free and open source project like http://brackets.io/ http://brackets.io/ ? Why should I use it over Bracket ?

dharma1 13y ago

will give it a go, though there are other ways to do the live reload (grunt for instance). Being able to save code changes in element inspector is nice, any way to do that in chrome? What were the other killer features?