‘stateful’ object styles & codepen.io

Jirka Tomasek jtomasek at redhat.com
Mon Jul 16 11:13:53 UTC 2012


On 07/16/2012 02:13 AM, Andy Fitzsimon wrote:
> Hi folks,
>
>
> I wanted to send through this idea for generic block styles for stateful components.  http://codepen.io/andyfitz/pen/states/
>
> The idea is that without showing any extra chrome, icons or text. we can give a friendly nod to the current state of any given object  (normal, paused, stopped & error).
> The error state can stack on top of any of the first three states too.
>
> This might help us keep our views related to their primary task without having to force our users to another screen just to inspect the condition of their components.
>
> State-related tasks can be hidden until hover but show on first load of any view (yes hover won't work on a phone but the idea is to only use these as periphery shortcuts for object functionality that exists elsewhere.. i'm working on adding horizontal swipe to reveal the shortcuts for phones)
>
> I also wanted to tell you about codepen.io -  it's kindof like JSFiddle mixed with dribbble but with SASS/SCSS & coffeescript support and other nice things like saving as a fully-working github gist.   I'm in love.
>
> As you can see in the demo I threw up,  the scss and haml are already writen and ready to take as is.  I'll be using codepen to play with more ideas before merging them into converge-ui-example or sending them to everyone.   Now we don't have to worry about my colour choices — we can change $tones; in the sass to match out palette ;-)
>
> Andy
Hi,

This looks awesome and I can see it perfectly usable in our pretty 
views. I specially like the stackability of error class. This kind of 
functionality has been planned for the pretty views from the beginning.

Just note, I presume the background/style should not be the only status 
indicator, as recently we are having (and adding) more possible states 
so we can stick with the 3 general differentiations by background/style 
and specify the status with textual information.

Jirka



More information about the aeolus-devel mailing list