Fabric is a dead simple one-page responsive framework with a couple super useful features. No pre-fab buttons or styles, just one small set of files ready for you to get to work with.

MOBILE FIRST

(...Imagine that! What isn’t these days?)

RESPONSIVE

(takes a short while getting used to, but it doesn’t suck)

SEMANTIC MARKUP

(clean code = happy code)

The Problem

Fabric was developed out of the love of single page site design and the want & need of a very basic system to not only deploy single page designs but address some important responsive design problems. Most modern responsive frameworks dive straight into complex systems of displaying content and often are found bloated with pre-made buttons, specific styles, and fancy behaviors.

Responsive Image

The issue with making images responsive is that there is no simple and commonly used way of approaching this problem. To use some big and clunky script just to make images behave the way that you want them to on a single page site is a bit awkward. Fabric is a lightweight solution to single page deployment and so should be the responsive image functionality. We developed f<img> to be as simple and small under the hood as possible.

Short & Sweet


/* Responsive Image Loader
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

$(function() { // Responsive loading of various images based on resolution
var res = $('#resolution').css('font-size').slice(0,-2);
	
if (res != '1'){ // Get @media resolution size break
	$('img').each(function(){ // Replace img with one more appropriate
		var $t = $(this);
		var og = $t.attr('src');
		var parts = $t.attr('src').split(".");
		var altered = parts[0] + '-' + res + '.' + parts[1];

	$.ajax({ // Check to see if new image exists
		url: altered,
		type: 'HEAD',
		success: function(){ $t.attr('src', altered) },
		error: function(){ $t.attr('src', og) }
			});
		});
	}
});

Found in fabric.js | 11

In The Page

Place the "resolution" div in the header.

HTML


<div id="resolution"> </div> <!-- Image Resizer HTML portion -->

Found in index.html | 47

Example of an image element in the HTML structure, as simple as that.


<div class="banner">
	<img class="landing" src="img/featured.jpg" alt="banner" />
</div>

Found in index.html | 62

Load The Image

Assign appropriate font size (width of image) to specific media queries. Append a matching "font size" to your images so they can be displayed at specific page widths that you signal in the media queries.

Example: "image.jpg" (original image), "image-640.jpg" (image that will load in place of original) will display when page is at 640px wide (#resolution { font-size: 640px; })

CSS


/* @ 1024px
`````````````````````````````````````````````````````````````````` */  
@media screen and (max-width: 1024px) {

#resolution { font-size: 1024px; } /* Pass image append var*/

}

/* @ 640px
`````````````````````````````````````````````````````````````````` */ 
@media screen and (max-width: 640px) {

#resolution { font-size: 640px; } /* Pass image append var*/

}

Found in fabric.css | 11 & 25

Example

Example: "image.jpg" (original image), "image-640.jpg" (image that will load in place of original) will display when page is at 640px wide (#resolution { font-size: 640px; })

Simple Form

Everyone deserves a simple contact form, no matter the project and/or how complex it might get.

Basic Code


/* f[form] Simple Contact Form
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

$(function() { //Contact Form
	$('#contactform').submit( submitForm );
	
	$('.error').hide();
	$('input.text-input').css({backgroundColor:"#FFFFFF"});
	$('input.text-input').focus(function(){
		$(this).css({backgroundColor:"#FFDDAA"});
	});
	$('input.text-input').blur(function(){
		$(this).css({backgroundColor:"#FFFFFF"});
	});
});
			
// Submit the form via Ajax
function submitForm() {
	var contactForm = $(this);
 
	// validate and process form
	// first hide any error messages
    $('.error').hide();

	var name = $("input#name").val();
	if (name == "") {
    	$("label#name_error").show();
    	$("input#name").focus();
    	return false;
    }
	var email = $("input#email").val();
	if (email == "") {
    	$("label#email_error").show();
    	$("input#email").focus();
    	return false;
    }
	var comments = $("textarea#comments").val();
	if (comments == "") {
    	$("label#comments_error").show();
		$("input#comments").focus();
		return false;
	}

	$.ajax( {
		url: contactForm.attr( 'action' ) + "?ajax=true",
		type: contactForm.attr( 'method' ),
		data: contactForm.serialize(),
		success: submitFinished
	});
 	// Prevent the default form submission occurring
	return false;
}

// Handle the Ajax response
function submitFinished( response ) {
	var messageDelay = 2000;
	response = $.trim( response );
 
	if ( response == "success" ) {
	    // Form submitted successfully:
	    // 1. Display the success message
	    // 2. Clear the form fields
	    // 3. Fade the content back in
		$('#successMessage').fadeIn().delay(messageDelay).fadeOut();
		$('#name').val( "" );
		$('#email').val( "" );
		$('#comments').val( "" );
	} else {
		// Form submission failed: Display the failure message,
		// then redisplay the form
		$('#failureMessage').fadeIn().delay(messageDelay).fadeOut();
	}
}

Found in fabric.js | 36

In The Page

Basic form markup.

HTML


<div id="successMessage" class="statusMessage"> 
	<p>Thanks for sending your message! We'll get back to you shortly.</p> 
</div>
<div id="failureMessage" class="statusMessage"> 
	<p>There was a problem sending your message. Please try again.</p> 
</div>

<form name="contact" id="contactform" action="bin/process.php" method="post">
 <fieldset>
  <input type="text" placeholder="First and Last name, please." name="name" id="name" />
  <label class="error" for="name" id="name_error">This field is required.</label>  
	
  <input type="text" placeholder="Your email goes here" name="email" id="email" />
  <label class="error" for="email" id="email_error">This field is required.</label>  
	
  <textarea type="textarea" placeholder="Comments?" name="comments" id="comments" /> 
  </textarea>

  <label class="error" for="comments" id="comments_error">This field is required.</label>  
	
  <button type="submit" name="submit" class="form_button">Send</button>
 </fieldset>
</form>

Found in index.html | 180

Example

Basic contact form

DOWNLOAD IT

Download the current release: v1.0.1

FORK IT

Tear it apart, blow it up, improve on it, have fun!

Thanks for sending your message! We'll get back to you shortly.

There was a problem sending your message. Please try again.