Introducing Reapit Elements

Dawson Scott

Dawson Scott

Chief Technology and Product Officer at Reapit

Share on social media:

Intro

Reapit Elements is an open-source, cross-platform design system that gives designers and developers a framework to quickly create responsive, device-agnostic and user friendly apps for the Reapit AppMarket.

The system consists of working code, design tools and resources, human interface guidelines and a publishing process for community contributors.

An integral part of our design system is its design language, which is intended to help understand how to use the components and styles together to create a consistent user interface across our platform and products, as well as to streamline collaboration between designers and developers, and transform design patterns into code— with well-defined and reusable components.

Elements of our design system include:

  1. Layouts and Grids: A responsive, mobile first framework for laying out pages at any browser resolution, with multi-level navigation to transition between views
  2. Visual Language: Designed to present data, application features and calls-to-action in a way that is engaging, attractive, and clear to the user
  3. UI Elements: Based on Atomic design principles, each element has been designed to work as a building block, composable in a modern component-based architecture
  4. Breakpoint System: Each breakpoint range determines the number of columns, and recommended margins and gutters for each display size.

It’s easy to get started using our interactive UI component explorer, allowing for reuse and visual testing of our design system and its individual atomic components without needing to fuss with data, APIs, or business logic.

When you’re ready to start prototyping, our Create-React-App template can get you up and running in seconds with a scaffolded app that includes the Reapit Elements modules with examples of suggested layouts for lists, tables and forms; pre-authenticated against our Platform API using Reapit Connect and Connect Session.

For developers not working with React, Elements can be imported as a stylesheet and semantic classes added to any markup language, achieving the same results in any stack. The component explorer gives rendered HTML markup examples for each module to make this possible.

Everything in our design system — from colour and type to interaction and language — is built to be compliant with industry standards, effortlessly scaling across platforms for the widest audience possible: which is why hundreds of developers, prop-techs, and customers worldwide are using our design system and its reusable components and patterns to build AppMarket and enterprise apps quickly and at scale, help product teams work more efficiently, and make Reapit’s applications more cohesive. We can’t wait to see what you build!

Sign up for our

popular newsletter,

and never miss out on:

By submitting this form, you agree to Reapit processing your data in accordance with our Privacy Policy.



Sign up for our popular newsletter

Sign up for our

popular newsletter,

and never miss out on:

By submitting this form, you agree to Reapit processing your data in accordance with our Privacy Policy.