guyroutledge

Float Notes

Float allows us to create multi-column layouts.

We can create a two column layout by floating one container to the left and one to the right.

.main-content { float:left; width:66.67%; }
.sidebar { float:right; width:33.33%; }

guyroutledge

---
layout: nil
---

<?xml version="1.0" encoding="UTF-8"?>

<rss xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" version="2.0">

<channel>

guyroutledge

@function calc-em($target-px, $context) {
	@return ($target-px / $context) * 1em;
}

guyroutledge

@mixin placeholder() {
	::-webkit-input-placeholder {
		@content;
	}
	::-moz-placeholder {
		@content;
	}
	:-moz-placeholder {
		@content;
	}

guyroutledge

@mixin respond-to($breakpoint, $property:max-width) {
	@media screen and ($property:$breakpoint) {
		@content;
	}
}

guyroutledge

%screen-reader-text {
	text-align:left;
	text-indent:-9999px;
}
@mixin background-image-dimensions($image) {
	width:image-width($image);
	height:image-height($image);
	background-image:url($image);
}
@mixin image-replacement($image) {

guyroutledge

@mixin background-image-dimensions($image) {
	width:image-width($image);
	height:image-height($image);
	background-image:url($image);
}

guyroutledge

@mixin selection($background, $foreground:#fff) {
        ::-moz-selection { background: $background; color: $foreground; text-shadow: none; }
        ::selection { background: $background; color: $foreground; text-shadow: none; }
}

guyroutledge

// if an invalid form field has been made valid,
// remove the shouty error highlighting - if a valid
// required field has been made invalid, start shouting

$('input, textarea, select').on('change', function(){
    var $input     = $(this);
    var isRequired = $input.parents('.gfield').is('.gfield_contains_required');
    var isValid    = $input.is(':valid');

    if ( isRequired && isValid ) {

guyroutledge

// Generate @font-face declarations for a list of fonts

// relative path to fonts
$font-path: '../fonts/';
// the name that will be used in font-family property
$font-families: 'font1', 'font2', 'font3';
// the filename of your font without the file extension
$font-filenames: 'font1_filename', 'font2_filename', 'font3_filename';
$i: 1;