CSS Docs Index:

Container Markup

Any page content will use the following base markup, unless starting with a full width hero background:

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-12">
			<div class="post-content">
				
				[Content]
				
			</div>
		</div>
	</div>
</div>

Typography: Sizing

Typography: Weights

Gotham

Sentinel

Typography: Styling and Positioning

Italics

.delta.em.serif

<em>Italic text</em>

Bold

.delta.bo

<strong>Bold Text</strong>

Small Caps

.small.text-uppercase

Alignment (bootstrap classes)

	<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>					

Text Transform (bootstrap classes)

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

Spacing

Spacing classes with a scale in multiples of 12px, up to 78px (.mt6h, .mb6h, .pt6h, .pb6h, i.e. 6.5 * 12)

Content Block

Will create a block with 60px top and bottom padding on desktop, 36px on mobile.

<div class="content-block bg-plum c-white">
	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12">
				<h2 class="mega serif content-block-header">Board of Trustees</h2>
			</div>
		</div> <!-- row -->
	</div> <!-- container -->
</div> <!-- content-block -->

Icons

Full List of Icon Classes

Colors

Each of the following background color divs also has 24px of top and bottom of padding (.pt2.pb2)

.c-gray

Borders

Border classes create a 6px border by default. Add -lg to the end of any class for a 9px border.

Border Bottom

Border Top

Examples below use the following sample markup:

<div class="text-center bt-purple-lg pb1 pt1 mb4 serif gamma semi">
	<div class="row">
		<div class="col-xs-12">
			<p>.bt-purple-lg</p>
		</div>
	</div>
</div>

Hover Classes (icons)

Hover Classes (text)

Buttons

By default, buttons are inline-block. This means that the width of the button will be proportional to the width of the text inside, and that the button will automatically center when placed inside a wrapper .text-center. To define the CSS display: property, you can either use:

• .block
• .inline-block
• Bootsrap responsive utility classes: http://getbootstrap.com/css/#responsive-utilities

<p class="text-center mb2">
	<a class="btn bg-purple">A Purple Button</a>
</p>

A Purple Button

A Green Button

An Orange Button

A Dark Purple Button

Block buttons will fill the width of their container:

<div class="row small">
	<div class="col-xs-6 col-md-3">
		<a class="btn bg-purple block">A Purple Button</a>
	</div>
	
	<div class="col-xs-6 col-md-3">
		<a class="btn bg-green block">A Green Button</a>
	</div>

	<div class="col-xs-6 col-md-3">
		<a class="btn bg-orange block">An Orange Button</a>
	</div>
	
	<div class="col-xs-6 col-md-3">
		<a class="btn bg-purpledark block">A Purple Button</a>
	</div>
</div>

Buttons with icons:

<p class="text-center mb2">
	<a class="btn bg-purple">
		A Purple Button With A Lot of Text
		<span class="theta icon-chevron-right border-icon"></span>
	</a>
</p>

A Purple Button With A Lot of Text

<p class="text-center mb2">
	<a class="btn bg-green eta">
		A Green Button With A Lot of Text
		<span class="eta icon-chevron-right border-icon"></span>
	</a>
</p>

A Green Button With A Lot of Text

Hero

We're using an image switching script to load the appropriate image size depending on the user's browser width. The syntax is:

<div class="hero-img"
	data-interchange="
		["hero-image-sm.jpg", (default)],
		["hero-image-med.jpg", (medium)],
		["hero-image.jpg", (large)]
">

Sizing:

• Large: 1600px
• Medium: 1000px
• Small: 600px

Because we can use the same background image markup for any responsive background div (not just banner hero elements), when creating a banner hero element, we need to use both the .hero-wrap and .hero-fixed-height classes on the container element like so: <div class="hero-wrap hero-fixed-height">

Full markup for the hero image below:

