Fun with Framer styling

Framer Style Demo

// Set up our views
myStream = new View({x: 0, y: 0, width: 320, height: 568})
myStory = new View({
    x: 10,
    y: 10,
    width: 300,
    height: 160,
    html: "Hello world"
})

// Set a single style attribute using the javascript style object
// see them all: http://www.w3schools.com/jsref/dom_obj_style.asp
myStream.style.backgroundColor = "whitesmoke"

// Sometimes it's helpful to save a set of styles
// in order to reapply it to several views.
var cardStyling = {
    "padding": "24px",
    "background": "white",
    "box-shadow": "0 1px 3px 0 rgba(0,0,0,.25)",
    "border-radius": "2px"
}

// Style the typography just for myStory
myStory.style = {
    "color": "#444",
    "font-family": "Helvetica Neue",
    "text-align": "left",
    "font-size": "24px"
}
// Apply the saved cardStyling variable to the myStory view
myStory.style = cardStyling

// You can copy the style of one view to another
// create a view with the same frame (position and size) as myStory
myOtherStory = new View(myStory.frame)
// Move it down
myOtherStory.y = myStory.maxY + 12

myOtherStory.on("click", function(){
    myOtherStory.style = cardStyling 
})