Openstreetmap-website/UI

Once you've got The Rails Port running, it's pretty simple to start hacking on UI improvement. Here are a few tips:

Templates

OSM's templates are in app/views, and you can try to guess their filenames from URLs - for instance, /user/joe maps to app/views/user/view. The templates are written in Erubis, which has a friendly beginners guide on its website. For smaller tweaks, you won't need to edit the logic of the templates, but it's handy to understand what they're doing.

LTR and RTL

OpenStreetMap is translated by volunteers, so people use it in all kinds of languages. Thus the design needs to be flexible to work with right-to-left languages like Arabic as well as left-to-right languages like English.

To test RTL, we usually set the active user to Arabic:

From your terminal run:

   rails console

   user = User.find_by_display_name("yourusername")
   user.languages = ['ar']
   user.save!

Test the site, make any fixes in the .rtl stylesheets, and then revert to English (or your language code of choice)

   user.languages = ['en']
   user.save!

If you're looking to actually translate the website, read up on Website Internationalization.

Small

OSM is also used on mobile devices and small screens, so also has styles that kick in when the window is narrow. This one's easy to test - resize your browser window until the layout changes, and debug that style in the small- stylesheets

SCSS

Stylesheets in the Rails port are all SCSS stylesheets - that means that they're written in SASS, a language extended from CSS. However, the site tends not to use this functionality and instead only uses special powers in sheets like large-rtl.css, that concatenate together other stylesheets. So, by default use traditional CSS syntax.

The prevailing CSS style is like so:

   #small-title {
     display: none;
   }

Which means: braces are on the same line as the selector, not dropped. And after properties there's one space, and then the property name.

All Done?

So you've made some awesome tweaks to OpenStreetMap - next up is contributing it back, so that millions can see it. The technique is the same as for any change to the rails port - make a pull request on the GitHub repository - see CONTRIBUTING.md in GitHub repository for full details. If you want to be extra-nice, add screenshots of your changes so that the maintainers and other contributors can quickly figure out what you've changed and why.