Your data. Anywhere you go.

New Relic for iOS or Android


Download on the App Store    Android App on Google play


New Relic Insights App for iOS


Download on the App Store


Learn more

Close icon

Layout Nerdpacks

ui
best-practice-guide

#1

These nerdpacks serves as a boilerplate to developers building on the New Relic One platform. We want to make it as easy as possible to get started building a nerdpack so we created some boilerplate nerdpacks that come with a solid UI and layout out-of-the-box. In order to use one of these layout for your next project, following the “Getting started” instructions below and then replace the dummy content in nerdlet/index.js with your content.

Available Layouts (images are links to repos)

Each thumbnail below links to it’s respective repo.

Option%201 Option%202 Option%203 Option%204 Option%205 Option%206 Option%207 Option%208

What’s included?

  • JSX to implement this layout
  • CSS to improve the styling and provide some basic UX help
  • Utility classes for things like making an element full width or full height.

Usage

Since these nerdpacks are just a boilerplate for applications built on New Relic One, the best way to use them is to:

  1. Clone the repo you’re interested in whenever you’re ready to start a new project.
  2. Rename your Layout Nerdpack to something that makes more sense for your project. ( Nerdpack Layout - 3 column isn’t really a helpful description of your functionality :slight_smile:)
  3. The idea is that, since the code that determines the layout has already been written you can just replace the content inside of each section (toolbar, sidebar, primary-content) with the content that you have in mind for your project.

Next

After you’ve cloned one of the Layout nerdpacks, check out this quick How to on populating a layout with your data.


unlisted #2

listed #3