Introduction
Flat web design is something you either love or hate. It's bright, it's bold and it's very-much about making a statement. For all the lovers out there, our Material theme for RapidWeaver offers a wonderful starting point for exploring the basic concepts of flat web design. Flat web design is a concept that's prevailed heavily amongst ambitious tech startups and bigger open source movements in recent years. Our material theme would be a perfect fit for a simple website, online store, showcase, gallery portfolio or even a webapp you might be building with RapidWeaver. The whole theme has a 'Google-istic' feel about it; fresh, young and energetic.
Please note that Material is compatible with RapidWeaver 8 and above only. This theme will not install or work with older versions of RapidWeaver, due to certain API dependencies.
20 preset styles included
We include 20 preset styles, bundled with the Material theme. These allow you to quickly apply new colour schemes. These 20 presets were all inspired by the official
Material.io documentation and were expertly designed by leading creators. Teal is the default colour scheme used by the Material theme, and our online demo site shows you the rest.
Navigation
Material is designed for smaller websites and web apps. With this in mind, Material only displays a single level of page navigation links. For both mobile and desktop, these links are presented within a slide-out menu panel, triggered by clicking the 'hamburger' button, at the bottom right of the screen. The page navigation links drift into view using a distinctive 'wave' animation effect. Of course you can continue to add subpages to your project, but these will not get listed in the menu (you would instead have to link to them manually).
Typography
Material uses the popular 'Roboto' embedded font face for all aspects of typography. The use of extra large font sizes give your written content additional impact and certainly work well to improve readability. Font sizes for most elements can be easily adjusted in the theme style settings.
ExtraContent
Material has 10 ExtraContent containers you can use for the placement of additional content, outside the normal editable boundaries. ExtraContent 1 and ExtraContent 2 are both located within the menu container, and are ideal for some social media buttons. Other ExtraContent containers are located throughout the webpage.
Responsiveness
It's vital that any modern website can be viewed on smartphones, tablets and desktop screen sizes without breakage. Material uses a lot of clever coding to help overcome these problems. For example, many dimensions of the theme (like spacing and font sizes) are set using the 'viewport width' units of measurement. The end result is a theme that flexes to fit almost any screen shape or size.
Works great with Stacks
Stacks is almost an essential purchase. It helps you build more complex websites with design or functionality you'd struggle to accomplish via other build methods. Material is great to use for a photography portfolio; combining clickable thumbnail images with a lightbox. Or you could use Material to present embedded video files, towards creating the ultimate film reel showcase.
Print perfection
Material includes dedicated CSS code to assist with making webpages print or save as PDF better. Webpages return back to a conventional 'black on white' colour scheme, with smaller fonts and hyperlinks clearly marked. Surplus elements like the navigation links are hidden from view.
Creative backgrounds
Within the Material
Miscellaneous style settings, you'll find a checkbox option to apply a colour-changing background effect. This is supported in newer web browsers and results in the page background cycling seamlessly through different hues of background colours. Another noteworthy feature of Material is that any banner image you supply in the RapidWeaver Page Inspector will get rendered as a webpage background. Meaning that even if you don't want to use Material to build a completely flat website, you still have the potential to create distinctive webpage designs featuring an image background.