About

This style guide is intended as a resource for current and future builders and maintainers of the LUNGevity website. In part, it translates the in-house Identity Guide for print publications to web applications.

---

Fonts

LUNGevity's preferred web font is Lato. The base font size is 16px (100%) and line height is 1.6em. Font color is #424242.

---

Colors

Tints

---

Base Styles

Use semantic HTML when possible; assign elements for meaning, not appearance.

• Use heading levels only for logical headings, not for emphasis

Heading 1 (2em)

Heading 2 (uppercase, 1.1em) (h2 or .h2)

Heading 3 (1.1em) (h3 or .h3)

Heading 4 (uppercase, 0.9em)

Alternate Heading 4 (class="alt")

 

Horizontal rule <hr />

---

Pattern Styles

Box borders

class="box-border-all" (8px solid #ededed)

 

Text Button

<span class="text-button"><a href="XXX">Link text</a></span>

Link text

or

<a class="text-button" href="XXX">Link text</a>

Link text

 

Highlighted Text/Callouts

This adds emphasis! class="callout-text"

 

Accent Boxes [[do not use]]

For example, <div class="accent-block w33 accent1"> would create a box like the one below.

 

Block Quotes

Here is a block quote! No need to add quotations marks; these big fancy ones will be added through the magic of CSS. Be sure to use the <blockquote> element so the styling will be applied. Block quotes should be a single paragraph, as the quotation marks will only be added at the beginning and end of the first paragraph.

—Quote attribution here, still inside of blockquote element

Blockquote element with class="callout-box-quote"; this floats it to the right with a width of 30%.

 

Tooltips

These are created by a filter.See the formatting information at the bottom of the WYSIWYG editor!

 

Collapsible text sections

Read this!

You can hide this content until the reader wants to see it. See the instructions at the bottom of the WYSIWYG editor. To add a title to the collapsed section, user the collapse WYSIWYG template.

 

 

---

Newspaper-Style Columns

Apply to a single element: class="newspaper2" or class="newspaper3"

---

Multiple Columns With Unequal Height

Apply to each element:

class="twocol" | class="twocol last" - or - class="threecol" | class="threecol last"

---

Table cells

Lay out boxes side by side; they maintain equal height, and they're responsive. Use w25, w33, or w50 class for equal cell widths; cell_border to add a blue border.

<div class="table_container">
<div class="table_row">
<div class="table_cell">

</div>
</div>
</div>

---

Flex Boxes

Use class  flex-container on div. In views, apply class to outermost container.

---

Tables

<table class="tbl">

<tr class="tblheader">

Generic Name	Brand Name (in US)	Types of lung cancer being studied
Ipilimumab	Yervoy	NSCLC, SCLC
MEDI4736	To be determined	NSCLC
MPDL3280A	To be determined	NSCLC
Nivolumab	Opdivo	NSCLC, SCLC
Pembrolizumab	Keytruda	NSCLC

---

Other useful classes

.cs-hide
    display: none;
}

.margin-bottom { /* useful for views rows*/
    margin-bottom: 1.1em;
}

.padding-bottom { /* useful for fields in views tables*/
    padding-bottom: 1.1em;
}

.no-margin {
    margin-bottom: 0;
    margin-top: 0;
}

.display-left {
    float: left;
    margin-right: 12px;
    margin-bottom: 0.8em;
}

.display-right {
    float: right;
    margin-left: 12px;
    margin-bottom: 1.3em;
}

.width800 { /* create a div to constrain content width - simulates blogs & media releases */
    max-width: 800px;
    margin: 0 auto;
}

.shadow { /* mostly for images */
    border: 6px solid #fff;
    box-shadow: 3px 3px 5px #dedede;
}

.img-border { /* mostly for illustrations; light gray border, no padding or margins */
    border: 4px solid rgb(237, 237, 237);
}

.inline-heading - use .h2 instead
 

.note {  /*good for captions and notes */
    font-size: 0.85em;
    font-style: italic;
    line-height: 1.3em;
}

.large {
    font-size: 1.2em;
}

.w100 {
    width: 100%;
}

.w50 {
    width: 47%;
    margin: 0 1.5%;
}

.w33 {
    width: 30%;
    margin: 0 1.5%;
}

.w25 {
    width: 22%;
    margin: 0 1.5%;
}

.accent1 { /*orange*/

    background-color: #ff7900;
    color: #fff;
}

.accent2 { /*blue*/
    background-color: #00A1DE;
    color: #fff;
}

.accent3 { /*green*/
    background-color: #61C250;
    color: #fff;
}

 

To make a link open in a colorbox, add class colorbox-node to the a tag and specify height and width in the href:

<a class="colorbox-node" href="LINKURL?width=580&height=340">LINK TEXT</a>

 

To make videos responsive:

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>

Note: if you want the video to display smaller than 100% of container (or page) width, you need to add a wrapper around the videoWrapper div that specifies the width:

<div style="width: 560px; max-width: 100%; margin: 0 auto;">
</div>

 

For styled fieldsets:

.fancy-fieldset {
  border: 2px solid #00a1de;
  margin: 0 2px 1em;
  padding: 0 2em;
}

.fancy-fieldset legend {
  color: #00a1de;
  font-size: 1.5em;
}

.fancy-fieldset .conditional {
  margin-left: 2em;
}