Style Guide

About

This guide is meant to serve as a standard baseline for styling UI elements within GeoPlatform interfaces. It is a living document and a work in progress; meaning it is not complete and will be updated as necessary to reflect current style needs and best practices. It is recommended that GeoPlatform interfaces implement the rules outlined within this guide, but it is acceptable to deviate within a reasonable tolerance as needed.

Navigating

Use the navigation menu on the left to navigate through the style guide. On smaller screens, the menu is accessible via the button directly beneath the GeoPlatform logo.

Source Code

The stylesheet used by this guide is available in both CSS and LESS (in codebase) formats. Some styles require JavaScript support which is provided by the platform style JS include.


Including In Your Site

Using the GeoPlatform Style in your own web page or web application requires either directly including the relevant files or bundling them as a dependency within a build process.


Directly in HTML

Download the CSS and JS files locally and link to them directly inside your web page.


Index.HTML
<head>
  ...
  
  <!-- include platform style CSS -->
  <link rel="stylesheet" href="platform.css">

  <!-- include platform style JS -->
  <script src="geoplatform.style.min.js"></script>

</head>
            

As a Dependency

Services and pages within GeoPlatform should incorporate the platform style to maintain consistency. The stylesheets are available within a private GitHub repository (users with access to GeoPlatform source have access to the style repo). Using tools like Bower to fetch the the style repository as a dependency or cloning the repo and copying the built CSS into your project will allow you to use the GeoPlatform style.