Skeleton is a lightweight framework for CSS . It specifically has two CSS files: the popular normalize.css file and the skeleton.css file.
The grid system of Skeleton is used create responsive website hence it's a most important part if Skeleton. It also provides various basic HTML components such as buttons,lists,tables and forms.
Structure of a Grid!
In the grid their are 12 column fluid grid in Skeleton Framework. It make the responsive design for desktop , tablet , phablet and mobile. Basically in this the grid is divided in such a way that the resulting sum will be equal to 12.
The grid view structure is shown below:
<!-- .container is main centered wrapper -->
<div class="container">
<!-- columns should be the immediate child of a .row -->
<div class="row">
<div class="one column">One</div>
<div class="eleven columns">Eleven</div>
</div>
<!-- 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>
<!-- there are a few shorthand columns widths as well -->
<div class="row">
<div class="one-third column">four</div>
<div class="two-thirds column">eight</div>
</div>
<div class="row">
<div class="one-half column">six</div>
<div class="one-half column">six</div>
</div>
</div>
An example to show the grid view:-
<!DOCTYPE html>
<html>
<head>
<title>Example of grid division</title>
<link rel="stylesheet" type="text/css" href="/home/vibhutisharma/Downloads/Skeleton-2.0.4/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/home/vibhutisharma/Downloads/Skeleton-2.0.4/css/skeleton.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="twelve columns" style="border:groove;">twelve</div>
</div><br>
<div class="row">
<div class="six columns" style="border:groove;">six</div>
<div class="six columns" style="border:groove;">six</div>
</div><br>
<div class="row">
<div class="one-third column" style="border:groove;">four</div>
<div class="two-thirds column" style="border:groove;">eight</div>
</div><br>
<div class="row">
<div class="one-third column" style="border:groove;">four</div>
<div class="one-third column" style="border:groove;">four</div>
<div class="one-third column" style="border:groove;">four</div>
</div><br>
<div class="row">
<div class="three columns" style="border:groove;">Three</div>
<div class="three columns" style="border:groove;">Three</div>
<div class="three columns" style="border:groove;">Three</div>
<div class="three columns" style="border:groove;">Three</div>
</div><br>
</div>
</body>
</html>
Skeleton also provides extra classes for offsetting our columns such as (e.g.offset-by-two) whose aim is to to increase the space between the column.
Code for using offset class:-
<div class="container">
<div class="row">
<div class="offset-by-two eight columns">
<ul>
<!-- list here... -->
</ul>
</div>
</div>
</div>
Below is the simple example to show offset column:-
<!DOCTYPE html>
<html>
<head>
<title>Example of offset columns</title>
<link rel="stylesheet" type="text/css" href="/home/vibhutisharma/Downloads/Skeleton-2.0.4/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/home/vibhutisharma/Downloads/Skeleton-2.0.4/css/skeleton.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="eight columns offset-by-two" style="border:1px solid green";>
<h1> This is an offset column.</h1>
</div>
</div>
<div class="row">
<div class="six columns offset-by-six" style="border:2px solid red";>
<h2>This is a offset column by six.</h2>
</div>
</div>
</div>
</body>
</html>
Depending upon the viewport width the container takes the required width in percentage. The table below shows the possible values:-
| Viewport Width |
Container Width |
| <400px |
100% |
| ≥ 400px |
85% |
| ≥ 550px |
80% |
Conclusion:- skeleton being a popular front-end-framework uses grid system for creating Responsive templates for the websites.
Note:-Other than just grid view skeleton also works over media queries,utilities,forms,tables,lists with new basic code and table styling.
0 Comment(s)