Our Style Guide
The following document is a style guide to assist in the production, implementation and continuing development of the Best Buy Retail Tools and Applications with topics such as the overall file structure, naming conventions, design, coding guidelines, styles and resources. To ensure design continuity and maintain the life span of all Best Buy tools and apps, it is important that everybody involved in the development, maintenance and updating of any, Best Buy tools understand and adhere to these guidelines.
1.0 ETK Banner Design
The following contains guidelines and tips for ETK Banner such as how to create your design, images, descriptions and how to format your code. You will also find how to get your XHTML and CSS files ready for production. All banners must be in good taste and follow the guidelines below before the are submitted to be reviewed. Banners have been a huge request so please allow adequate time for a response on your banner.
1.1 How to create a banner
To make a banner you will need to create 5 image files in-side of your folder. To better explain this I will use the Future Shop banner as an example. Below you will see 4 of the images I needed to create to make this template banner.
Original Photoshop files.
Here it is a screenshot of the banner with the images respectively.
1.2 Create Folders
If you are using the SDK to develop your banner
First, browse to "[sdk_install_path]\WebSite\resources\images" and create a folder inside of that folder as the name of the theme that you are creating. After that is created place all of the images for the banner inside of that folder.
Next you will have to create the css folder for the template in the "\website\resources\css". Inside that folder you will need to create a file named ‘common.css’ and once that is completed you are ready to skip to 2.2 CSS Styles.
If you are not using the SDK to develop your banner
First you will need to create a folder for your project, name it banner. Inside the banner folder you will need to create a file named ‘index.html’, a folder named ‘images’ and a folder named ‘css’. Inside the images folder create another folder name of the theme that you are creating and place all of the images for the banner inside of it. Then inside of the css folder create another folder name of the theme that you are creating and create a file named ‘common.css’ inside of it. Once you have done this you will be ready to move to the next section 2.0 HTML/CSS Markup.
2.0 HTML/CSS Markup
The next step to submit and get your banner approved is to markup HTML/CSS properly. Essentially the ETK Banner (header) is marked up in a way to allow flexibility and creativity. Here it is an example of the HTML and CSS files for a banner.
2.1 HTML Markup
Use in your 'index.html' if you are not using the SDK.
<div="north">
<div="north_inner">
<div="brand_logo">
<ul>
<li id="logout"><a href="#">Log out</a></li>
<li id="feedback"><a href="#">Feedback</a></li>
<li id="help"><a href="#">Help</a></li>
</ul>
</div>
<div="etk_logo">
<h1 id="logo">Employee Toolkit<h1>
<div id="status">
<ul>
<li id="status_item_one">
<h1>Welcome, <a href="#">Insert Name</a></h1>
</li>
<li id="status_item_two">
Insert Job Title
</li>
<li id="status_item_three">
Location: 12345
</li>
<li id="status_item_four">
Friday, July 14, 2009
</li>
</ul>
</div>
</div>
</div>
</div>This XHTML document is marked up to provide the designer with the maximum possible flexibility. We added more elements tags than needed, and in a real world situation, it's more likely that it would be much leaner. However, our main browser is still Internet Explorer 6 which unfortunately doesn't give us, designers, the opportunity to work with PNG images.
2.2 CSS Styles
/*
If using the SDK do not copy the code below this comment - This code is only to make the banner appear
correctly in your browser outside of ETK and will be deleted when it is integrated into the project.
So, any edits below this line will not be coppied. Another note to consider is that if you set styles above this line
there may be code below that overrides the style. Feel free to remove any code below that is conflicting for adding
your images, colors, or style.
*/
/* Reset technique, use it if you need to --------------------------*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td
{margin: 0; padding: 0;}
h1,h2,h3,h4,h5,h6 {font-size: 100%;}
ol,ul {list-style: none;}
table {border-collapse: collapse; border-spacing: 0; }
fieldset,img {border: 0;}
hr {visibility: hidden; line-height: 1.2em}
body {font: 62.5% Verdana, Helvetica, sans-serif;}
#north, #north_inner {height: 80px; width: 100%; font-size: 1em;}
#brand_logo {width: 260px; float: right; height: 78px; position: relative;}
#brand_logo ul {width: 100%;}
#brand_logo ul li {float: right; margin: 0 15px 0 0; padding: 55px 0 0 0;}
#brand_logo a {padding-left: 18px;}
#etk_logo {position: relative; width: 300px; float: left;}
#etk_logo #status {float: left; margin: 0 0 0 98px; padding: 0px;}
#status ul {font-weight: normal;}
#status ul li {line-height: 16px;}
#status ul li a {text-decoration: none;}
#status ul li a:hover {text-decoration: underline;}
#status ul li h1 {font-weight: bold;}
/* Clear Floats --------------------------*/
.group:after, #brand_logo ul:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .group, * html #brand_logo ul {height: 1%;} /* IE6 */
/* End hide from IE-mac */
*:first-child+html .group { /* IE7 */ min-height: 1px; }
/* Sets the repeating background space to your image you created */
#north {background: url(images/backgroud_img.jpg) repeat-x 50%;}
/* Sets the center image space to your image you created. */
#north_inner {background: url(images/overlaping_backgroud_img.jpg) repeat-x 50%;}
/* Sets the brand logo space to your image you created. The brand logo may need to be shifted slightly.
Do this by specifying the horizontal and then vertical shift. You will see that in our example as 75px 15px.
That is 75 pixels from the left and 15 pixels from the top. */
#brand_logo {background: url(images/bannerName/brand_logo.gif) no-repeat 75px 15px;}
/* Sets the etk logo space to your image you created. */
#north #etk_logo h1#logo {height: 80px; left: 0; margin: 0; overflow: hidden; position: absolute; text-indent:-999em; top: 0; width: 90px; background: url(images/bannerName/etk_logo.gif) no-repeat 0px 0px;}
/* Hides the text title for ETK */
#north #etk_logo h1#logo {Display: none;}
/* Sets the text color for the employee info on the left */
#north #status ul {Color: #ffd165;}
/* Adds a drop shadow to the employee info on the left */
#north #status ul li{text-shadow: #333333 0px 1px 0px;}
/* Sets the text color for links inside the employee info on the left, such as the employee’s name who links to profiles */
#north #status ul li a {color: #ffd165;}
/* Sets the text color of the feedback/help/logout links on the right */
#north #brand_logo a {Color: #ffd165;}
This is a work-in-progress style guide which it'll help us tremendously in the long run. Feel free to get in touch with us in case you think we need to improve this document. Your opinion is greatly appreciated. We are a team work having fun while being the BEST.