The branding bar for Sunlight's tools and projects sits at the top of each site. This injects the branding bar and includes default styles.
Using Bower
You can include 'branding-bar': 'sunlightlabs/branding-bar' in your project's bower.json dependencies,
or just bower install sunlightlabs/branding-bar
From CDN
-
Include minified CSS and javascript for the branding bar from the Sunlight CDN. The current version is
0.3.CSS should be dropped inside your head tag:
<link rel="stylesheet" href="https://sunlight-cdn.s3.amazonaws.com/brandingbar/:version/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/:version/js/brandingbar.min.js.gz"></script>
-
Include the icon font SF Icons. The current version is
0.2.<link rel="stylesheet" href="https://sunlight-cdn.s3.amazonaws.com/sf-icons/:version/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="https://sunlight-cdn.s3.amazonaws.com/sf-icons/:version/js/sf-icons.js"></script> <![endif]-->
-
Add the class
bb_wrapperto your html tag:<html class="bb_wrapper">
-
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>
If a light version of the Sunlight Foundation logo is needed, add this class:
sflogo-light. -
Add additional branding styles and fonts as needed.
#####Typography Include Franklin Gothic. If the site has a Typekit kit, add Franklin Gothic URW, 400 and 500 if those are not already included. The fallback font for the branding bar is Helvetica, then Arial.
#####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
- Clone this repo.
- Run
npm install - Run
gulp watchto start the server and watch for changes. - Edit files in the
srcdirectory to your liking. - If there is any possibility that the changes you made could break existing implementations, you must increment the version in package.json.
- If the version changed, run
gulpto rebuild the JS, which includes CSS based on the version number. (This step is only necessary if you have uncompiled changes--any changes made underwatchhave already been built.) - Check-in/push your files.
- Tag a release (if the version changed) by running
gulp tag. - Push your tag:
git push origin --tags - Publish to S3 by running
gulp publish. You will need valid S3 credentials in your aws.json file to do this.