cfarm

These are WordPress plugins created for blogs.brynmawr.edu:

• "Contact Us" Widget for WordPress

cfarm

// ==========================================================================
// responsive breakpoints
// 320 - 480 - 768 - 1024
// ==========================================================================

@media screen and (max-width: 30em) {
    // helper to display 320px width on desktop
    // comment this out if you need to look @ 480px width
    .wl-appwrapper {
        width: 320px;

cfarm

// ==========================================================================
// cf
// ==========================================================================

@mixin cf {
  *zoom: 1;
  &:before,
  &:after {
    content: "";
    display: table;

cfarm

// ==========================================================================
// cf
// ==========================================================================

@mixin cf {
  *zoom: 1;
  &:before,
  &:after {
    content: "";
    display: table;

cfarm

# Require any additional compass plugins here.
require 'susy'
require 'modular-scale'
require 'sassy-buttons'
require 'breakpoint'
require 'compass-css-arrow'
require 'rgbapng'

# Set this to the root of your project when deployed:
http_path = "/"

cfarm

No Media Queries Fallback

Sass fallback for browsers that don't support media queries - i.e., IE8 and below.

A Pen by Catherine Farman on CodePen.

License.

cfarm

@mixin clearfix {
	*zoom: 1;
	&:before,
	&:after {
		content: "";
		display: table;
	}
	&:after {
		clear: both;
	}

cfarm

div.column {
	background: white;
	@include clearfix;
}

cfarm

@mixin breakpoint($screenWidth: 400px) {
	// output the mixin content inside of a media query
	@media screen and (min-width: $screenWidth) { @content; }
}

cfarm

$smallScreen: 400px;
$mediumScreen: 700px;

div.column {
	width: 100%;
	// column width changes to be half the viewport
	@include breakpoint($smallScreen) {
		width: 50%;
		float: left;
	}