Stylus in HPI - tsgrp/HPI GitHub Wiki

Since HPI is a "one page" application, we currently import all Stylus files at all times. They are imported in {HPI_ROOT}/assets/css/index.css:

/* VENDOR STYLES */
@import "hpi-default/jquery-ui-1.10.3.custom.css";
@import "../vendor/bootstrap/css/bootstrap.css";
...

/* HPI STYLES */
/***** HPI Base Styles - do not put any custom styles above this *****/
@import "styles/hpi.styl";

/***** Modules *****/
@import "styles/search/search.styl";
@import "styles/hpiadmin.styl";
...

/***** Actions *****/
@import "styles/actions/actionsCore.styl";
@import "styles/actions/sendEmail.styl";
...

Basic variables and mixins for HPI are found in {HPI_ROOT}/assets/css/styles/core.styl. You shouldn’t edit this file without checking in with HPI team. These are variables you are able to override for your client project. See Styling HPI for Clients for more information.

$color-primary = #ff6e41;               // main color for headers, links, etc
$font-color-primary = #4b4b4b;          // main font color
...

General HPI styles you shouldn't override for your client are found in {HPI_ROOT}/assets/css/styles/hpi.styl. These are high level styles that apply to the entire application.