<div class="hero-wrap hero-fixed-height">
	<div
		class="hero-img bb-green-lg"
		data-interchange="
			["hero-image-sm.jpg", (default)],
			["hero-image-med.jpg", (medium)],
			["hero-image.jpg", (large)]
		"
	></div> <!-- hero-img -->
	
	<div class="hero-text-wrap">
		<div class="container-fluid">
			<div class="row">
				<div class="col-xs-12">
					<div class="hero-text">
						<div class="serif super semi">
							<span class="c-purple">Supporting Research</span><br/>
							to Improve the Lives of Young People
						</div>
					</div> <!-- hero-text -->
				</div> <!-- col -->
			</div> <!-- row -->
		</div> <!-- container -->
	</div> <!-- hero-text-wrap -->
</div> <!-- hero-wrap -->

Hero with Blockquote

The .hero-wrap.hero-fixed-height wrapper will be the same. But the .hero-text block will use the following variation:

<div class="hero-text hero-quote">
	<div class="serif semi">
		<blockquote class="c-purple">
			<p>Effective programs and policies can enhance young people's lives and social science research can help us understand, build, and improve those that work best.</p>
			
			<footer>
				<cite class="">
					<span class="text-uppercase">Jane Goodall</span>&nbsp;
					<span class="em">President</span>
				</cite>
			</footer>
		</blockquote>
	</div>
</div> <!-- hero-text -->

Featured Blocks

For the example on the home page, we can use the same hero image markup for the wrapper.

<div class="hero-wrap">
	<div
		class="hero-img"
		data-interchange="
			['/assets/images/hero-image-sm.jpg', (default)],
			['/assets/images/hero-image-med.jpg', (medium)],
			['/assets/images/hero-image.jpg', (large)]
		"
	>
		<div class="container-fluid hero-text-wrap pb2 pt4">
			<div class="row center-cols">
				<div class="col-xs-6">
					<div class="feat-block-wrap img-left">
						<div class="feat-block-inner">
							<div class="feat-block-img-wrap">
								<img class="feat-block-img" src="/assets/images/neighborhood.jpg" />
							</div>
							
							<div class="feat-block-text-wrap">
								<h2 class="delta serif mb2 bo">Knowledge Neighborhoods: Building the Infrastructure for Evidence-based Practice</h2>
								
								<div class="feat-block-text small">
									<p>Is it time to stop thinking of research to practice as a point A to point B journey? Rather than talking about building bridges, what if we talked about building dynamic neighborhoods instead? UCLA's Bruce Chorpita considers the potential for an infrastructure that supports the active engagement necessary for finding solutions to the challenges we face.</p>							
								</div>
							</div> <!-- feat-block-text-wrap -->
						</div> <!-- feat-block-inner -->
						
						<a class="feat-block-more c-purple">
							Read More <span class="theta border-icon icon-chevron-right purple"></span>
						</a>
					</div> <!-- feat-block-wrap -->

					<div class="feat-block-wrap img-left">
						<div class="feat-block-inner">
							<div class="feat-block-img-wrap">
								<img class="feat-block-img" src="/assets/images/neighborhood.jpg" />
							</div>
														
							<div class="feat-block-text-wrap">
								<h2 class="delta serif mb2 bo">Knowledge Neighborhoods: Building the Infrastructure for Evidence-based Practice</h2>
								
								<div class="feat-block-text small">
									<p>Is it time to stop thinking of research to practice as a point A to point B journey? Rather than talking about building bridges, what if we talked about building dynamic neighborhoods instead? UCLA's Bruce Chorpita considers the potential for an infrastructure that supports the active engagement necessary for finding solutions to the challenges we face.</p>							
								</div>
							</div> <!-- feat-block-text-wrap -->
						</div> <!-- feat-block-inner -->
						
						<a class="feat-block-more c-purple">
							Read More <span class="theta border-icon icon-chevron-right purple"></span>
						</a>
					</div> <!-- feat-block-wrap -->
				</div> <!-- col -->
				
				<div class="col-xs-6 col-md-4">
				
					<div class="feat-block-wrap featured">
						<div class="feat-block-inner">
							<div class="feat-block-img-wrap">
								<img class="feat-block-img" src="/assets/images/neighborhood.jpg" />
							</div>
														
							<div class="feat-block-text-wrap">
								<div class="c-purple small semi text-uppercase mb1">Featured Resource</div>

								<h2 class="gamma serif mb2 bo">Knowledge Neighborhoods: Building the Infrastructure for Evidence-based Practice</h2>
								
								<div class="feat-block-text eta">
									<p>Is it time to stop thinking of research to practice as a point A to point B journey? Rather than talking about building bridges, what if we talked about building dynamic neighborhoods instead? UCLA's Bruce Chorpita considers the potential for an infrastructure that supports the active engagement necessary for finding solutions to the challenges we face.</p>							
								</div>
							</div> <!-- feat-block-text-wrap -->
						</div> <!-- feat-block-inner -->
						
						<a class="feat-block-more c-purple iota">
							Read More <span class="zeta border-icon icon-chevron-right purple"></span>
						</a>
					</div> <!-- feat-block-wrap -->
								
				</div>
			</div>
		</div>

	</div>
	

