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.
I’m hidden visually and for screen readers.
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.
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.
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.
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.
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.
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.07143emem($base-size + 2)
1.14286emem($base-size + 3)
1.21429emem($base-size + 4)
1.28571emem($base-size + 5)
1.35714emem($base-size + 6)
1.42857emem($base-size + 7)
1.5emem($base-size + 8)
1.57143emem($base-size + 9)
1.64286emem($base-size + 10)
1.71429em
em($base-size - 1)
0.92857emem($base-size - 2)
0.85714emem($base-size - 3)
0.78571emem($base-size - 4)
0.71429emem($base-size - 5)
0.64286emem($base-size - 6)
0.57143emem($base-size - 7)
0.5emem($base-size - 8)
0.42857emem($base-size - 9)
0.35714emem($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...);