Free Download A small donation of $10 USD or more is required if you want to switch-off or hide the designer credits in Material.

Theme details

Theme name: Material
Theme designer: Will Woodgate
Current version: 1.1
Last updated: 8th July 2020
First released: 29th November 2019
Compatibility: RapidWeaver 8 Only
GDPR / DSGVO / CCPA compliant: Yes
Responsive: Yes
Doctype: Valid HTML5
Font Awesome version: 5.10.0
Bootstrap version: 4.3.1
Usage agreement: Click for details
Example website: View online
Download example website: Click here

Support links

Knowledge Base
1-to-1 Technical Support
RapidWeaver Community Forums

Free resources

Bootstrap code snippets
ExtraContent stacks & snippets
Complimentary Stacks
More Stacks

Share this page

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.

A small reminder...

Material is generously provided to you as a free RapidWeaver theme. You are welcome to download Material and use it for any personal or commercial projects. All that is politely asked is that any credits remain intact. If you want the credits removed or want to show your appreciation for this theme, a small monetary contribution of $10 USD or more is appreciated.