Solution Online

This is all made possible thanks to the efforts of Gadi Cohen's excellent package's Famous-Views and his community (in which I contribute a bit).

// This is pretty basic for every mobile app. 
head
  title FlexGrid test
  meta(charset='utf-8')
  meta(name='viewport', content='width=device-width, maximum-scale=1, user-scalable=no')
  meta(name='apple-mobile-web-app-capable', content='yes')
  meta(name='apple-mobile-web-app-status-bar-style', content='black')
  meta(name='apple-mobile-web-app-capable', content='yes')
  meta(name='mobile-web-app-capable', content='yes')
body
  // Every Famo.us apps starts with a context.
  +famousContext id="mainCtx"
    // The code is divided into reusable templates
    // looking very much like web components.
    +flexGridExample

template(name='flexGridExample')
  // Now we create our 'render tree'.
  +Scrollview id='scrollview'
    // Here is the FlexGrid: it's indeed a single line of code!
    +FlexGrid id='flexgrid'
      // Here, I connect my datasource: a reactive array.
      +famousEach items
        // I use the available values in each item of the array
        // Note that CSS styles can be passed as reactive value,
        +Surface class='surf' properties=color
          // Or as reactive content.
          p= name

Introduction

The problem

The solutions

Conclusion

Introduction

The base component

Conclusion

meteor add pierreeric:rxfavico

rxFavico.set 'count', 10

meteor add pierreeric:cssc

if Meteor.isClient
  Meteor.startup ->
    css = new CSSC

    css.add '.selected',
      margin: CSSC.x 3
      border: "3px solid #{CSSC.yellow}"
      borderRadius: CSSC.x 5
    css.add '.unselected',
      color: CSSC.yellow

• CSSC-Colors which allows inclusion of a nicer set of colors

• CSSC-Famous which avoids you from including CSS files from Famo.us.

• fview-bksurfaceimage: Adaptive images.
• fview-devices: Responsive SVG devices working as container for demoing apps.
• fview-dotloader: Simple and customizable loader.
• fview-slidedeck: Slide deck engine à la Bespoke, Reveal, Impress, Prezzi.
• fview-flexgrid: Flexible grid.

# Render the body when Meteor is ready
Meteor.startup Template.body.renderToDocument

# HTML
# ----
# Instantiate a main template
Template['main'] = new Template 'Template.main', ->
  # Return a table of DOM elements
  [
    # A 'p' tag with a reactive variable
    HTML.P 'Count ', Blaze.View => Spacebars.mustache @lookup 'count'
    # A 'button' tag
    HTML.BUTTON '+1'
  ]

# JS logic
# --------
# Declare a reactive variable
Session.set 'count', 0
# Expose the reactive variable to the template
Template.main.helpers 'count': -> Session.get 'count'
# Handle template events
Template.main.events
  'click button': (e,t) ->
    e.preventDefault()
    Session.set 'count', 1 + Session.get 'count'
# Add the template to the document's body
Template.body.addContent ->
  Spacebars.include @lookupTemplate 'main'

# CSS
# ---
# Instantiate a stylesheet
css = new CSSC
# Style the body and the text
css.add 'body',
  margin: CSSC.px 20
  backgroundColor: CSSC.navy
  color: CSSC.aqua
# Style the button
.add 'button',
  width: CSSC.px 50
  border: "#{CSSC.px 1} #{CSSC.maroon} solid"
  borderRadius: CSSC.px 3
  backgroundColor: CSSC.red
  color: CSSC.yellow

# Start by creating a simple app.
meteor create singlefile
cd singlefile
# Remove the Meteor's default app.
rm *
# We are going to focus only on the front.
# Our single file is being placed in the client directory.
mkdir client
# Add the necessary packages.
meteor add coffeescript pierreeric:cssc pierreeric:cssc-colors pierreeric:cssc-normalize
# Create your single file and start editing it.
touch client/main.coffee

Introduction

The core components

Conclusion and code reuse