Twitter Bootstrap Configuration

The usage of twitter bootstrap in our project utilizes the Twitter Bootstrap Rails project, which can be found on gitHub. We also use the information specified on the Twitter Bootstrap site. The Twitter Bootstrap Rails project has good documentation about generating themed views. Tweaks to theme and styles are based on the variables and styles documented on the Twitter Bootstrap site.

Glyphicons

The glyphicon files are stored in the /public/assets directory as static assets that are not pre-compiled as part of the asset pipeline. They are available as static assets for direct serving by the Passenger system on Openshift or by content delivery networks.

Customized Styles

Most of the customized styles are specified using the bootstrap_and_overrides.css.less stored in the app/assets/stylesheets directory. The overrides correspond to styles and variables identified in the Twitter Bootstrap site.

@import "twitter/bootstrap/bootstrap"; @import "twitter/bootstrap/responsive";

// ---------------------------------------------------------------------
// Rails 4.0 and Openshift notes: 
//
// At the time of this project, the Rails 4.0 release changed the
// way assets are pre-compiled. The helper methods below image-url and
// asset-url do not seem to append the MD5 hash to the file names.
//
// As a work around, we moved the files for font awesome to the 
// public/assets directory as static assets. If we wanted to use the 
// glyphicons, we would also move the glyphyicons to the public/assets/
// twitter/bootstrp directory. These fils or static assets would NOT
// have an MD5 hash appended to thier names.
// ---------------------------------------------------------------------

// Set the correct sprite paths - based on twitter-bootstrap-rails 2.2.8
// This path was not working in production running on Openshift.
@iconSpritePath: image-url("twitter/bootstrap/glyphicons-halflings.png");
@iconWhiteSpritePath: image-url("twitter/bootstrap/glyphicons-halflings-white.png");

// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
@fontAwesomeEotPath: asset-url("fontawesome-webfont.eot");
@fontAwesomeEotPath_iefix: asset-url("fontawesome-webfont.eot?#iefix");
@fontAwesomeWoffPath: asset-url("fontawesome-webfont.woff");
@fontAwesomeTtfPath: asset-url("fontawesome-webfont.ttf");
@fontAwesomeSvgPath: asset-url("fontawesome-webfont.svg#fontawesomeregular");

// Font Awesome - comment this line below if using Glyphicons
@import "fontawesome/font-awesome";

// Glyphicons - comment the line below if using Font Awesome
// @import "twitter/bootstrap/sprites.less";

// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
//
// Example:
// @linkColor: #ff0000;

// Navigation Tweaks ---------------------------------------------------

@navbarHeight: 74px;
@navbarBackground: #ffffff;
@navbarBackgroundHighlight: #ffffff;
// @navbarText
@navbarBrandColor: #444444;
@navbarLinkColor:  #FF3500;
@navbarLinkColorHover: #ffffff;
@navbarLinkColorActive: #ffffff;
@navbarLinkBackgroundHover: #BBBBBB;
@navbarLinkBackgroundActive: #FF3500;
// @navbarSearchBackground
// @navbarSearchBackgroundFocus
// @navbarSearchBorder
// @navbarSearchPlaceholderColor
// @navbarCollapseWidth
// @navbarCollapseDesktopWidth

//Logo
.logo {
    padding: 7px 10px 1px 0px;
}

// Carousel overrides 
.carousel .item > img {
    display: block;
  line-height: 1;
    width: 100%;
}

// Footer Tweaks -------------------------------------------------------
@footerBackground: #aaaaaa;

footer {
    background-color: @footerBackground;
}

footer .widget {
    padding: 10px 10px 10px 10px;
}


// General Tweaks ------------------------------------------------------
@linkColor: @navbarLinkColor;

@btnPrimaryBackground: @blue;

@baseFontSize: 14px;


// Setup hover color for nav-list menu items
.nav-list > li > a:hover {
  background-color: @navbarLinkBackgroundHover;
  color: @navbarLinkColorHover;
}

// Align icons with text using baseline alignment
[class^="icon-"], [class*=" icon-"] {
  vertical-align: baseline;
}