Earthdata User Interface Library & Design Guide

EUI 2.0 Bootstrap 5 Preview

The new version of the Earthdata User Interface library will be a Bootstrap 5 theme. Bootstrap 5 is still in beta, and EUI 2.0 is currenttly being released as a preview for testing and feedback. The following sites are currently using the preview CSS in production:

Download EUI 2.0 Preview 1

A Design Framework for EOSDIS

The EUI is a collection of responsive design components, layouts, and best practice guides geared toward creating websites and applications within the EOSDIS ecosystem. Each component and layout has been designed specifically for Earth science-related projects, which eliminates some of the complexities of building a website or application from the ground up. Its adoption will ensure consistent markup, a unified look and feel, and a consistent user experience for end users, thereby increasing usability and accessibility.

View EUI Docs

Getting Started

HTML5

Before you get started with the EUI, you’ll want to be sure you’re using a valid HTML5 template. You can start with the code below or—if you need a more complex solution—start with an open source template like HTML5 Boilerplate.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Your content here. -->
</body>
</html>

Reference Assets

Using the Earthdata User Interface library (EUI) is simple. The only setup required is to reference the lone dependency and the actual EUI assets themselves. First, you’ll want to reference EUI’s stylesheet in your header.

<!-- Most recent compiled and tested CSS -->
<link href="https://cdn.earthdata.nasa.gov/eui/1.1.8/stylesheets/application.css" rel="stylesheet" />

[CALLOUT If you would like to reference the latest build of the EUI, you can replace the version number with ‘latest’. Please be aware that if you reference /latest in your application, you could inherit major changes without doing anything to your site markup. This may break your app. /latest is intended for development and experimental use only.

Next, you’ll need to include both JQuery and EUI’s JavaScript asset in your website’s header. It should be noted that this is optional as not all components and styles need this, but some components do require JQuery and eui.js to function properly. We recommend at least JQuery 2.1.3. You can use any source for JQuery you’d like. Google offers JQuery through their CDN.

<!-- Reference JQuery before eui.js-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<!-- Latest compiled JavaScript-->
<script src="https://cdn.earthdata.nasa.gov/eui/1.1.8/js/eui.js"></script>

Once you’ve done that, you’re all set! You are now ready to start adding EUI components to your site or application.

Add EUI Components

Below is an example of an EUI component that adds a banner message for your website.

<span class="eui-badge">EOSDIS</span>

Adding that markup to your site will add a “badge” to your content. The EUI also offers modifiers for several components that allow you to tweak your component while maintaining a consistent look and feel with the rest of the EUI.

<span class="eui-badge--sm">NSIDC</span>

Component modification options are available in the component documentation. For the complete list of EUI components, please the components page.

Your Markup Matters

It is highly preferable that your website follows recognized industry standards for semantic markup. It is entirely possible to create an entire website with nothing but a bunch of nested <div> elements. However, that is not desirable at all because your HTML is not telling the story of your content. As a rule of thumb, a front-end developer should be able to look at your generated markup and tell you the theme of your content looking at nothing more than the markup. To do this, using semantic elements that carry and communicate meaning is strongly recommended.

As a quick example, using the <nav> element to add your site navigation, <main> for your primary content, and <aside> for your sidebar would be ideal as it would be immediately clear that the page has navigation, a place for primary content, and also offers some sort of secondary content. The same page can be generated using only the <div> element, but leads to maintenance issues, accessibility concerns, and is generally a poor development practice.

  <!-- The following code carries semantic meaning and is fully HTML5 compliant. -->
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <header>
    <nav>
      <!-- Navigation menu content -->
    </nav>
  </header>
  <body>
    <main>
      <section>
        <!-- Main section content -->
      </section>
      <section>
        <!-- More section content -->
      </section>
    </main>
    <footer><!-- Footer content --></footer>
  </body>
  </html>
<!-- The following code would technically render the exact same page as the previous example, 
but there's no meaning communicated with each element. Screen readers would have a harder time
making sense of your content and maintainability would be compromised. DO NOT DO THIS.--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <div class="header"> <div class="navigation"> <!-- Navigation menu content --> </div> </div> <body> <div class="content"> <div class="content-section"> <!-- Main section content --> </div> <div> <!-- More section content --> </div> </div> <div class="footer"><!-- Footer content --></div> </body> </html>

A Lightweight Framework

The EUI is intended to provide easy configuration of common HTML elements and styled components commonly found throughout websites and applications within NASA’s EOSDIS network. It is opinionated, meaning it is not the goal of the EUI to provide every possible layout, component, color, or modification needed to make your website or application.

When confronted with a gap in EUI coverage, you may need to markup and code your own solution. We encourage you to follow industry standards and good, sound design practices. We have included some best practice documentation informed by various user interaction studies here. There are countless resources available online to aid you in this pursuit as well (Nielsen Norman Group is a great starting point). Consistency is the main goal of the EUI. Your website (and users) will be better served by embracing this idea along with the larger EUI user base as it will provide a more pleasurable and familiar experience throughout the entire EOSDIS user interface system.