framer icon indicating copy to clipboard operation
framer copied to clipboard

Framer is a web craftsman’s tool, making a light task of creating prototypes and wireframes of websites.

h1. framer

h5(intro). a web craftsman's tool, making a light task of creating wireframes and prototypes of websites.

h3(demo){text-align:right; margin-top:-1em}. "Demo →":http://framer.seaofclouds.com/demo.html

h2. Features

h4. framer is new and in active development. It's improving, and can use your help!

  • Powered with "Compass":http://compass-style.org/, "Blueprint":http://blueprintcss.org/, "HAML, SASS":http://haml.hamptoncatlin.com/, "jQuery":http://jquery.com/, "Sinatra":http://www.sinatrarb.com/, and "Ruby":http://www.ruby-lang.org/en/.
  • Lorem Ipsum generator to quickly place text.
  • Fake content with "faker":http://faker.rubyforge.org/, and make it easy to design a user-centered experience.
  • Helpers make everything from generating links to dropping placeholder images a few keystrokes away.
  • Design palette for easy color reference, grid toggling and other bits.
  • Automatically generate static views to share with clients.

h2. Download

h2. Usage

h3. 1. install

@git clone git://github.com/nex3/haml.git@
@cd haml@
@sudo rake install@
@sudo gem install chriseppstein-compass --source=http://gems.github.com/@
@sudo gem install RedCloth lorem faker sinatra@

if you haven't already downloaded framer, get it with git:

@git clone git://github.com/seaofclouds/framer.git@

h3. 2. run it

@cd framer@
@ruby framer.app@

visit "http://localhost:4567/":http://localhost:4567/ in your browser.

h3. 3. haxxxx!

edit views, stylesheets and javascript with tools you know: jquery, haml, sass, and ruby.

framer is new and in active development. It's improving, and can use your help!

h2. Contribute

Bring your code slinging skills to "Github":http://github.com/seaofclouds/framer and help us develop new features for framer!

@git clone git://github.com/seaofclouds/framer.git@

h2. Thanks

  • "blake mizerany":http://github.com/bmizerany, for sinatra. awesome, awesome sinatra.
  • "hampton catlin":http://github.com/hcatlin for haml, sass and making my life so much easier.
  • "ryan tomayko":http://github.com/rtomayko for staticizer, something i've wanted to do in sinatra for a long time.
  • "chris eppstein":http://github.com/chriseppstein, for compass. without it, i never would have used blueprint.
  • "christian montoya":http://christianmontoya.com for blueprint
  • to all you CSS developers out there who strive for something better, and easier
  • "leffe":http://images.google.com/images?oe=UTF-8&sourceid=navclient&gfns=1&q=leffe%20beer&um=1&ie=UTF-8&sa=N&hl=en&tab=wi for refreshing breaks during development

h2. "Licensed under the MIT License":http://www.opensource.org/licenses/mit-license.php