</div> <!-- hero-wrap -->

Internal page examples:

<div class="row">
	<div class="col-sm-6">

		<div class="feat-block-wrap bg-graylite">
			<div class="feat-block-inner">
				
				<div class="feat-block-text-wrap">
					<h2 class="beta serif mb3 bo bb-purple pb2">
						Knowledge Neighborhoods: Building the Infrastructure for Evidence-based Practice
					</h2>
					
					<div class="feat-block-text eta">
						<p>Is it time to stop thinking of research to practice as a point A to point B journey? Rather than talking about building bridges, what if we talked about building dynamic neighborhoods instead? UCLA's Bruce Chorpita considers the potential for an infrastructure that supports the active engagement necessary for finding solutions to the challenges we face.</p>							
					</div>
				</div> <!-- feat-block-text-wrap -->
				
			</div> <!-- feat-block-inner -->
			
			<a class="feat-block-more c-purple">
				Read More <span class="theta border-icon icon-chevron-right purple"></span>
			</a>
		</div> <!-- feat-block-wrap -->	
			
	</div>

	<div class="col-sm-6">
	
		<div class="feat-block-wrap bg-graylite">
			<div class="feat-block-inner">
				
				<div class="feat-block-text-wrap">
					<h2 class="beta serif mb3 bo bb-green pb2">
						Knowledge Neighborhoods: Building the Infrastructure for Evidence-based Practice
					</h2>
					
					<div class="feat-block-text eta">
						<p>Is it time to stop thinking of research to practice as a point A to point B journey? Rather than talking about building bridges, what if we talked about building dynamic neighborhoods instead? UCLA's Bruce Chorpita considers the potential for an infrastructure that supports the active engagement necessary for finding solutions to the challenges we face.</p>							
					</div>
				</div> <!-- feat-block-text-wrap -->
				
			</div> <!-- feat-block-inner -->
			
			<a class="feat-block-more c-purple">
				Read More <span class="theta border-icon icon-chevron-right purple"></span>
			</a>
		</div> <!-- feat-block-wrap -->		
				
	</div>
</div>

Hover Blocks

<div class="col-xs-6 col-lg-3">
	<div class="hover-block" style="background-image: url(/assets/images/home-sq.jpg)">
		<div class="hover-block-text bg-orange">
			<a class="hover-block-link c-white" href="">
				<h4 class="serif delta bo group">
					<span class="hover-block-title">Our Focus Areas</span>
					<span class="icon-chevron-right border-icon fr"></span>
				</h4>
				
				<p class="eta">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
			</a>
		</div>
	</div>	
</div>

Gallery Slider

<div
	class="gallery js-flickity"
	data-flickity-options='{
		"wrapAround": true,
		"pageDots" : false
	}'
>
	<div class="gallery-cell">

		<div class="round-img" style="background-image: url(/assets/images/home-sq.jpg)"></div>
		
		<h3 class="delta serif semi mb0">College Graduation is the Bottom Line</h3>
		<div class="serif em c-purple mb2">Ruth Glenn</div>
		
		<div class="small">
			<p>Ruth Genn of the Bottom Line, a William T. Grant Foundation Youth Services Improvement Grant recipient, discusses the importance of college counseling for young people.</p>	

			<a class="c-purple caps read-more">Read More <span class="theta border-icon icon-chevron-right purple"></span></a>
	
		</div>
	</div>
