What is Responsive?
Responsive is another open source 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 = 3; // percentage value
var noOfColumns = 12; // no of columns
for(var i = 1; i <= noOfColumns; i++){
var result = ((100 - (((noOfColumns/i)-1) * percentageLeftRight))/noOfColumns) * i;
}
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>
Ameito eupa ut velo loi neci tismaei keumen velpt lorit eua eto mauriz moriol sipoi vuliputu telli convalit dalis uria estelio etui hatibo dulia aiculi egeto nisio nequi in inim orai frinuilo ratrum ticoduy nequex inhac matio ameto acio ina turipi donei donio ultrico curiosue nibhue fringala duiso dictio welz erati tuxi curab pesetaie sceleris feloxi lacui pras gujial sito egetsi ete comodi diami sito augue ultri vezi eua scelerisu congi menai a valio sondue liebeo turipo adipi dea curio sagita tikoan sotpio idu ursiue velio facilisoe menecoi geio pharetu pele dera at risusu haoti scelosqui ameto ruti aeni nequel timoi goi conviluis solicito dignisa telei nune carai iaculo doi sedoi duo ememper ameto mauri buis palti nuni timon muis.
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.
Feel free to post your question or comment if you need further helps.