IntroductionDesigned and developed by Henk Vrieselaar, Ratio is unlike any other RapidWeaver theme you've seen before. Split into two columns, Ratio puts a banner and main content container on the left, and the site title, slogan and navigation on the right. On smaller devices (like mobile) everything is rearranged into a single column layout.
The ingenuity that has gone into this theme is extremely impressive. Not only do completed pages look stunning, but a large quantity of style and colour settings are available for you to adjust. Plus the banner image can be easily configured with your own images, dragged and dropped into the Page Inspector (RW7 and above only).
LayoutThe responsive Ratio theme is divided in a left and a right area. In the right area you’ll find a simple block navigation layout, for easier navigation through your website.
Fixed Or FloatingThe right side of the page is always fixed on your desktop when you scroll down. However you can change this behaviour in the theme style settings, and have both left and right sides of the page scroll down.
SidebarThere are different options for the sidebar, available for selection in the theme style options. The default behaviour is to hide the sidebar. You can show the sidebar above main content area (with or without Toggle Button), or move the sidebar onto the right side, in place of ExtraContent 1.
ExtraContentExtraContent allows you to add more content then RapidWeaver typically allows. If you have not used ExtraContent before, take a read of the chapter in the ThemeFlood Knowledgebase. There are 3 ExtraContent areas in this theme:
- ExtraContent 1 is located at the bottom of the right side. Nice for a short message, social icons, a stack or a search box. When the sidebar is moved onto the right side, the ExtraContent 1 area is hidden.
- ExtraContent 2 is above the main content area. By default it’s hidden, but shows up when you check the option to hide the banner, in the banner height settings.
- ExtraContent 3 is located between the main content and the footer. Again, this one is well placed to display a variety of different content.
FontsRation includes our pioneering RWFontKit plugin, which lets you instantly access and choose to use well-over 100 web safe and popular embedded font faces. These fonts can be applied to the body content, navigation and headings etc. No code or theme modification required - just select the desired font face and preferred font weight in the theme style settings. By default, Open Sans is used.
Scroll To Top ButtonA scroll-to-top button (any colour is possible) fades in at the bottom of your pages, when you scroll down. You can hide it in the theme style settings if you don't want it. These types of buttons have become a popular trend in recent years, in modern web design.
ResponsivenessThe traditional fixed width web design is obsolete doesn't work any more. Web design needs to be adaptive. The layout needs to automatically adjust to fit all display resolutions and devices. Building separate websites for different devices is not really an acceptable practice any more.
Using a theme like Ratio, you publish a single website that all newer devices and web browsers can access without problem. Ratio does all the hard work for you. No complicated configuration or coding is required. Take a look at the live demo site in your web browser and try resizing the screen. Or navigate to the test site on your smartphone or tablet.
LogoThe logo and site title have a link with the index.html page of your website. By default the logo is above the site title. There are different options for the logo, for example replace it with the site title. Optional you can put it in an ExtraContent area (EC1 for example).
Font AwesomeWith Font Awesome built into Ratio, you have access to several hundred icons at your disposal, in any colour and any size you like. And they are completely free for commercial use. Unlike images, Font Awesome icons work really well on retina display devices. No further configuration is required to use Font Awesome icons in Ratio; just ensure you have CSS consolidation enabled in the site settings.
MoreThe free trial version of Ratio can be downloaded using this link. There is no time limit imposed on the demo version, but page navigation links are disabled in the demo version. Watermarks may appear in parts of the page (like the banner or footer). Purchasing Ratio provides you with a licensed copy of Ratio; without any demo restrictions applied.
Clicking this link will take you to a sample website published using Ratio. This may give you a better insight into how this theme looks and behaves. If you're interested to see how the demo website was built, the same project file can be downloaded here and opened in RapidWeaver. Feel free to use this file as the basis for a new website.
If you have any other questions about Ratio, please don't hesitate to get touch.