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.
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="hide-for-small-only"
, 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 (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.
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
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>