Skip to content
This repository

A UI / Component Framework and Application Architecture for Backbone.js which uses twitter's bootstrap for styling

Update README.md

Updating readme with links to the documentation and examples.  Adding examples for using from the CDN.
latest commit dd47f6a663
Jonathan Soeder authored
Octocat-spinner-32 app fixing bug in state_model
Octocat-spinner-32 bin updating code sync
Octocat-spinner-32 downloads updating release
Octocat-spinner-32 lib simplifying the engine, removing hogan assets support, removing rake …
Octocat-spinner-32 public adding static source map of project
Octocat-spinner-32 site updating release
Octocat-spinner-32 spec adding cardview specs
Octocat-spinner-32 tutorials adding tutorials, adding framework documentation to project harness-a
Octocat-spinner-32 vendor updating release
Octocat-spinner-32 views Reorganizing project to conform to sprockets asset pipeline standard
Octocat-spinner-32 .gitignore git ignoring sublime artifacts
Octocat-spinner-32 .rvmrc checkpoint
Octocat-spinner-32 CHANGELOG Updting loadScript util, updating docs site
Octocat-spinner-32 Gemfile updating listen dependency
Octocat-spinner-32 Gemfile.lock updating listen dependency
Octocat-spinner-32 Guardfile removing compilation from guard process
Octocat-spinner-32 LICENSE.md Adding license
Octocat-spinner-32 README.md Update README.md
Octocat-spinner-32 ROADMAP Adding roadmap for 1.0 release
Octocat-spinner-32 Rakefile updating docs site, updating socket manager and code sync to use Luca…
Octocat-spinner-32 app.rb Adding significant amounts of documentation
Octocat-spinner-32 config.ru cleaning up rack config
Octocat-spinner-32 luca.gemspec updating listen dependency
README.md

Component Driven Architecture with Luca.JS

Luca is a component architecture framework based on Backbone.js, which includes many development helpers, classes, patterns, and tools needed to build scalable and clean single page applications.

It uses twitter bootstrap compatible markup and css naming conventions, making it possible to generate completely styled user interfaces with JSON alone.

Documentation Site and Examples

API Documentation

Component Examples

This is the app that runs the documentation site:

Sample App

Using the Library from CDN

Include the Javascripts:

<script type='text/javascript' src='//datapimp.github.io/luca/vendor/assets/javascripts/luca-dependencies.min.js'></script>
<script type='text/javascript' src='//datapimp.github.io/luca/vendor/assets/javascripts/luca.min.js'></script>

Include the CSS:

<link href='//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css' rel='stylesheet'>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css' rel='stylesheet'>
<link href='//datapimp.github.com/luca/vendor/assets/stylesheets/luca-ui.css' rel='stylesheet'>

Using With Rails Asset Pipeline

  # Gemfile
  gem 'luca', :git => "git@github.com:datapimp/luca.git" 

In your css manifest:

  /*
   *= require 'luca'
  */

All Javascript Dependencies:

  //= require 'luca/dependencies'
  //= require 'luca'

Your App:

  Luca.initialize('App', {
    // will look in window.AppBootstrap for an object
    // keyed on your collection's cache_keys() for automatically
    // populating collections on page load
    modelBootstrap: true,
    // will look in window.AppBaseParams for an object
    // or function used to determine the query parameters to
    // be sent on every request
    baseParams: true
  });

  JST['home'] = function() {
    // content
  };

  App.register('App.views.Home').extends('Luca.View').defines({
    template: "home",
    events: {
      "click .menu-handler" : "clickMenuHandler"
    },
    clickMenuHandler: function(e){

    }
  });

  App.register('App.Application').extends('Luca.Application').defines({
    // will use the Application classes internal controller
    // to make the home 'page' active in the viewport
    routes:{
      "" : "home"  
    }
    components:[
      name: "home"
      type: "home"
    ]
  });

  AppNamespace.onReady(function(){
    (new AppNamespace.Application).boot()
  })

Rails Generator

To generate Luca application skeleton run:
rails generate luca:application <app_name>
This will generate a controller, view, route, and the Luca application structure under assets/javascripts/

Contributing

You will need to run 'rake release:all' to compile/minify the asset which gets released.

Thanks To

@jashkenas, @davidgtonge, @twitter, @madrobby, et al.

Contributors

@tjbladez, @grilix, @nick-desteffen

Something went wrong with that request. Please try again.