Documentation

For Rails Developers:


Railsview_xkimo1


For Sellers:

Why you don't need to know Rails to design a Railsview Theme

We want both amateurs and professionals designer to be able to gain benefit from our marketplace. We want to help you start designign something that is easy to maintain, and yet holds a professional image. This is why we don't want you to worry about knowing Rails. We've created a very straight forward system for people to design themes for rails developers. It all come to a specific file structure and using a generic tag. We've also built script that make it easy for designers and developers to install themes or test them. For those of us less used to dealing with rails codes however, Railsview giv eyou enough tools and flexibility to built a rails themes easily.

How to Start in 3 Steps

  • Sign In
  • Download "Theme_Template" and Unzip it
  • Start Designing

Yes, Its very simple!

1) Making your first page

All your pages need to have the extension ".html.erb". Your pages must be in the "views/pages/" folder. ex: view > pages > index.html.erb

2) Add Images, Stylesheets and Javascripts

Once you've downloaded and unzipped Theme_Template; you're file structure should be ready. It is very important that you put your assets in the right folders and as mentioned in the 'Get Started' guideline; It's very straight forward!

  • Put all you images into the Assets/images/ directory
  • Put all your javascript into the Assets/javascripts/ directory
  • Put all your stylesheets into the Assets/stylesheets/ directory

Whenever you specify a path use: <%= assets_path('YOU_PATH_HERE') %>

The assets folder and this command allow us to do our magic. When a file is referenced from your views or one of the html.erb files; rails will searches the default tree and directory related to the asset and returns it. There is no need to specify the main parent folder of your assets (Jaascripts, Images or Stylesheet).

Let's try to add an image from the '/assets/images/background.png'

Image Tag in basic HTML:
<img src='/assets/images/background.png' />

Image Tag for Railsview:
<%= assets_path('background.png') %>

If 'background.png' is moved to a sub directory of 'images' as 'assets/images/img/background.png'. The tag become:

<%= assets_path('img/bakground.png') %>

Adding Stylesheets and Javascripts is just as simple. Add all your CSS in the "assets/stylesheets/" folder and all your *.js files in the "assets/javascripts/" folder. Whenever you point a file to your assets folder when you're writting your stylesheet or writting your script make sure to use the direct path to your assets. Rails is smart enough to guess in what folder that file is and will automatically check the assets folder for any assets. If you would like to add a background image you would do:

body { :background img('bg.png'); }

Instead of specifying the path 'assets/images/bg.png'.

3) Build Your Theme

The power is in your hand now to design and build something gorgeous that people will love.

4) Test Your Theme

a) Test your theme locally (prerequisite: Ruby + Rails 3 or above, pros: convenient for regular check, cons: you'll need to install rails or download the required files)

  1. Run 'gem install xkimo'
  2. In your app directory run 'rails generate railsview:install'
  3. Add your theme to the 'lib/railsview/themes/' directory
  4. Install your theme by running 'rails generate railsview:import Your_Theme'
  5. Start the server 'rails s'
  6. Open your broswer and go to 'http://localhost:3000' to view your theme

b) Test your theme on Railsview using the ThemeTester

  1. Go to 'Get started > ThemeTester'
  2. Upload your theme
  3. Go to the newly generated link to preview it

5) Submit Your Theme For review

Each submission is reviewed before becoming available on the marketplace. We want to make sure that Railsview product are quality product and terefore we want to encourage our partner to follow ous mission: Helping Rails Developer Building Beautiful Apps WorldWide. To submit your theme,

  • Login into your Railsview Account
  • Click on Get Started > Submit a Theme

6) Contribute

There is still room for improvement. We are actively looking for more feedback.