Reference Guide for Main.css

CSS Guides

Files & Customization

We use two files as the source for our main CSS classes and styles. There is a Main.css file which is the same across all sites, and a over ride file named Main_{site}.css for site specific variations.

The concept is simply to have a slam-able set of CSS styles, and a way to over rides these styles to customize the look of a site. The Main.css file is slam-able between websites and themes everything in monotone gray colors. If a retailer wants custom colors or other custom styling, you can write a CSS rule in the Main_{site}.css file. Because the Main_{site}.css file is included after the Main.css file, any rule set with the same selector found in the two files, the changes made in the Main_{site}.css file will take precedence.

Location

The CSS files are found on the graphics server of each site to take advantage of the CDN.

Sections:

Section names are the same as those in main.css

  1. Global Tags
  2. Global Rules
  3. Template Rules
  4. Header Rules
  5. Content Rules
    1. .Breadcrumb
    2. .LinkList
    3. .button
    4. .InputSearch
    5. .columnTopWrapper
    6. .Pagination
    7. .AddToList.button
    8. .LoginReq
    9. .message
      1. .confirm
      2. .error
      3. .information
      4. .status
    10. .PrintOnly
    11. .Group
  6. Table & Hit List Rules
    1. Green Bar
  7. Form Rules
  8. NavBar Rules
  9. SideBar Rules
    1. .Group
  10. Footer Rules

Template Rules

For more information visit the Template Guide page.

Generally speaking you won't have to think about template rules since the framework takes care of it for you. So we won't go into much detail here, but will mention that the following classes are assigned to the Template.inc file to manage layout.

5. Content Rules

We have created a basic set of CSS classes used to achieve consistent effects for commonly used elements. Most of the rules you will be using are found in this section.

  1. .Breadcrumb
  2. .LinkList
  3. .button
  4. .InputSearch
  5. .columnTopWrapper
  6. .Pagination
  7. .AddToList.button
  8. .LoginReq
  9. .message
    1. .confirm
    2. .error
    3. .information
    4. .status
  10. .PrintOnly
  11. .Group

This creates pretty bread crumb navigation.

For more information visit the Breadcrumb Guide.

The breadcrumb guide explains a standard approach to creating breadcrumbs in modules and web pages.

Code Example

<ul class="Breadcrumb">
	<li class="Home"><a href="http://www.pricechopper.com/"><span>Home</span></a></li>
	<li ><a href="http://www.pricechopper.com/Recipes/Index/">Recipes</a></li>
	<li ><a href="http://www.pricechopper.com/Recipes/Weekly/">Weekly</a></li>
	<li class="Last"><a href="http://www.pricechopper.com/Recipes/Detail/158/Fudge_Sundae_Pie/">Fudge Sundae Pie</a></li>
</ul>

Display Example

This makes lists of links attractive. Plays nice with .button class on links.

Code Example

<div class="LinkList">
	<ul>
		<li class="Home"><a href="http://www.pricechopper.com/"><span>Home</span></a></li>
		<li ><a href="http://www.pricechopper.com/Recipes/Index/">Recipes</a></li>
		<li ><a href="http://www.pricechopper.com/Recipes/Weekly/">Weekly</a></li>
		<li class="Last">
			<a href="http://www.pricechopper.com/Recipes/Detail/158/Fudge_Sundae_Pie/">
				Fudge Sundae Pie
			</a>
		</li>
	</ul>
</div>

Display Examples

Text Links:
.button Class on Links:

Button Class

This makes pretty buttons. Examples below...

Link with .button class

<p><a href="#" class="button">a.button</a></p>

a.button

HTML button tag

<button>button</button>

Input Search Class

This makes a pretty search form input

Code Example

<form>
	<input 
		type="text" 
		placeholder="Search Recipes" 
		autosave="com.webstop.recipe.search" 
		class="InputSearch" 
		name="Search" 
		value="" 
		results="10" 
		size="25" 
		title="Search Recipes" 
	/>
</form>

Display Example

Column Top Wrapper Class

The .columnTopWrapper class allows you to keep search forms in the sidebar even height with breadcrumbs in the content section.

Hack, better solution needed...

Seems like there ought to be a better way to do this, but this is what we have for now.

Code Example

<div class="columnTopWrapper">
	<form>
		<input 
			type="text" 
			placeholder="Search Recipes" 
			autosave="com.webstop.recipe.search" 
			class="InputSearch" 
			name="Search" 
			value="" 
			results="10" 
			size="25" 
			title="Search Recipes" 
		/>
	</form>
</div>

Display Example

Pagination Class

This is a special class designed to style links above and below a hit list of data.

For more information visit the Pagination cTag API page.

This CSS class is meant to be used with the HitList_Pagination custom tag, and isn't likely to be used without it.

Code Example

