RapidWeaver Element Design System

Before getting started with RapidWeaver Elements, it’s helpful to familiarise yourself with some of the core-concepts of the Elements design system.

Responsive Design

RapidWeaver Elements is built upon the popular Tailwind css framework, but don’t worry, you don’t need to know how to code, our drag and drop builder takes away all that complexity which makes it a piece of cake to build modern responsive websites.

Mobile-first Design

By default, RapidWeaver Elements uses a mobile-first design system. We recommend designing at the mobile breakpoint first, and working your way up through the breakpoints to support larger screens.


RapidWeaver Elements supports up to 6 customisable breakpoints. Each breakpoint can customised under the “Screens” section in the Theme Studio. You can choose to use as few or as many of these breakpoints as your project requires.

Grid System

By default RapidWeaver Elements uses a 12 column grid system, this is used to organise and align elements within your design. Using a grid system allows for a consistent layout and alignment of elements such as text, images, and buttons.


The Flex Element in RapidWeaver Elements makes it easy to layout content within the grid system. Flexbox offers powerful and flexible ways of aligning and distributing content within your page design.

Theme System

RapidWeaver Element themes are based on the Tailwind theme system. All RapidWeaver Element themes support a default selection of the following settings. Each setting can be overridden, added to, and edited.

  • Colours
  • Screens (aka Breakpoints)
  • Font Families
  • Font Style
  • Spacing
  • Shadows
  • Border Width
  • Border Radius