Responsive tool for Framer.js

responsive.coffee

# responsive.coffee
# Lorenzo Ferrante 2014

# Width variable
width60 = Screen.width / 1.66 # width: 60% -> Default
width80 = Screen.width / 1.25 # width: 80%
width90 = Screen.width / 1.11 # width: 90%

# Reload page when screen is resized 
window.addEventListener "resize", (event) ->
  location.reload()

background = new BackgroundLayer
background.backgroundColor = "#f5f5f5"

textLayer = new Layer(width: width60)
textLayer.style = {
  "padding": "35px 0px"
  "background": "transparent"
  "color": "#434343"
  "font-family": "Roboto, Myriad Pro, Helvetica Neue, Helvetica, Arial, sans-serif"
  "font-size": "40px"
}
textLayer.html = "responsive.coffee"
textLayer.centerX()

firstPanel = new Layer( 
  width: width60
  height: 100
  y: 100
)
firstPanel.style = {
  "backgroundColor": "#fff"
  "box-shadow": "0 2px 15px rgba(0, 0, 0, 0.2)"
  "border-radius": "6px"
}
firstPanel.centerX()

secondPanel = new Layer( 
  width: width60
  height: 100
  y: 250
)
secondPanel.style = {
  "backgroundColor": "#fff"
  "box-shadow": "0 2px 15px rgba(0, 0, 0, 0.2)"
  "border-radius": "6px"
}
secondPanel.centerX()

thirdPanel = new Layer( 
  width: width60
  height: 100
  y: 400
)
thirdPanel.style = {
  "backgroundColor": "#fff"
  "box-shadow": "0 2px 15px rgba(0, 0, 0, 0.2)"
  "border-radius": "6px"
}
thirdPanel.centerX()

# Tools for responsive -> Get Screen widht and modify Layers width
if Screen.width < 750
  textLayer.width = width80 # width: 80%
  textLayer.centerX()
  firstPanel.width = width80 # width: 80%
  firstPanel.centerX()
  secondPanel.width = width80 # width: 80%
  secondPanel.centerX()
  thirdPanel.width = width80 # width: 80%
  thirdPanel.centerX()
  
if Screen.width < 600
  textLayer.width = width90 # width: 90%
  textLayer.centerX()
  firstPanel.width = width90 # width: 90%
  firstPanel.centerX()
  secondPanel.width = width90 # width: 90%
  secondPanel.centerX()
  thirdPanel.width = width90 # width: 90%
  thirdPanel.centerX()