ThemeFlood.

Introduction

This is a particularly bold RapidWeaver theme with emphasis on professional web font faces, a highly customisable FreeStyle header container and a completely fluid page layout. A simple animated fly-out navigation layout has been deployed, enabling end-users to quickly navigate websites built with Storm. Under the surface, you'll find lots of very useful theme style and colour settings available; giving you the ability to customise a great many aspects of the theme and build exceptional websites of professional quality.

Mobile first

Storm is a mobile-first RapidWeaver theme, meaning that we target smaller devices (like smartphones and tablets) with style and layout code first, before moving onto larger screen sizes. This ensures the fastest, the most flexible and the most efficient webpage rendering for all of your website users; of paramount importance now that handheld devices makeup a significant share of website traffic.

On smaller tablets and smartphones, the sidebar container is rendered under the main content container. The block navigation links are reformed at the top of the page, as a simple toggle open / close accordion unit. Aspects like the header and content containers resize to fit the screen. The free demo version of Storm provides an excellent insight into what this sophisticated theme is capable of, on a variety of screen sizes.

Header container

Storm comes supplied with 40 example banner background images (numbered 1.jpg - 40.jpg). As always, you can use any of these example banner background images in your projects or use your own images in the banner instead. To use your own images, place an image in ExtraContent2 or use the FreeStyle banner technique. Your banner images will be scaled responsively and can also be enhanced with title and ALT attributes for the benefit of search engines. Another trick you can perform is to enable the Banner Content Box in the theme settings; which displays ExtraContent3 as a semi-transparent box over the banner image; great for social networking icons or important messages.

Navigation

Storm uses the recently announced RAFT 2.0 (responsive adaptive framework for themes) plugin, for the website navigation. On mobile devices, the website navigation is presented in the form of a simple toggle / accordion style menu, to conserve screen space and allow users to easily tap and drill-down to lower levels of the website. On screens greater than 768px wide, an animated fly-out menu is used. The fly-out menu is able to support links than span multiple lines, Font Awesome icons and automatically displays a chevron icon against all links with subpages available. The navigation menu has been carefully crafted to facilitate ease of use on all screen sizes.

Many aspects of the navigation menu can be customised, using the provided theme style settings. The font size (for the fly-out menu style), fly-out menu width and all navigation colours can be customised. Miscellaneous style settings are also included to animate the indicator chevrons or hide them completely.

Sidebar

By default, the sidebar is 20% wide and floated to the left of the main content container; encompassing some logo placeholders, the website navigation, some ExtraContent containers and the sidebar content. These sidebar settings take effect on all screen sizes greater than 768px wide. On screen sizes less than 768px wide (like tablets and smartphones) the navigation unit remains at the top of the page, whereas the sidebar (which normally contains content of lesser-importance) is moved downwards to below the main page content container.

Tip: The website navigation always remains at the top left of the page, to permit the fly-out menu's to open correctly. If a right sidebar setting is used, care should be taken to ensure that the height of the main content container always exceeds the height of either the navigation or sidebar content contains, on either side.

RWFontKit built-in

Storm grants you access to over 100 web safe and embedded font faces. Latin extended character sets are supported for all the fonts listed. By default, Oswald is used for headings and navigation; with Open Sans Pro used the the general body content. Embedded fonts are served locally from within the theme, so Storm can function perfectly well offline without an internet connection and there are no privacy issues associated with reusing fonts from an online service.

Print output

A lot of RapidWeaver themes fail really badly when it comes to printing; frequently resulting in horrible messy printouts which are as good as useless. Storm includes special CSS code for printing. This code hides nonessential items like backgrounds and page navigation links. Complicated layouts like columns, sidebars and floats safely degrade to a single column. Easy-to-read font faces and colours are applied, together with extra features like displaying URL's after links (so people receiving a printout of your website can go back and visit the links later). It's these small details that can make a big difference.

Other details

Storm uses valid HTML5 markup; for the best possible performance on modern web browsers and excellent compatibility with a wide range of RapidWeaver addons. Work has been done in the theme to optimise page loading and reduce the overall bandwidth of pages. Internal theme components like stylesheets, Javascript and images have been optimised for the smallest possible file sizes. We call files like Javascript at the end of pages, so that your content loads first. This gives pages a fast and 'snappy' feel to them. jQuery Javascript code within the theme runs inside its own namespace and closure, to greatly reduce the risk of conflicts with other scripts added to pages.