
The Pixate Project: Bringing CSS to Native Apps - pcolton
http://benzilla.galbraiths.org/2012/08/27/pixate/
======
cletus
In Java at least this has been tried before. There was something called the
Jaxx Framework [1]. jaxxframework.org now seems to be defunct so I guess it
died.

Personally I'm unenthused.

For one thing, the typical reason to write native apps these days is that it's
a mobile app. Certainly on iOS you'd be better off staying on the reservation.
There's only 2/3 resolutions to support anyway (plus two orientations for
each). Android is of course more varied.

For desktop apps, you're getting increasingly specialized software (the rest
going to Web apps) and your best bet is still to stick to the native libraries
(Cocoa, WPF, etc).

[1]:
[http://weblogs.java.net/blog/enicholas/archive/2006/03/style...](http://weblogs.java.net/blog/enicholas/archive/2006/03/style_swing_com.html)

~~~
heretohelp
I'm pretty sure Java in general is a good graveyard to check for "what not to
do" save for choice libs like NIO, Netty, etc.

------
sprobertson
This is awesome. I don't understand why people are hating on CSS (for one,
their hatings don't include reasons _why_ ); to me it is a beautiful way to
separate form from function. Changing that one button from green to blue? Easy
enough with or without CSS. Changing that same button in every one of its 163
possible locations? CSS saves lives in these scenarios.

~~~
wvenable
If you have a large code base with lots of UI then CSS becomes very brittle to
change. Nest some UI elements that have never been nested before and something
will break. One tiny change in one place affects something somewhere else. You
have start making exceptions, a duplicate a rule here or maybe an !important
there. Eventually you're got nothing but exceptions.

Personally, I think the _concept_ of declarative styling is brilliant but the
implementation in CSS leaves a lot to be desired. It's far more error-prone
than necessary.

------
zbowling
I did this for iOS 2 years ago for a hackathon.
<http://cssapply.github.com/CSSApply/>

It's not entirely done but it's a good start for someone.

The video explains it more:
<http://www.ustream.tv/recorded/16073539/highlight/187549>

~~~
terhechte
That looks pretty good. I also have a homegrown solution that does something
similar but uses a css-like syntax but isn't like css. It's sufficient for my
purposes though lacks many of the things your solution has. I'll have a more
detailed look at CSSApply, and see if I can add to it :)

------
gcr
GTK 3 uses CSS for user styles and themes too, I think. See
[https://desktopsummit.org/sites/www.desktopsummit.org/files/...](https://desktopsummit.org/sites/www.desktopsummit.org/files/Theming%20GTK3%20Widgets%20with%20CSS.pdf)

This replaces the old `.gtkrc` system.

Those with recent Ubuntu desktops, try it out!

------
hopeless
I find it somewhat suspicious that the original Pixate kickstarter was for
¢200,000 but they cancelled that 6 days prior to the deadline, with only ~$21k
raised [1]. Now they're back with a new kickstarter for $25,000 (which they've
passed) [2]. This article also raises the same questions [3]

This might not be too suspicious except that no where do they address what
happened in the first campaign and what has changed since. Why did they need
$200,000 a month ago but now only need $25,000? What has changed?

As the Dragons Den catchphrase goes, "for that reason, I'm out"

[1] [http://www.kickstarter.com/projects/2015210423/pixate-
beauti...](http://www.kickstarter.com/projects/2015210423/pixate-beautiful-
native-mobile-apps-with-css)

[2] [http://www.kickstarter.com/projects/pixate/beautiful-
native-...](http://www.kickstarter.com/projects/pixate/beautiful-native-
mobile-apps)

[3] [http://thenextweb.com/insider/2012/08/26/is-pixate-
astroturf...](http://thenextweb.com/insider/2012/08/26/is-pixate-astroturfing-
kickstarter/)

Edit: added the links

------
erichocean
And then there's Blossom[1], which does the opposite: remove CSS from web
apps.

Blossom lets you build native-quality web apps for mobile browsers without
every touching the DOM or CSS -- it's 100% JavaScript.

