Extras

Web services

Extras

This page contains helpful information for developers, including classes controlling clearing, visibility, and devnotes. It also includes Sass variables and mixins.

*This page is meant for developers with access to a page’s source code, not for content editors.

Development info

Stylesheet location for clearing and visibility: /source-v6/styles/base/_global.scss
Stylesheet location for sass variables: /source-v6/styles/base/_variables.scss
Stylesheet location for sass mixins: /source-v6/styles/base/_mixins.scss
Stylesheet location for blokk, watermarks, and devnote: /source-v6/styles/base/_testing.scss

Clearing

Clearing is needed to reinstate the normal page flow and layout around floated elements.

Simple clearing

Add class="clear" to an element to clear simple floating layouts above it.

I’m 50% width and floated left.

I’m 50% width, but not floating up next to my neighbor because I’m all clear!

<p class="clear">I'm all clear!</p>

Clearfix

Put a <div class="clearfix"> around a floated section of code to clear it – no need to add class="clear" to the next element in the hierarchy. clearfix is good for more complicated floating layouts. There’s also a clearfix mixin you can use in Sass.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit pharetra lacinia.

Duis suscipit nunc nec luctus condimentum.

All clear, without class="clear". Without the clearfix above, I’d be floated in the little space below the second block.

<div class="clearfix">
  <div style="float:left; width:50%;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque hendrerit pharetra lacinia.</p>
  </div>
  <div style="float:left; width:50%;">
    <p>Duis suscipit nunc nec luctus condimentum.</p>
  </div>
</div>

Visibility

Use the following visibility classes for hiding elements based on certain parameters. Foundation also offers visibility classes for manipulating the visibility of elements for different screen sizes and for screen readers.

True hide

Sometimes it’s necessary to hide an element visually as well as for screen readers. This most often happens when you’re unable to edit the HTML (like in a vendor application). True hiding an element takes it out of the flow of the page completely. There are two classes for legacy reasons.

Horizontal rules ( <hr> ) are hidden by default, so don’t try to use them.

There are two sentences here, but the second one is hidden (it won’t be read by a screen reader).

class="hidden"
class="hide"

Visually hide

Screen readers see class="visually-hide" elements, but they’re hidden for sighted users. Elements with this class are pushed off the screen using a huge negative margin.

There are two sentences here, but the second one is visually hidden (it will be read by a screen reader).
I’m hidden visually but not for screen readers.

class="visually-hide"

Link text accessibility

class="visually-hide" is very useful for making content accessible. For example, there’s a “Resources” link in the header on all pages. Say you’re working on the WRC page, which also has a “Resources” link. This isn’t accessible – links that point to different pages must have different link text. Here’s how to fix this issue using class="visually-hide":

<a href="/resources/">Resources</a> <!-- header link -->
<a href="resources.html"><span class="visually-hide">WRC </span>Resources</a>

The two links are now accessible because their link text is different for screen readers, even if it isn’t for sighted users (the location of the links makes them accessible visually).

Show or hide by screen size

Use these classes to control which elements are visible based on screen size. Examples where this is useful:

Displaying different images for desktops and phones.
Hiding elements on small screens – only do this for non-essential content that doesn’t display well on small screens (images with extremely wide aspect ratios that will be too small to see on a phone, for example).

The Foundation website has a full list of screen size and orientation visibility classes.

Desktop and tablet

