GithubHelp home page GithubHelp logo

bhanditz / rollercoaster Goto Github PK

View Code? Open in Web Editor NEW

This project forked from operasoftware/rollercoaster

0.0 2.0 0.0 5.79 MB

A simple site featuring good tablet-optimized site concepts and design patterns

License: Other

HTML 40.14% CSS 29.19% JavaScript 30.67%

rollercoaster's Introduction

=R=o=l=l=e=r=c=o=a=s=t=e=r

Rollercoaster is a site showcasing good-looking tablet-optimized sites, best practices and interesting design patterns.

The concept is simple: a screenshot and a few lines of commentary per site.

Visitors can quickly browse between featured sites with the left-right arrows or with a swipe gesture.

Contributing

Contributing is easy! Give us a shout at @odevrel on Twitter and share the URL of a site you think we should review.

If you want to contribute your own reviews, just follow these steps:

  1. Fork this repository.
  2. Take a screenshot of the site you want to write about, save it as JPG or PNG, give it a sensible name and place it in the postimages folder.
  3. Navigate to _posts and create a new Markdown file. It must start with 3 lines of YAML metadata:
    • ---
    • layout: post → just copy this as is
    • name: Site Name → enter the full name of the site.
    • image: sitename.png → replace sitename.png with the name of the image you've placed in the postimages folder.
    • website: http://www.sitename.com/ → the URL of the website you've reviewed
    • copy: © 2013 site owner etc. → the copyright notice on the website you've reviewed. Don't include if there is no copyright notice shown.
    • ---
  4. Below the YAML metadata, you write your review in Markdown syntax, and save the file with a file name in the following format: yyyy-mm-dd-sitename.md
  5. Once all that is done, do a pull request to get it added to master.

**

Image optimization tips

For consistency purposes, screenshots should be 1024x768px in portrait mode, and taken using Coast by Opera.

In order to determine which file size is smaller, save the screenshot as JPG (80% quality), run it through ImageOptim. This is very important!

Running a local copy of the site

If you want to run a local copy of the site, you'll need Jekyll. You can start the site by running jekyll serve --watch --baseurl= from terminal, and going to http://localhost:3333/ in your web browser. Preview on mobile and tablet is possible too: just figure out your local IP address through ifconfig in Terminal, enter it in your mobile or tablet browser, add :3333/ and off you go.

rollercoaster's People

Contributors

andreasbovens avatar richtr avatar

Watchers

James Cloos avatar  avatar

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.