</div>

Lists

Numbered List

<ol class="big-numbered-list">
	<li>
		<h3 class="big-numbered-list-header">This uses the .big-numbered-list class</h3>
		
		<div class="list-inner">
			
			<p class="mb1h">Applicant Guidance:</p>
			
			<p>
				<a class="caps eta med c-purple">
					<span class="beta download-icon caps"></span>
					Research Application Guide
				</a>
			</p>

			<p class="mb1h">Applicant Guidance:</p>
			
			<p>
				<a class="caps eta med c-purple">
					<span class="beta download-icon caps"></span>
					Research Application Guide
				</a>
			</p>
		</div>
	</li>

	<li>
		<h3 class="big-numbered-list-header">This uses the .check-list class inside</h3>
		
		<div class="list-inner">
			
			<ul class="check-list icon-list">
				<li>Research project advances the Foundation's interests in understanding programs, policies, and practices that reduce inequality or understanding the use of research evidence.</li>
				
				<li>Research project has compelling relevance for programs, policies, and practices affecting youth ages 5-25 in the U.S.</li>
				
				<li>Funds primarily support research activities, not intervention or service costs.</li>
			</ul>

			<ul class="chevron-list icon-list">
				<li>Research project advances the Foundation's interests in understanding programs, policies, and practices that reduce inequality or understanding the use of research evidence.</li>
				
				<li>Research project has compelling relevance for programs, policies, and practices affecting youth ages 5-25 in the U.S.</li>
				
				<li>Funds primarily support research activities, not intervention or service costs.</li>
			</ul>

			<ul class="download-list icon-list">
				<li><a>Research project advances the Foundation's interests in understanding programs, policies, and practices that reduce inequality or understanding the use of research evidence.</a></li>
				
				<li><a>Research project has compelling relevance for programs, policies, and practices affecting youth ages 5-25 in the U.S.</a></li>
				
				<li><a>Funds primarily support research activities, not intervention or service costs.</a></li>
			</ul>
			
			<h4 class="theta caps semi">Mixed Chevron List</h4>

			<ul class="chevron-list icon-list">
				<li><a>Research project advances the Foundation's interests in understanding programs, policies, and practices that reduce inequality or understanding the use of research evidence.</a></li>
				
				<li class="download-li"><a>Research project has compelling relevance for programs, policies, and practices affecting youth ages 5-25 in the U.S.</a></li>
				
				<li><a>Funds primarily support research activities, not intervention or service costs.</a></li>
			</ul>

			<h4 class="theta caps semi">Mixed Check List</h4>

			<ul class="check-list icon-list">
				<li><a>Research project advances the Foundation's interests in understanding programs, policies, and practices that reduce inequality or understanding the use of research evidence.</a></li>
				
				<li class="download-li"><a>Research project has compelling relevance for programs, policies, and practices affecting youth ages 5-25 in the U.S.</a></li>
				
				<li><a>Funds primarily support research activities, not intervention or service costs.</a></li>
			</ul>
		</div>
	</li>
	
</ol>

1. This uses the .big-numbered-list class

   Applicant Guidance:

   Research Application Guide

   Applicant Guidance:

   Research Application Guide

