Skip to main content

Skip to main content

JMRI Web page styles and templates

As you see here, we ignore a no-sidebar (formerly nomenu) #mBody page.
TODO: add some small Sidebar on all pages so the Hamburger menu always has work to do.
And note that if you do not wrap text in a <p> (like the next paragraphs) it will flow up to the sides. A quick test!

To demonstrate some of the current html and css options built into the jmri.org site, this page describes the most important ones.

You can also study the comments in the html code of the main page templates:

When you include a link to /Sidebar.shtml you will see the one currently shown (see Responsive HTML note).

Color scheme

In the jmri.org cascading stylesheet (CSS) we manage tho color scheme and all other styling used on our website and help pages.

Three main colors:

  • var(--primary-color1) = #554FA0; /* Purple */
  • var(--primary-color2) = #FFD700; /* Orange */ = attention
  • var(--primary-color3) = #778899; /* LightSlateGray */ = navigation, boxes
Button hover color is LightGray. This is applied in the menu buttons along the top.

Two supporting background colors, light enough to read black/purple text:

  • var(--background-color1) = #B695C0; /* LightPurple */
  • var(--background-color2) = #F5F5DC; /* Sand Beige */

Fine lines, fade shadows for floating/box, graphic weight in headers/color only.

To guarantee accessibility: sufficient contrast, information (read, or text-to-speech...)

For maintainability: please focus your contributions on contents, and follow along with the available style guide.
Avoid adding your own custom formatting, empty <p> tags to add space around other elements or make an effort to align stuff on a page by embeddding it inside html tables etc.

Screen parts

main

Sidebar

Header

Footer

Includes

Note the h4 header before this line uses a color as a var. Please report your browser and version if the above title is not displayed on a light purple colored band.

Style:

Scripts:

Standard Components

Flex is a set for responsive positioning on different screen sizes. We provide 4 of them:

JMRI site viewed on iphone

Responsive HTML

To present the optimum viewing experience on different screen sizes, since fall 2020 jmri.org supports so called 'responsive' page layout and matching css style sheets.

An obvious example of this is the collapsed Sidebar when you view this page on a mobile device (portrait mode). Instead of filling part of the screen, you will find a hamburger menu on the top left. Click it to see the Sidebar slide in from the left.

Subjects to be added:

  • #side (width 250px)
  • #main
  • images: flex/100% width/420px view, caption + alt
  • 3 columns > flex
  • h1,h2
  • p
  • p important (warnings)
  • Display List dl
  • button
  • bar-1
  • flex-30/-70
  • Javascripts included in Header file or in the js directory?
  • Breakpoints (max width to fit): 420/800/1040/1500px
  • Header collapsing menu/420px
  • Searchform width/floating/breakpoint 420px
  • i18n
  • Tables:
    No special class tags required for simple, small tables:
    Wrap wide tables (or anything containing eg hyperlinks longer than 80 characters) in a <div class="wide"> so the block will scroll:
    Connection In/Out Entry Meaning makes System Name Mask Equivalent Minimum Maximum
    C/MRI i/o 1003 Node 1, Input 3 CS1003 n digits (node) + 3 digit (pin) 1:3 node: 1; pin: 1 node: 127; pin: 999
    C/MRI o 3 Node 0, Output 3 CT3 1 999
  • code:
    Use the tag <code> to show short pieces of code (will fit in a scrolling box)
    Use the tag <code class="block"> to show multi-line code (it will display every whitespace in those lines, so start at the left margin): 
    
// Get the navbar
var navbar = document.getElementById("mainNav");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
function stickyFunction() {
  if (window.pageYOffset >= sticky) {
    mainNav.classList.add("sticky")
  } else {
    mainNav.classList.remove("sticky");
  }
}

Accordions

flex-item-50, style: card-1

flex-item-50, style: card-1