Code Monkey home page Code Monkey logo

famousry's Introduction

Famousry

JQuery Masonry / Isotope alternative implemented with famo.us. At the moment famousry only handles a single column width and all the elements to should confrom to that width. It automatically figures out the best layout to keep the order closest to the original while also making all the columns come as close to ending at the same-height as possible.

Built on the strength of famous, the it's got good performance and can handle a large number of elements and animations between various positions, even if you resize very frequently.

gitf

##Dependencies It is actually quite simple really

First make sure you have node.js installed... without that nothing works! You can either install it with your favorite package manager or with the installer found on nodejs.org.

This project relies on grunt-cli, and bower to do all the heavy lifting for you

npm install -g grunt-cli bower

##Getting Started

npm install && bower install

That's it!!!

##Running the Development Server

Simply run grunt serve and you will start a local development server and open Chrome. Watch tasks will be running, and your browser will be automatically refreshed whenever a file in the repo changes.

You can run serve with --port=9001 to manually pick the port that the server will run on

This option is currently borked... You can also change the port livereload is running on with the option --livereload=8675309 ... if you think you can fix it check out the issue on github

If you would like to have your server be accessible to other devices on your local machine use the option --hostname=0.0.0.0

##Production

If you would like to compile your project for distribution simply run the command grunt to build dist/ which will be a deployment ready version of your app. Preprocessing will be applied to html, all js will be concatenated and minified. All js / css assets will also have their name prepended with a hash for cache busting.

Contributing

All contributions are welcome! The simplest way to show your support for this project is to "star" it.

##License Famousry is licensed under the MIT license. Famo.us is licensed under it's own license.

Future

Famousry is mostly a proof-of-concept. I'm working on making it production-ready. Soon it should be as easy to use as a jQuery plug-in where you can drop it into an existing float or inline-block based layout, and it should automatically work with it.

Also, soon it should have these features:

  • elements with multi-column spans
  • custom transitions
  • filtering elements, using a custom filter fuction
  • dynamically adding and removing elements
  • automatically handle resizing elements

famousry's People

Contributors

nmn avatar

Stargazers

Joe Pea avatar xieyimian avatar Mark Wheeler avatar Ben Warren avatar Thomas Flemming avatar Taylor Poe avatar Piotrek Majewski avatar Alexander Kushi-Willis avatar  avatar  avatar Michael Klein avatar Adam avatar Ben Newton avatar Imti Majeed avatar Xianliang Wu avatar Daniel Wade avatar Bob Davies avatar Jonathan Barratt avatar Alejandro Oviedo avatar Gabriel Scindian avatar AG avatar Norman Sue avatar  avatar Pierre-Eric Marchandet avatar  avatar Ludovic Claude avatar Ernst Salzmann avatar Pritesh Jain avatar Tony Alves avatar Edmundas Mišeikis avatar Carsten  avatar Adrian Rossouw avatar  avatar

Watchers

Miguel avatar James Cloos avatar Xianliang Wu avatar  avatar

famousry's Issues

Working example

Hi,
i´m currently working on the same approach of producing a bullet-proof masonry layout with resizing and relayout. Wanted to ask how far you´ve come and if i could help somehow. Famo.us is great, but an elementary layout options like a masonry is not included >.<
hope to hear from you

michael

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.