FU STYLE GUIDE

Colors

Overall colors

Orange is still the brand color but we are minimizing it’s presence throughout the site. It is used sometimes in an accent for buttons and links on pages other than Advocacy, and Health, and the Blog.

@fu-orange
@benex-blue
@black
@advocacy-red
@benex-blue
@benex-blue
@benex-blue
@benex-blue
@benex-blue
@benex-blue

Buttons

Use the classes btn btn-fu btn-[button style here] to transform any <button> or hyperlink (<a href="...">) into a buton with standard styles.

See sections below for full list of available styles.

Example hyperlink button

<a href="https://www.example.com/" class="btn btn-fu btn-primary">Example hyperlink button</a>

<button class="btn btn-fu btn-primary">Example button</button>
<button class="btn btn-fu">CTA</button>
<button class="btn btn-fu btn-primary">CTA</button>
<button class="btn btn-fu btn-default">CTA</button>
<button class="btn btn-fu btn-transparent black-variation">CTA</button>

Seen in masthead

<div class="cta-container">
  <button class="btn btn-fu btn-transparent">CTA</button>
</div>
<button class="btn btn-fu">CTA</button>
<button class="btn btn-fu btn-primary">CTA</button>
<button class="btn btn-fu btn-default">CTA</button>
<button class="btn btn-fu btn-transparent black-variation">CTA</button>

With drop shadow

<button class="btn btn-fu btn-primary ds-on-white">CTA</button>
<button class="btn btn-fu btn-default ds-on-white">CTA</button>

Analytics

Add the class gaReportClick to any <a href="..."> link to click event data to Google Analytics.

