UI and UX Details

There are five themes available in the 1.2.0 release. Each one is a complete site that can be used right out of the box. However, it is likely you will want to make changes.

• General tips
• CSS Structure
• Change the CSS
• Removing Responsiveness

General tips

• If asked, choose the most recent version of Angularjs.

• Add the following to your LESS to make sure your angular links generate the change of the cursor when hovered over: 'a { cursor: pointer; }'

CSS Structure

The overall structure of the CSS has changed. The theme selectors are in the theme.less and the main.less calls the necessary imports. If you are using the default design, you can comment out the different skins and colors. At the bottom of the main.less, you will see the import for your design. You should start adding your customized selectors after this import.

Change the CSS

You have several options for customizing your new project.

Use one of the default themes that comes with version 1.2.0.

In this release, there are now four templates to choose from the setup prompts. If you know what kind of site you would like, you can skip right to that choice in the menu list. If you do not know, the generator will ask a couple of questions and pick a template for you.

Default design

• Default Sample

This is the same design as the first release. It does have a couple color variants to choose from: Admin, Blue and MLU. Choose one and uncomment it from ui/styles/main.less. Gulp will pick up your change to ui/styles/main.less and the design will change immediately in the browser after you save. Only uncomment one of the designs. Do not try to use both designs simultaneously.

3-Columns

• 3-Columns Sample

This design is for a document heavy or semantic based site.

Customizing tips

• The main focus content area is the center. Facets should go to the left panel and the right panel is supplementary to the content well. Common uses for the right panel would be suggested terms, similar content or a small map.
• Google or Esri maps can be added to the right column for support. You must have data and end points to support it and you can display pins based on that.
• The user profile area will need customization. The profile is still in a two column structure so please review it to make sure it fits your needs.

Dashboard

• Dashboard Sample

Dashboard is based on AdminLTE, a free Bootstrap template. There are many more features that have not been wired up but are available to use on this template and that documentation is available here. If you like something in the AdminLTE, it should be pretty easy to add in.

Customizing tips

• There are multiple color themes to use choose from. All you need to do is to change the class on the body tag on the ui/index.html page. Look at the table of colors to get the class names.
• Unique to this template, we created a navigation directive to drive the left navigation. The top is global and the left is per area. The navigation directive has a service; look at routes.js for NavLabel to see how it is set up. For example, you might want to have sub pages that only appear when you are on the profile section, such as administrative tasks.

Map

• Map Sample

The map template needs coordinates in the content.

Customizing tips

• This uses Google map out of the box but it could be changed out for an Esri map if necessary. You would need to review the directives and change those accordingly.

Cards

(will be available in release 1.3.0)

• Card Sample

Customizing tips

• One idea is to use the footer of the card on the search result to display an image related to your content. Some ideas are photos or iconography.
• Each card could be label with a class so the card colors could change per card. This would make it easy for a user to easily scan the results.

Strike off on your own.

If you want a completely different design, we suggest you pick one of the designs closest to what you want and then start customizing in the main.less file.

Removing Responsiveness

Option one:

Add the following variable to the top of the main.less file. This will change where the site sets the break points so the site will collapse at a smaller dimension.

@container-large-desktop: (1070px + @grid-gutter-width);

Option two:

These instructions are customized from the Bootstrap site specifically for our slush generated site.

1. Remove the <meta> from the index.html.

2. Add a width constraint to the main.less.

    .content .container { width: 450px; }

3. Remove all the collapsing behavior from the navbar. This is in /root/root.html file.

4. Change all the .col-md-* to .col-xs-* sitewide.