Consistency

One of the principles embodied by this style guide is that of consistency, with regards to naming conventions, usage patterns, and conventions used across the GeoPlatform.

Consistency builds trust with the user and allows users to quickly perform tasks without having to learn multiple ways of interacting with the same workflow or feature.

  • Maintain proper usage of typography to help users orient
  • Use margins and padding effectively to prevent clutter and enforce emphasis
  • Use colors appropriately to convey importance and emphasis
  • Be consistent in usage of iconography across applications and sites (don’t use different icons for the same thing)
  • Be consistent in usage of buttons
    • Don’t overuse primary buttons – limit to one per page
    • Use danger, info, warning, and success buttons in their appropriate situations
  • Use the appropriate component or paradigm for similar content or workflows
    • Use the GeoPlatform header
    • Use cards or tiles to display search results and other sets of things
    • Use navigation controls consistently
    • Use consistent pagination controls
Purpose

User interfaces should allow users to efficiently and effectively perform tasks. Always design and implement UI to help users accomplish these tasks as opposed to just displaying data.

Clarity

Display information and data clearly and concisely as much as possible.


Avoid using confusing labels or descriptions and overly-worded blocks of text
Bad

Use the controls below to quickly search through items stored in the database, by keywords and dates and authors.

Good

Use the following to search by keyword, date, and author.


Utilize whitespace and emphasis to call attention to areas.
Bad
Item
Item
Item
Good
Item
Item
Item

Utilize proper spacing between and within items to call attention to areas.
Bad
Item
Item
Item
Good
Item
Item
Item
Better
Item
Item
Item
Theme Tips & Guidelines

The following should be followed when extending the GeoPlatform Theme or when creating your own theme:


Always use classes to style standard HTML5 elements
Bad

<div>Title</div>
<p>description</p>
                            

div {
    color: blue;
}
p {
    font-style: italic;
}
Good

<div class="heading">
  Title
</div>
<p class="about">
  description
</p>
                            

div.heading {
    color: blue;
}
p.about {
    font-style: italic;
}
Better

<div class="my-app-heading">
  Title
</div>
<p class="my-app-about">
  description
</p>
                            

div.my-app-heading {
    color: blue;
}
p.my-app-about {
    font-style: italic;
}
Tip: It is recommended you namespace your CSS classes to prevent conflicts with 3rd party styles as well as to help maintain higher readability when looking at the HTML the classes are applied to. Block-Element-Modifier (BEM) and Atomic CSS are great resources that show differing ways of namespacing CSS more clearly.


Use namespacing when defining custom elements
Bad

<list>
  <list-item>
    item label
  </list-item>
  <list-item>
    item label
  </list-item>
  <list-item>
    item label
  </list-item>
</list>
Good

<my-app-simple-list>
  <my-app-list-item>
    item label
  </my-app-list-item>
  <my-app-list-item>
    item label
  </my-app-list-item>
  <my-app-list-item>
    item label
  </my-app-list-item>
</my-app-simple-list>
Tip: While it’s also possible to use a class to uniquely identify an element for styling, your CSS will need to override any legacy styles from other sources that also provide styles for the same elements.