Published on: 29 February, 2016

Responsive Framework

Posted by andy | 1140 views 2 likes 0 favourites 0 comments
Tumblr Digg Google Plus

What is Responsive?

Responsive is another open source under MIT license for creating a quick and simple responsive website design template.

Why responsive design is popular?

This is due to the popularity of mobiles and tablets access on websites, by implementing responsive design approach, it gives the best and optimal viewing of your site. Imagine to view your site directly on your small mobile screen? It will be difficult to read and see. On the other hand, you probably do not want to spend extra cost to build mobile only site to overcome this issue. So why don't just build a full displayed desktop site that is compatible to smaller screen? This is the reason why we approach responsive design web.

Grid content flexibility

One of the idea to have responsive design is the ability to have grid flexibility of your site content. In this particular case, we are going to use twelve columns format. So why 12 columns but not 15 columns or 20 columns. The reason we choose 12 columns because it is easily divided by 2, 3, 4, or 6 columns. If you choose other numbers, you might come up with less column division result.

12 Columns Grid Formula

Below is the simple formula used to calculate the percentage of the 12 columns grid formula. Note: if you want to change the percentage of the left and right padding, you can simple change number value. Below example is done via Javascript.

//This is the calculation used to generate the percentage value of column grids.
var percentageLeftRight   = 5;   // percentage value
var noOfColumns           = 12;  // no of columns
for(var i = 1; i <= noOfColumns; i++){
var result = ((100 - (((noOfColumns/i)-1) * percentageLeftRight))/noOfColumns) * i;
console.log(result);
}

So how to use this grid?

To use this grid is simple, you just need to include the following div format. To get the full width of 100% percentage, you will need to add up all columns up to 12 columns.

<!-- 1 column rule -->
<div class="row">
	<div class="column column-12">
		12 columns content
	</div>
</div>

<!-- two column rule -->
<div class="row">
	<div class="column column-6">
		6 columns content
	</div>
	<div class="column column-6">
		6 columns content
	</div>
</div>

<!-- custom columns rule -->
<div class="row">
	<div class="column column-4">
		4 columns content
	</div>
	<div class="column column-8">
		8 columns content
	</div>
</div>
1 col
10 col
1 col
2 col
10 col
2 col
3 col
6 col
3 col
4 col
4 col
4 col
5 col
2 col
5 col
6 col
6 col
7 col
5 col
8 col
4 col
9 col
3 col
10 col
2 col
11 col
1 col
12 col

Strawberry Fruits - Free stock photo from http://fotoscopy.com

Wild flowers - Free stock photo from http://fotoscopy.com
Male Female
Male Female

Collection of color buttons

A collection of default color buttons available to use. If you need another color, feel free to grab one of the available color from this Web Button Generator page.

<button class="button">Default Blue</button> 
<button class="green-button">Green Button</button> 
<button class="orange-button">Orange Button</button> 
<button class="red-button">Red Button</button> 
<button class="dark-button">Dark Button</button>

Positioning the menu button for mobile

You can positioning the mobile menu either to the left slide or right slide of by default just a simple slide down. The class represents the position of the menu while the data-action represents what type of slide you want to perform.

<div id="menu-button"></div>

<div id="menu-button" class="left-side" data-action="left-slide"></div>

<div id="menu-button" class="right-side" data-action="right-slide"></div>
		

Example on how to use responsive

Your first sample responsive template.

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="responsive.css">
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<header>
<div id="menu-button"></div>
<div id="logo"><div id="logo-content">RESPONSIVE</div></div>
<div id='nav-panel' class='nav-item left'>
	<ul id="ul-menu" class='nav-menu'>
	   <li><a href='#'><span>Home</span></a></li>
	   <li class='active has-sub'><a href='#'><span>Products</span></a>
		  <ul>
			 <li class='has-sub'><a href='#'><span>Phones</span></a>
				<ul>
				   <li><a href='#'><span>Android Phones</span></a></li>
				   <li class='last'><a href='#'><span>IOS Phones</span></a></li>
				</ul>
			 </li>
			 <li class='has-sub'><a href='#'><span>Printer</span></a>
				<ul>
				   <li><a href='#'><span>Canon</span></a></li>
				   <li class='last'><a href='#'><span>Pixma</span></a></li>
				</ul>
			 </li>
		  </ul>
	   </li>
	   <li><a href='#'><span>News</span></a></li>
	   <li><a href='#'><span>Media</span></a></li>
	   <li><a href='#'><span>About</span></a></li>
	   <li><a href='#'><span>Contact</span></a></li>
	</ul>
</div>
</header>
<div id="container-inside">
<div class="row">
	<div class="column column-4">
		Column Left
	<div class="column column-4">
		Column Mid
	</div>
	<div class="column column-4">
		Column Right
	</div>
</div>
<div class="row">
	<div class="column column-12">
		Full Column
	</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="responsive.js"></script>
<script type="text/javascript">
$(function(){
$.responsive({});
});
</script>
</body>
</html>
		
		

Overwrite responsive.css file

It is recommended that you do not overwrite the responsive.css file, if there is a newer version available, it will not be overwritten by the latest version. In this example, I overwrite the css by including style.css file.

Release Notes

After the release of version 1.1.0, if you do not like the menu navigation, you can omit the responsive script and menu.css completely, what you need to do is to only have one css file which is responsive.css.

Feel free to post your question or comment if you need further helps.

Downloads

Download

Download from Github

Demo

Demo

Demo 2 with mobile menu slide to the left

Demo 3 with mobile menu slide to the right

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.