(Full disclosure: I developed Blossom earlier this year.)

[1] <https://github.com/fohr/blossom>

------
carson
I found this interesting when I saw it before. I had thought of something
similar after seeing Nimbus Chameleon <http://blog.jeffverkoeyen.com/nimbus-
chameleon> The difference for me however was I was just thinking iOS and was
wondering if something could be created that utilized the UIAppearance APIs in
UIKit
[http://developer.apple.com/library/ios/#documentation/uikit/...](http://developer.apple.com/library/ios/#documentation/uikit/reference/UIAppearance_Protocol/Reference/Reference.html)

Edit: I realized I ran into something that does almost exactly what I wanted a
couple weeks ago on github <https://github.com/robertwijas/UISS>

------
zokier
Qt supports CSS stylesheets: [http://doc.qt.nokia.com/4.7-snapshot/stylesheet-
examples.htm...](http://doc.qt.nokia.com/4.7-snapshot/stylesheet-
examples.html)

Qt has also QML, which gives developing "native" apps bit web feel.

------
est
CSS layout for native apps? I have to hack heights for a vertical center
position?

~~~
skyhook_mockups
check out the CSS3 flexible box model... it'll blow your mind :)

~~~
est
CSS3 is just a standard. Do you have any full CSS3 implementations embeddable
in programs?

I'd rather invent something new layout engine than using the lame CSS way. For
example I want place an box A next the box B on its right at the distance of
50% of the height of the box C on the left.

~~~
skyhook_mockups

      "CSS3 is just a standard."
    

That's a very strange criticism. Would you prefer a proprietary black box to
do your layout for you?

    
    
      "Do you have a full CSS3 implementation embeddable in programs"
    

Another strange one. You can embed webkit and gecko in a desktop app.

On iOS the recommended way of getting formatted multi-line text is to use a
UIWebView (webkit)

    
    
      "I'd rather invent something new layout engine than using the lame CSS way"
    

I'm guessing you've never actually written a layout engine before. They're
notoriously hard to get right.

    
    
      "For example I want place an box A next the box B 
      on its right at the distance of 
      50% of the height of the box C on the left"
    

You could either use a pre-processor (such as LESS) for the placement of Box
A, or if its position is a dynamic property then you can set it using JS.

~~~
est
> Would you prefer a proprietary black box to do your layout for you?

How many times have you look into webkit or gecko source code to fix layout
problems?

If you think a layout engine is complex enough that need to be open sourced,
you are doing it wrong.

Layouts should be simple and intuitive. Not a cluster fuck of div's and hacks.

> You can embed webkit and gecko in a desktop app.

Which is basically an html5 app right?

> I'm guessing you've never actually written a layout engine before. They're
> notoriously hard to get right.

Yes I have never written anything like that, but I can tell you native app
development (Visual Studio, XCode) layouts are much simpler and more powerful.
The problem with HTML and CSS is that they are eigher document flow based or
absolute position. It's hard to do relative or responsive layouts right. It's
easier to do it right in native ways. There are much richer containers,
control groups and docking options.

> a pre-processor (such as LESS) for the placement of Box A, or if its
> position is a dynamic property then you can set it using JS.

Oh wow, Javascript for layout, right.

~~~
skyhook_mockups

      How many times have you look into webkit or gecko 
      source code to fix layout problems?
    

That's not really the point. Let's use the Adobe Flex Framework as an example.
If you bought into Flex 5 years ago then you're probably starting to feel a
bit nervous. The reasons being:

    
    
      1. Adobe are themselves signaling that 
      HTML is the future by releasing HTML5 tools (Edge)
      2. Adobe have abandoned mobile Flash development
      3. Developer mind-share is firmly in the HTML camp.
    

Now, if the full adobe/flash stack were open source and there were multiple
companies working on it, it would be less of an issue as the technology you
invested into would continue to be supported. The fact that you, personally
are not working on the flash/flex core would be irrelevant, as is the case
with HTML5 and the open web.

    
    
      If you think a layout engine is complex enough that 
      need to be open sourced, you are doing it wrong.
    

I'm at a loss trying to respond to this. If you think writing a layout engine
from scratch is easy then you simply don't understand the problem very well.
Even writing a good _text_ layout engine is _very_ hard to get right, and text
layout is only a subset of the whole problem. Not only that, but layout is an
orthogonal problem to the one you're trying to solve (unless you're writing a
browser or word processor), so the time you sink into it is wasted.

    
    
      native app development (Visual Studio, XCode) layouts are much 
      simpler and more powerful
    

