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/styles/base/_global.scss
  • Stylesheet locations for development extras: /_source/styles/base/typography.scss and /_source/styles/base/_global.scss
  • Stylesheet location for sass variables: /_source/styles/base/_variables.scss
  • Stylesheet location for sass mixins: /_source/styles/base/_mixins.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="hide-for-small-only", 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 (see 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.

For a full list of color variables, see the variables Sass file (in bitbucket).

Borders, border-radius, and box-shadow

Many components on the pcc.edu website have rounded corners and shadows that appear on the right side and bottom. Some elements have a bottom border. Use the callout mixin (described below) for creating these decorative elements. If you use these elements in inline styles, use the corresponding values below.

  • $border-width: 2px
  • $border-radius: 4px
  • $box-shadow: 3px
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”.

em($text-base) = 1em

Transition time

Some components on the website have subtle animations. Use the variable to keep timing consistent (0.2s).

$transition-time:0.2s;

Breakpoints

The layout and design of the website change based on the screen size. The pixel widths where these changes happen are below:

  • Extra small
    • $x-small-max:320px
  • Small
    • $small-min:321px;
    • $small-max:639px;
  • Medium
    • $medium-min:640px;
    • $medium-max:1023px;
  • Large
    • $large-min:1024px;
    • $large-max:1199px;
  • Extra large
    • $xlarge-min:1200px;

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:

Align form input and button

In some simple forms, it looks better to have the input and button aligned side-by-side rather than the default stacked layout.

@include align-form-horizontal;

Examples: 404 pages (try visiting https://www.pcc.edu/foo/)

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 the heading in the sidebar navigation.

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 font-heading;

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

Shadows

Many components on the website have a shadow on the right and bottom sides. This gives them a modern and interactive look. The shadow mixin takes a single color argument, which darkens that color by 15% and uses it as the shadow. The mixin applies the necessary border-radius, as well.

  • $color: the color of the component getting the shadow
@include shadow($color);

Examples: callouts, the sidebar navigation, tabs, and buttons

Visually hide

Used to hide content visually but not for screen readers. Doesn’t take arguments.

@include visually-hide;

Example: hiding descriptive content for links, such as <a href=""><span class="visually-hide">QRC </span>Resources</a>