This image has class="show-for-medium-up", so will display on medium and larger screens. The landscape aspect ratio is good for larger screens.
Image of a cat that is wider than it is tall (but it's the same cat that is in the phone image)

Phone

This image has class="show-for-small-only", so will only display on small screens. The portrait aspect ratio is good for small screens.
Image of a cat that is taller than it is wide (but it's the same cat as in the desktop and tablet image)

Development

Use these tools to help keep organized during the development process.

Blokk – lorem ipsum no more

Use class="lorem" to turn any text into gray bars instead of regular text. This is great for clients who don’t understand lorem ipsum text, or for pages that already have content but are in development.

You can use class="lorem" on any individual text elements, or can wrap <div class="lorem"> around multiple elements.

This is a paragraph that is in development. The client doesn’t understand what lorem ipsum is, and kept getting confused. That’s why we use Blokk font instead!

Test watermarks

It can be difficult for clients (and us!) to tell that a page is on test or prod. On test pages, you can include watermarks behind the content area to make this distinction clear.

You don’t need to make any changes to the page when setting it up on test, or when moving the page to prod. JavaScript adds the watermarks if the page is on test.pcc.edu, so they will never show up on pcc.edu.

Watermarks example

Devnote

Use class="devnote" to highlight development notes. These notes shouldn’t be anywhere in production files. You can use them on entire blocks of text, or on single words or phrases within a block of text.

Replace this cat placeholder with a photo of students.

Placeholder cat photo
devnote looks slightly different when used on spans, versus on paragraphs or divs (above).

Sass variables

There are variables we use in our Sass stylesheets to make sure things like color and spacing are consistent throughout the stylesheet. Variables make it so you don’t have to repeat the same HEX or pixel value over and over, which cuts down on development time and leaves less room for human error.

Color

For more information, see the color page. These variables are only used in Sass files. Use their HEX equivalents in any inline styles – don’t invent your own colors or HEX values.

Primary colors

$teal
$blue

Accent colors

$green
$yellow
$orange
$red

Supporting colors

$light-gray
$medium-gray
$dark-teal
$dark-gray

Additional colors

These use the above variables, but for specific things.

$action ($teal, for action callouts)
$highlight ($green, for highlight callouts)
$bulletin ($orange, for bulletin callouts)
$related ($purple, for related callouts)
$link ($dark-teal, for links)
$link-hover ($blue, for link hover)
$lighten-text (see the color page under “Dark gray info” for more info about using this variable)
$lighten-text-more (see the color page under “Dark gray info” for more info about using this variable)

Spacing

When there’s a limitless use of px and em values across the website, things get very inconsistent. You can use this limited set of responsive spacing sizes on elements. You really shouldn’t need anything larger than 40px. These variables are only used in Sass files. Use their em or px equivalents in any inline styles – don’t invent your own spacing between elements.

$px-2 0.125em, em equivalent to 2px
$px-5 0.313em, em equivalent to 5px
$px-10 0.625em, em equivalent to 10px
$px-15 0.9375em, em equivalent to 15px
$px-20 1.25em, em equivalent to 20px
$px-25 1.5625em, em equivalent to 25px
$px-30 1.875em, em equivalent to 30px
$px-35 2.1875em, em equivalent to 35px
$px-40 2.5em, em equivalent to 40px

Borders

All callouts, callout headings, and buttons have a 2px bottom border, which is 12% darker than the main background color. Use the callout mixin (described below) for creating this background-border pair. If you put a bottom border on any other element, make it 2px. This variable is only used in Sass files. Use its px equivalent in any inline styles – don’t invent your own border width.

$border-width

Text

The custom Sass em() function calculates text sizes using the $base-size variable. $base-size is equal to 14px and em($base-size) is equal to 1em. See a full explanation of how to use this function and variable at the top of the typography basics page under “typography development info”. Below is a sampling of em() functions and their em equivalents. It’s possible to use numbers higher than 10 and lower than -10.

em($base-size) 1em

em($base-size + 1) 1.07143em
em($base-size + 2) 1.14286em
em($base-size + 3) 1.21429em
em($base-size + 4) 1.28571em
em($base-size + 5) 1.35714em
em($base-size + 6) 1.42857em
em($base-size + 7) 1.5em
em($base-size + 8) 1.57143em
em($base-size + 9) 1.64286em
em($base-size + 10) 1.71429em

em($base-size - 1) 0.92857em
em($base-size - 2) 0.85714em
em($base-size - 3) 0.78571em
em($base-size - 4) 0.71429em
em($base-size - 5) 0.64286em
em($base-size - 6) 0.57143em
em($base-size - 7) 0.5em
em($base-size - 8) 0.42857em
em($base-size - 9) 0.35714em
em($base-size - 10) 0.28571em

Sass mixins

Mixins are essentially the same as variables (described above) but include chunks of code instead of single values.

Call mixins in Sass using @include.
Some mixins take arguments, some don’t. Arguments must be in the exact order as shown below. You can pass variables as arguments.

Here’s a list of all the mixins in the PCC Sass files, and their arguments:

Background photo

The background photo mixin creates an image overlaid with a solid color. The image must be black and white, and certain types and crops of images work best – learn more about custom background images.

$color: the color of the overlay – color variable (above), HEX, or RGB
$opacity: opacity of the overlay – 0.X
$url: path to the image inside single quotes

@include bg-photo($color, $opacity, $url);

Examples: background photo behind the page title in the header, and behind heading in the sidebar navigation.

Border radius

The border-radius mixin creates rounded corners, ovals, and circles. It includes the necessary vendor prefixes.

$top: top left corner
$right: top right corner
$bottom: bottom right corner
$left: bottom left corner

@include border-radius($top, $right, $bottom, $left);

Examples: round icons, central steps numbers, mini calendar

Box shadow

(Not for general use.) The box-shadow mixin creates drop shadows (used for the shadow below the header).

$x: horizontal offset (+ or –)
$y: vertical offset (+ or –)
$blur: the softness of the edge
$color: the color of the shadow

@include box-shadow($x, $y, $blur, $color);

Example: global header

Button

The button mixin creates a basic button. Doesn’t take arguments.

@include button;

Examples: buttons

Callout

(Not for general use.) The callout mixin assigns the background and text color to a callout. Callouts use this mixin twice, first for the heading background and text color and second for the body background and text color.

$color: background color
$text: text color

@include callout($color, $text);

Examples: callouts

Callout headings

(Not for general use.) The callout headings mixin creates the size of the colorful box around callout headings. Doesn’t take arguments, because all the heading boxes should be the same size.

@include callout-heading;

Examples: callouts

Center vertically

The center vertically mixin centers an element vertically, given the parent container has a set height. Doesn’t take arguments. Includes necessary vendor prefixes.

@include center-vertical;

Clearfix

The clearfix mixin clears floated sections of code, which is helpful for more complicated layouts. Doesn’t take arguments. You can also use the clearfix class in HTML.

@include clearfix;

Example: tabs (clears tab contents and makes sure the gray background goes behind all the current tab’s contents).

Font Awesome

The Font Awesome mixin lets you include Font Awesome icons in CSS. You can also include Font Awesome icons in HTML.

$color: icon color
$icon: icon’s Unicode, inside double quotes (ex: “\f105” for one right arrow, or “\f105 \f105” for double right arrows)
$size: icon size

@include font-awesome($color, $icon, $size);

Example: pullquotes

Font face

(Not for general use.) Use the font face mixin to create the font stack for our @font-face custom fonts.

$font: font name, no quote marks
$style: font style (normal, italic)
$weight: font weight (normal, bold)

@include font-face($font, $style, $weight);

Example: typography

Font – heading

The heading font mixin runs the font-face mixin with the heading font, for our @font-face custom fonts. Doesn’t take arguments – the mixin specifies the font name, style, and weight. Use whenever you declare the heading font in CSS. Include first, above other rules.

@include heading-font;

Example: typography

Font – regular

The regular font mixin runs the font-face mixin with the heading font, for our @font-face custom fonts. Doesn’t take arguments – the mixin specifies the font name, style, and weight. Use whenever you declare the heading font in CSS. Include first, above other rules.

@include font;

Example: typography

Font – italic

the italic font mixin runs the font-face mixin with the italic body font, for our @font-face custom fonts. Doesn’t take arguments – the mixin specifies the font name, style, and weight. Use whenever you declare the heading font in CSS. Include first, above other rules.

@include font-italic;

Example: typography

Font – bold

The bold font mixin runs the font-face mixin with the bold body font, for our @font-face custom fonts. Doesn’t take arguments – the mixin specifies the font name, style, and weight. Use whenever you declare the heading font in CSS. Include first, above other rules.

@include font-bold;

Example: typography

Transition

(Not for general use.) Use the transition mixin to create CSS transitions. Transitions smoothly change property values from one value to another over a given duration. These are currently only used on the PCC site to remove Foundation’s default transitions. Takes any arguments – it will pass whatever you include in the parentheses (transition: $args;). Includes necessary vendor prefixes.

@include transition($args...);