Use the data-ga-* attributes as shown below to specify event category (broad, probably the page or section), action (generic, like "Clicked button," or "Clicked buy," or "Clicked button in masthead"), and label (specific tag to clarify what item the "action" was performed on. e.g. an insurance plan name if the action was "Clicked buy," or e.g. "Join," if the action was "Clicked button."

<a href="/registration/signup/"
    class="gaReportClick"
    data-ga-category="Homepage" 
    data-ga-action="Click masthead button"
    data-ga-label="Join">Join (it's free!)</a>

Angles

Uneven borders

There are only two types of angles FU Wide: oriented to the left and right. The alternate to overlap one over the other. As they shrink, they do so proportionately.

They are inline<svg> elements that specify 2 nontransparent polygons that cover the background underneath.

They are implemented using the template tag svg_border residing in fu_tags.py.

@register.inclusion_tag('includes/borders/svg.html')
def svg_border(orientation=None, css_classes='')

It takes orientation('left', 'middle', 'right'), and css_classes as arguments.

Advantages

  • The <svg> tag is a semantic element that respond to CSS just like any other. That means e.g.fill color specifications can inherit from FU's variables.less color system. Color hex codes are pulled from a unified location.
  • The browsers render them very fast. You may notice that the angles appear immediately on load. All major browsers support <svg>
  • Inlining cuts down extra HTTP requests, which is more performant.
  • Using inline <svg> elements is more maintainable. It is a django partial (svg.html) that can be edited easily.
  • <svg>s are powerful drawing tools: for one, we are able to easily add #classDropShadows to their boundary lines. Pure CSS approaches, e.g. clip-path does not allow that.

Disadvantages:

  • Because they are inlined, they cannot be cached. However, individually they amount to ~700 bytes each, and therefore only marginally increase the payload.

Basic Example

The class .uneven-border declares the container's position as 'relative' such that the <svg> can be absolutely positioned at its bottom (or top). Corresponding padding ensures no content will interfere with the angle.

<div class="uneven-border">
{% svg_border orientation='right' css_classes='white' %}
...
</div>

Orientation choices are 'left', 'middle', 'right'. The css_classes determine color and other properties

<div class="uneven-border">
{% svg_border orientation='left' css_classes='white' %}

...
</div>

This is a white, left-facing angle.

Conditional Borders

<div class="uneven-border">
{% svg_border orientation='right' css_classes='light-grey conditional-md' %}
...
</div>

Note the css class .conditional-md.

It will hide the border for screens larger than @screen-md-min, allowing borders to enter the responsive flow.

Choices are .conditional-sm, .conditional-md and .conditional-lg, but feel free to amend as needed.

<div class="uneven-border">
{% svg_border orientation='left' css_classes='grey' %}
...
</div>

An illustration how the bottom 2 polygons cover the background beneath.

Top Borders

Note the css classes .top and .inverted. Both will stick the SVG element to the top of the container, the latter applying an inversion as well.

<div class="uneven-border top-border">
{% svg_border orientation='right' css_classes='white inverted' %}
{% svg_border orientation='left' css_classes='white' %}
...
</div>

Because .inverted requires some padding at the top of the parent element, the extra CSS class top-border must be added to it.

<div class="uneven-border top-border">
{% svg_border orientation='left' css_classes='white top' cover_top=True %}
{% svg_border orientation='middle' css_classes='white' %}
...
</div>

In some cases, we might want the top center triangle of the <svg> to be opaque while the 2 lower polygons are transparent. The template tag takes an optional argument cover_top, a boolean.

Split Module Example

Sometimes one continuous background-color does not cut it. Instead, the next section might be split in half, with separate background colors. While it is rare, it does happen; but be merry, because this template tag takes another optional argument, split_in_half, a boolean. These colors must be explicitly declared for each use case, however:

&.split-white-blue {
  rect:nth-child(1) { fill: @white; }
  rect:nth-child(2) { fill: @benex-blue ;}
}

Currently this used on the FU homepage below the masthead. If another use arises, feel free to declare a new CSS class that determines fill-color.

<div class="uneven-border">
{% svg_border orientation='right' css_classes='split-white-blue' split_in_half=True %}
...
</div>

Note the optional argument split_in_half in the template tag.

I am a white module.

I am a blue module.

Outside of Django

Dynamically generated inline SVGs might be nice, but they are restricted to internal FU pages that can access Django's templating engine. For FU pages outside of our Django project (e.g. ghost, instapage, etc), we must employ a different strategy: linking to a static asset.

In order to avoid loading a separate file for each svg we specify, we can use a sprite-sheet that contains all of them. Targeting the desired svg with their ID's (e.g. sprites.xml#white-left), it's possible to select only one SVG element from the sprite sheet.

Unfortunately this technique is incompatible with background-image, so the most browser-compatible implementation is inlining an <object> tag.

<div class="uneven-border">
  <object type="image/svg+xml"
          data="<path_to_S3_assets>/images/borders/sprites.xml#white-right">
  </object>
  ...
</div>
<div class="uneven-border">
  <object type="image/svg+xml"
          data="<path_to_S3_assets>/images/borders/sprites.xml#white-left">
  </object>
  ...
</div>

Hexagons


Initially, this element was drawn using a .png image -- at 13Kb, while small, it is still giant in comparison to the corresponding <svg>, which is 300 bytes. Drawing simple shapes with vectors is superior than raster images. Think of all the pixels nobody has to encode!

It is responsive out of the box, but might be tweaked for certain use-cases.

Font Stacks

H1
Museo Sans
weight: 100;
size: 62px;
line-height: 72px;

H1
Museo Sans
weight: 100;
size: 62px;
line-height: 72px;

H2
Museo Sans
weight: 300;
size: 53px;
line-height: 62px;

H2
Museo Sans
weight: 300;
size: 53px;
line-height: 62px;

H3
Museo Sans
weight: 300;
size: 38px;
line-height: 45px;

H3
Museo Sans
weight: 300;
size: 38px;
line-height: 45px;

H4
Museo Sans
weight: 100;
size: 24px;
line-height: 30px;

H4
Museo Sans
weight: 100;
size: 24px;
line-height: 30px;

p
Museo Sans
weight: 100;
size: 16px;
line-height: 22px;

p
Museo Sans
weight: 100;
size: 16px;
line-height: 22px;

p card paragraph
Museo Sans
weight: 300;
size: 20px;
line-height: 24px;

p card paragraph
Museo Sans
weight: 300;
size: 20px;
line-height: 24px;