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.
Utilize proper spacing between and within items to call attention to areas.
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.