<div class="Pagination Bottom">
		<p>				<span class="ViewingStats">Viewing 21-40 of 49 recipes.</span> 
			<span class="PageStats">Page 2 of 3.</span>
		</p>		<ul>
		<li class="SkipFirst">
			<a href="http://www.pricechopper.com/Recipes/Recent/0/"><span><<<span class="word">First</span></span></a>
		</li>
		<li class="SkipPrev">
			<a href="http://www.pricechopper.com/Recipes/Recent/0/"><span><<span class="word">Prev</span></span></a>
		</li>
		<li class="PrevPages"><a href="http://www.pricechopper.com/Recipes/Recent/0/"><span>1</span></a></li>
		<li class="CurrentPage"><span>2</span></li>
		<li class="NextPages"><a href="http://www.pricechopper.com/Recipes/Recent/40/"><span>3</span></a></li>
		<li class="SkipNext">
			<a href="http://www.pricechopper.com/Recipes/Recent/40/"><span><span class="word">Next</span>></span></a>
		</li>
		<li class="SkipLast">
			<a href="http://www.pricechopper.com/Recipes/Recent/40/"><span><span class="word">Last</span>>></span></a>
		</li>
	</ul>
</div>

Display Example

Add To List & Button Class

This makes a pretty "Add to Shopping List" button.

Link with .AddToList.button classes

<p><a href="#" class="button AddToList">a.AddToList.button</a></p>

a.AddToList.button

HTML button tag

<button>button.AddToList</button>

Login Required Class

Styles an attractive login form.

Code Example

<div class="LoginReq">
	<h2>Login Required</h2>
	<p>My Cookbook recipes are saved under your AdvantEdge Card account.</p>
	<p><a href="http://www.pricechoper.com/Card_mod/Card_Login_Stub.las" class="button">Login</a></p>
	<p>
		<strong>Please 
		<a href="http://www.pricechopper.com/Card_mod/Card_Login_Stub.las">login</a> 
		to access My Cookbook recipes.</strong>
	</p>
</div>

Display Example

Login Required

My Cookbook recipes are saved under your AdvantEdge Card account.

Login

Please login to access My Cookbook recipes.

Message Classes

.message .confirm .error .information .status

The .message class has the following sub classes: .confirm, .error, .information, .status, . The sub classes determine colors and icons to be used in each message.

Code Example

<div class="message confirm">
	<h4 class="title">Main Confirm Message <span>sub message</span></h4>
	<p class="note">Note about the confirmation (optional)</p>
</div>

Display Examples

.confirm

.message.confirm .title + span

.confirm .note

.error

.message.error .title + span

.error .note

.information

.message.information .title + span

.information .note

.status

.message.status .title + span

.status .note

Print Only Class

Place the .PrintOnly class on elements you only want to show up when the page is printed, and have hidden on the computer screen.

Example

<p class="PrintOnly">Source: http://pricechopper.com/Recipes/Weekly/</p>

Source: http://pricechopper.com/Recipes/Weekly/

Group Class

Place the .Group class on elements you want to stand out on a page.

Code Example


<div class="Group">
	<h4>My Stuff</h4>
	<p>Here is some stuff that belongs together, and I want to stand out on the page.</p>
</div>

Display Example

Placed on a white background to more accurately reflect how a page will look.

My Stuff

Here is some stuff that belongs together, and I want to stand out on the page.

6. Table & Hit List Rules

We still need to migrate rules like .StandardChart, .HitList & etc. to the Main.css file.

  1. Green Bar

Green Bar Classes

Green Bar refers to an effect where data in rows is displayed with alternating colors between each record (row). Two classes are used to get the green bar effect: .OddRow and .EvenRow. They are usually accompanied by classes like .HitList which styles a whole table or ol/ul for attractive data display.

HTML Code Example

<ul>
	<li class="OddRow">Item 1</li>
	<li class="EvenRow">Item 2</li>
	<li class="OddRow">Item 3</li>
	<li class="EvenRow">Item 4</li>
</ul>

Lasso Code Example

[var('vRow'='OddRow')]
<ul>
	[loop(4)]
		<li class="[$vRow]">Item [loop_count]</li>
		[$vRow == 'OddRow' ? $vRow = 'EvenRow' | $vRow = 'OddRow';]
	[/loop]
</ul>

Display Example

9. SideBar Rules

Rules that only work, or work differently inside the .SideBar class.

  1. .Group

Group Class in SideBar Class

Place the .Group class on elements you want to stand out on a page.

Code Example

<div class="SideBar">
	<div class="Group LinkList RecipeLinks">
		<h4 class="Title">Recipes</h4>
		<ul>
			<li><a href="http://pricechopper.com/Recipes/Weekly/" class="button">Weekly Recipes</a></li>
			<li><a href="http://pricechopper.com/Recipes/Categories/" class="button">Recipe Categories</a></li>
			<li><a href="http://pricechopper.com/Recipes/Recent/" class="button">Recently Viewed</a></li>
			<li><a href="http://pricechopper.com/Recipes/MyCookbook/" class="button">My Cookbook</a></li>
		</ul>
	</div>
</div>

Display Example

Recipes