2. This uses the .check-list class inside

   • Research project advances the Foundation's interests in understanding programs, policies, and practices that reduce inequality or understanding the use of research evidence.
   • Research project has compelling relevance for programs, policies, and practices affecting youth ages 5-25 in the U.S.
   • Funds primarily support research activities, not intervention or service costs.

   • Research project advances the Foundation's interests in understanding programs, policies, and practices that reduce inequality or understanding the use of research evidence.
   • Research project has compelling relevance for programs, policies, and practices affecting youth ages 5-25 in the U.S.
   • Funds primarily support research activities, not intervention or service costs.

   • Research project advances the Foundation's interests in understanding programs, policies, and practices that reduce inequality or understanding the use of research evidence.
   • Research project has compelling relevance for programs, policies, and practices affecting youth ages 5-25 in the U.S.
   • Funds primarily support research activities, not intervention or service costs.

   • Research project advances the Foundation's interests in understanding programs, policies, and practices that reduce inequality or understanding the use of research evidence.
   • Research project has compelling relevance for programs, policies, and practices affecting youth ages 5-25 in the U.S.
   • Funds primarily support research activities, not intervention or service costs.

   Mixed Chevron List

   • Research project advances the Foundation's interests in understanding programs, policies, and practices that reduce inequality or understanding the use of research evidence.
   • Research project has compelling relevance for programs, policies, and practices affecting youth ages 5-25 in the U.S.
   • Research project has compelling relevance for programs, policies, and practices affecting youth ages 5-25 in the U.S.
   • Funds primarily support research activities, not intervention or service costs.

   Mixed Check List

   • Research project advances the Foundation's interests in understanding programs, policies, and practices that reduce inequality or understanding the use of research evidence.
   • Research project has compelling relevance for programs, policies, and practices affecting youth ages 5-25 in the U.S.
   • Research project has compelling relevance for programs, policies, and practices affecting youth ages 5-25 in the U.S.
   • Funds primarily support research activities, not intervention or service costs.

Accordions

Big Links

<ul class="big-links">
		<li class="big-links-li">
			<a class="big-links-a">
				<div class="container-fluid table-mob">
					<div class="table-cell">
						<div class="big-links-title-wrap">
							<h3 class="med big-links-heading">A Pretty Long Title That Could Potentially Go Onto Two Lines Depending on the Window Size</h3>
							<p class="big-links-desc">A description that relates to the above title that will animate in on hover.</p>
						</div>
					</div>
					
					<div class="table-cell">
						<div class="big-links-img" style="background-image: url(/assets/images/biglinks.jpg)"></div>
					</div>
				</div>
			</a>
		</li>

		<li class="big-links-li">
			<a class="big-links-a">
				<div class="container-fluid table-mob">
					<div class="table-cell">
						<div class="big-links-title-wrap">
							<h3 class="med big-links-heading">A Pretty Long Title That Could Potentially Go Onto Two Lines Depending on the Window Size</h3>
							<p class="big-links-desc">A description that relates to the above title that will animate in on hover.</p>
						</div>
					</div>
					
					<div class="table-cell">
						<div class="big-links-img" style="background-image: url(/assets/images/biglinks.jpg)"></div>
					</div>
				</div>
			</a>
		</li>
	</ul>

Grid 4-3-2-1, 3-2-1, and .border-link

<div class="grid-4-3-2-1 gamma group border-link-bg">
	<div class="item">
		<a class="border-link">
			<span class="border-link-text">Structuring a Partnership</span>
		</a>
	</div>

	<div class="item">
		<a class="border-link">
			<span class="border-link-text">Communicating</span>
		</a>
	</div>

	<div class="item">
		<a class="border-link">
			<span class="border-link-text">Evaluating</span>
		</a>
	</div>

	<div class="item">
		<a class="border-link">
			<span class="border-link-text">Structuring a Partnership</span>
		</a>
	</div>

	<div class="item">
		<a class="border-link">
			<span class="border-link-text">Communicating</span>
		</a>
	</div>

	<div class="item">
		<a class="border-link">
			<span class="border-link-text">Evaluating</span>
		</a>
	</div>

	<div class="item">
		<a class="border-link">
			<span class="border-link-text">Structuring a Partnership</span>
		</a>
	</div>

	<div class="item">
		<a class="border-link">
			<span class="border-link-text">Communicating</span>
		</a>
	</div>

	<div class="item">
		<a class="border-link">
			<span class="border-link-text">Evaluating</span>
		</a>
	</div>					
</div>

Blockquote Full

<div class="content-block bg-graylite2">

	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12">
			
				<blockquote class="quote-full-width">
					<p>Effective programs and policies can enhance young people's lives and social science research can help us understand, build, and improve those that work best.</p>
					
					<footer>
						<cite class="">
							<span class="quote-author">Jane Goodall</span>
							<span class="quote-author-title">President</span>
						</cite>
					</footer>
				</blockquote>
				
			</div>
		</div>
	</div>			
</div>