Build a Responsive Layout with Skeleton in Blogger - Today I will share a tutorial on how to create responsive template by using Grid of Skeleton Responsive CSS. previously I've shared how to install CSS Skeleton on a blog.
I will explain how to use the Grid of Skeleton for blogs responsive. The grid is a 12-column fluid grid with a max width of 960px.
Example
One
Eleven
Two
Ten
Three
Nine
Four
Eight
Five
Seven
Six
Six
Seven
Five
Eight
Four
Nine
Three
Ten
Two
Eleven
One
<!-- .container is main centered wrapper -->
<div class="container">
<!-- just use a number and class 'column' or 'columns' -->
<div class="row">
<div class="two columns">Two</div>
<div class="ten columns">Ten</div>
</div>
</div>
<!-- Note: columns can be nested, but it's not recommended since Skeleton's grid has %-based gutters, meaning a nested grid results in variable with gutters (which can end up being *really* small on certain browser/device sizes) -->
How to implement the blogger
Add Meta Tag Viewportif the viewport meta tag already exist in the template you use please skip this step
1. First add this code before code
<head>
<meta content='width=device-width, initial-scale=1' name='viewport'/>2. Then Save Template
Add Class Container
1. Find HTML
<div id='outer-wrapper'>2. Add this code
class='container'in HTML Outer-wrapper
<div class='container' id='outer-wrapper'>Now the grid is already active you just add
number-columns on the element which you want to be responsive
Make Main-Wrapper and Sidebar-Wrapper Responsive
This is one of the codes that may be different from the code in your template, so you adjust the existing code in your template
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='width=device-width, initial-scale=1' name='viewport';/>
<b:skin><![CDATA[
.......
]]></b:skin>
</head>
<body>
<!-- Add class='container' in Outer Wrapper or like outer-wrapper -->
<div class='container' id='outer-wrapper'>
<header id='header-wrapper' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WPHeader' role='banner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Blog (Header)' type='Header'/>
</b:section>
</header>
<div id='content-wrapper'>
<!-- you have to adjust the number of columns in the element is not more than 12 columns
example nine columns for main-wrapper and three columns for sidebar
nine column + three column = twelve column
or six colum + six colum = twelve colums
-->
<div class='nine columns' id='main-wrapper' itemscope='itemscope' itemtype='http://schema.org/Blog' role='main'>
<b:section class='main' id='main' showaddelement='no'>
</b:section>
</div>
<div class='three columns' id='sidebar-wrapper' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/WPSideBar' role='complementary'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
</div>
<footer>
<p>Copyright 2016 - Powered by Blogger</p>
</footer>
<div class='clear'/>
</div>
</body>
</html>
so enough of my tutorials if there makes you confused, please comment I'll answer it. I hope this article is helpful to you, thanks.
Reference : Getskeleton, Google Translate