The branding bar for Sunlight's tools and projects sits at the top of each site, and includes social media icons, an "About Sunlight" panel, and the Sunlight Foundation logo.
-
Include minified CSS and javascript for the branding bar from the Sunlight CDN. The current version is
0.1.1CSS should be dropped inside your head tag:
<link rel="stylesheet" href="https://sunlight-cdn.s3.amazonaws.com/brandingbar/0.1.1/css/brandingbar.css">Javascript should be dropped in after your page content, usually at the bottom of the page:
<script src="https://sunlight-cdn.s3.amazonaws.com/brandingbar/0.1.1/js/brandingbar.min.js.gz"></script> -
Include the icon font SF Icons:
<link rel="stylesheet" href="http://sf-icons.s3.amazonaws.com/css/sf-icons.css">If IE8 support is needed, include the following javascript at the bottom of your page as well :
<!--[if IE 8]> <script src="http://sf-icons.s3.amazonaws.com/js/sf-icons.js"></script> <![endif]-->
First, add the class bb_wrapper to your html tag:
<html class="bb_wrapper">
Ideal for new sites that do not already have a branding bar. This injects the contents of the branding bar from a template and includes default styles.
-
Add this html where you want the branding bar injected (ie. as the first element in the body tag):
<div class="branding-bar" data-bb-brandingbar="true" data-bb-property-id="sunlightlabs-awesome"></div> -
Add additional branding styles as needed.
For sites that already have custom implementations of the branding bar. To avoid conflicts, you'll need to manually include the contents of the branding bar.
-
Add these two data attributes
data-bb-brandingbar="true"data-bb-property-id="sunlightlabs-awesome"to the root element of the existing branding bar.<div class="my-custom-branding-bar" data-bb-brandingbar="true" data-bb-property-id="sunlightlabs-awesome"> ... </div> -
Include or replace the contents of the branding bar as needed. Include social media icons, branding bar toggle, and Sunlight logo.
<div class="branding-bar_container"> <div class="branding-bar_links"> <!-- Social Media Icons --> <a class="social" href="https://www.facebook.com/sunlightfoundation"><span class="icon icon-facebook"></span></a> <a class="social" href="https://twitter.com/sunfoundation"><span class="icon icon-twitter"></span></a> <a class="social" href="https://plus.google.com/+sunlightfoundation"><span class="icon icon-google-plus"></span></a> <!-- Branding Bar Toggle --> <a class="branding-bar_trigger" data-bb-toggle=".bb_wrapper" href="http://sunlightfoundation.com/about/">About Sunlight Foundation</a> </div> <!-- Sunlight Logo --> <div class="branding-bar_logo"> <span class="branding-bar_productof">a product of </span> <a class="branding-bar_sunlight-logo" href="http://www.sunlightfoundation.com">Sunlight Foundation</a> </div> </div> -
To style the contents of the branding bar (based on above html), use css from the default branding bar stylesheet. You may need to override global styles set by the site's stylesheets.
##Tips
#####Fonts: Helvetica and Franklin Gothic The fallback font for the branding bar is Helvetica and then Arial, but the preferred font is Franklin Gothic. If the site has a Typekit kit, Franklin Gothic URW, 400 can be added as necessary.
#####CSS: To vertically center branding bar content
Set line-height of .branding-bar_links and .branding-bar_logo equal to the height of the branding bar