It's simpler because the complexity is abstracted away from you by the
IDE/tools. The actual (hidden) application logic driving the layouts is just
as complex if not more so.

    
    
      The problem with HTML and CSS is that they are either 
      document flow based or absolute position.
    

Absolutely agree with you here. The document paradigm has been abused horribly
to allow for complex layout on the web, and its roots are painfully evident -
it certainly wasn't meant for this type of work.

    
    
      It's easier to do it right in native ways. There are much richer containers,
      control groups and docking options.
    

Agree here too. Having said that though there are great advances being made,
the flexible box model being one of them.

    
    
      Oh wow, Javascript for layout, right.
    

That's sarcasm not a rebuttal :)

Going back to the original point, I think that CSS for native layout may be an
OK idea, CSS certainly has it share of strengths and weaknesses. One thing
this approach has in its favor is a low barrier to entry for web developers
which may help bridge the designer/developer divide.

It's been fun sparring with you :)

all the best, eli

------
heretohelp
I already have a frontend engineer considering switching to native iOS and
Android apps just so he can get away from CSS.

I am not exaggerating, that is 99% the reason for his desire to abandon ship.
He complains about CSS _daily_ despite being one of the more knowledgeable
people I know about CSS, save for the rare occasion he asks me a question.

Why should I react to this project by doing anything other than lighting a
molotov cocktail?

~~~
jenius
I have honestly never heard of anyone not liking CSS before reading this
thread, except for maybe people just starting out who don't understand it. I
am an experienced front-end developer an agency and I love css when it's
enhanced by a dynamic language like sass or stylus. It's quick, powerful, and
easy style many elements at once and create beautiful and lightweight custom
UI elements. The only thing I don't like is having to work with it cross
browser, but that has _nothing_ to do with css as a language.

I studied iOS development for a few months, read a 600 page book on it, and
tinkered around with it for a while and found myself begging for CSS. Native
custom app interfaces seem backwards to me - the difficult of writing core
graphics methods for every bevel, rounded corner, gradient etc has a lot of
developers just using cut images for everything. Disclaimer, I'm way way more
experienced with css than i am with core graphics - just my impressions.

~~~
randomdata
I often find myself wishing for CSS widgets, so to speak. A reusable component
of HTML and CSS that can be inserted without inheriting anything from the
parent elements. You can achieve this if you take a lot of care, but it should
be a lot easier than it is.

But where CSS really falls apart is in layouts. What is just a simple equation
in a native application ends up being a myriad of hacks to get things flowing
right in CSS. Javascript comes with the missing pieces, but introduces its own
set of problems if you try to rely on it.

> the difficult of writing core graphics methods for every bevel, rounded
> corner, gradient etc has a lot of developers just using cut images for
> everything.

On iOS, the QuartzCore framework provides declarative methods for those common
style choices (rounded corners, gradients, etc.).

~~~
skyhook_mockups
The new CSS3 flexible box layout changes all that. It's incredibly rich and
designed to obviate the need for clumsy CSS layout hacks. Check it out if you
haven't already... it is the missing piece for app-like layouts for the web.
The incredibly complex layouts that can be achieved with minimal CSS and _no_
JS is astounding. Pair this with text-overflow and with ~ 50 lines of CSS and
some _very_ basic html you can achieve wonders.

Not only that but it's usable today. Both webkit and gecko have very close
implementations with only minor edge cases, none of which are insurmountable.

Not sure about iOS support for the new layout modes.

