Styling Your HPI Modules - tsgrp/HPI GitHub Wiki

Module-specific Stylus files are found in {HPI_ROOT}/assets/css/styles/{modulename}/{modulename}.styl

• If you are creating a new module, follow the above folder structure.
• If you are modifying an existing module, look for a .styl file first, and feel free to create one if one doesn't exist.
• Then import your new file in {HPI_ROOT}/assets/css/index.css. Make sure it is below the vendor and hpi.styl files.

In order to make sure your styles don’t interfere with HPI core or other module styles, add a class name to your Backbone views and reference that class name in your Stylus file. Setting the className property on your view automatically assigns the class to your outlet div.

1. First, add the className property to your Backbone.Layout:

   Dashboard.Views.Layout = Backbone.Layout.extend({
   	template: "dashboard/dashboard",
   	className : "dashboard"
   
   	//Other dashboard code here
   });

2. Backbone automatically adds the class to your outlet div. You don't need to do anything. Refresh the page to see the rendered HTML looks like this:

   <div id="content-outlet" class="full-width">
   	<!-- Outlet div with className applied automatically -->		
   	<div class="dashboard">
   		<!-- Dashboard content here -->
   	</div>
   </div>

3. Last, reference the className in your .styl file so you can begin properly scoping your styles to your module:

   .dashboard {
   	.popover { width: 450px; }
   
   	.inbox { margin: 0 40px 40px; }
   }

If you're not sure where to start when laying out and styling your module:

• First, familiarize yourself with all the elements Bootstrap 3 already provides. http://getbootstrap.com/
• Then look at existing modules in HPI to find good layouts similar to what you need and mimic them. This will also help maintain consistency across the app.
• Work with others with CSS experience for suggestions.