Version: 0.3  (Last Updated: 10/2/2011 - 18:55)

Why do you use ResponsyGs ?

Currently, all responsive grid systems work same: When screen width gets narrow, right most block swaps left, one row below...








When screen width gets more narrow, right most block swaps left, one row below, again... Many time this is not desirable situation...

You want to change the sequence of blocks when screen gets narrow. Now, with ResponsyGs, you may order your blocks what you desire... For a just fun, even like above....

Features

With ResponsyGs

  • A solution for "Adaptive Images" also,
  • No Flickering,
  • You need only one css file for any window sizes,
  • No need LESS or same solutions,
  • No need CSS3 Media Queries,
  • Less than 3KB with media.css for using responsive and adaptive images,
  • HTML5 compatible,
  • IE6 compatible.
  • User callback: execute user function before completed all job,
  • You may use ResponsyGs with many (Responsive) Grid Systems.
Plugin Using

$.fn.responsygs (UserTemplate, UserFunction);

 UserTemplate is an array. You define your blocks(div, header, section, footer, etc) and their class/clases for different screen sizes.

UserFunction is a function. It's optional. If you define, this function is executed before completed ResponsyGs.

ResponsyGs Samples

This site developed by Ajaxway 2-16 Column Based Grid System(you may get detail info about grid system from this link) And ResponsyGs. You may test this site with resizing your browser window. It becomes to one column when window size is less than 500px.

Also a bordered sample. You may test this sample with resizing your browser window.

Also a html5 sample. You may test this sample with resizing your browser window.

How do you use ResponsyGs ?

For using ResponsyGs;

1. download ResponsyGs.js and than add jQuery and ResponsyGs.js plugin links to your html's head section. ResponsyGs.js must be in head section:

<script type="text/javascript" src="path/jquery-1.6.3.min.js"></script>
<script type="text/javascript" src="path/jquery.responsygs-min.js"></script>

2. For responsive images; if you don't use Ajaxway 2-16 Column Based Grid System include media.css to your html's head section;

<link rel="stylesheet" type="text/css" media="all" href="css/media.css" />

and than define one of p5 to p100 classes for your images.

3. Let's define plugin parameters and plugin call for inital and window resize

<script type="text/javascript">
$(document).ready(function() {
  var mysels = [
       '800, #container, #header, #left, #center, #right, #footer',
       '480, #container, #header, #left, #center, #right, #footer',
       '0, #container, #header, #left, #center, #right, #footer'
       ]

  $.fn.responsygs(mysels);

  $(window).resize(function() {
       $.fn.responsygs(mysels);
  });
});
</script>


For adaptive images:

Use "src" attrribute with selector, like this:

'800, #logo src=images/logo.png'
....
'480, #logo src=images/logo2.png'
....
'0, #logo src=images/logo3.png'
....

and define your images at html for example like this:

<img   id='logo'   src=''   class='p100'   />
Class "p100" is defined at media.css as width=100%. It means that width will be 100% of parent's width. You must define media's width as percent.

Let's explain array's elements one by one:

'800, #container, #header, #menu, #left, #center, #right, #footer'

First parameter(800 at this sample) defines that this line is valid when window size equal or greater than this value.

Second parameter is always parent block's(div or html5 block tags) id.

Other array values are child block's identifiers that they will been shown with these defined sequences.

At above sample, 'header' will be displayed, than 'menu',.... etc.

At child parameters, you may define child's new class or classes. For example:

..., #left=class1 class2, #center=class3, #right=class4,...

If you define class, present class or classes will be removed and this class or classes will be added.

You may declare(actually you will be forced by your design) more than one line for a specific width:

'480, #container, #header, #menu, #center=col6, #left=col4 last, #right=col4, #fivecol, #footer',
'480, #fivecol > div=col5',
'480, #left img=p30',
'480, #right img=p15',
'480, #topmenu=col10 font05',
....

 The other lines after line of a specific window's width are just to declare new class or classes for a specific selector or to order inner divs of child element. You may use any jQuery selector.

For adaptive media:

Use "src" attrribute for images, embed, video source or 'data' for object source, with selector, like this:

'800, #show src=media/show-640x480.webm'
....
'480, #show src=media/show-480x320.webm'
....
'0, #show src=media/show-320x240.webm'
....

and define your media at html for example like this:

<video id="video" class="media1" controls="controls" class="p100">
   <source id="show" src="" type='video/webm; codecs="vorbis,vp8"'></source>
</video>


Download ResponsyGs

Just ResponsyGs.js (developer and minified versions with media.css for responsive images).

ResponsyGs with all samples.

Send Comment or Read Comments

Read Comments

Send Your Comment