Responsive CSS grid, fluid grid layouts

Grid

The main part of the framework is the fluid grid system. The grid is based on CSS and it is cross-browser. Due to its flexible character, the grid ensures a mobile-friendly page layout on any mobile device.

The default grid size is 940px: twelve 60px wide columns and 20px wide gutters between the columns. The result is a 940px wide container while the size of the columns is based on percentages. The grid is fully customizable, each parameter (column number, column width, gutter) can be changed with a few clicks by using the online grid editor panel.

The grid has two base elements: rows and columns. Rows contain the columns and determine the maximum width for the content. Columns determine the actual structure for the content.

Important! Every part of the page content must be placed in a row and column else the grid will not work properly.

When the browser window is resized or the screen resolution is smaller than the maximum width of the page, the columns and gutters will be resized. When the screen resolution/window size is smaller than 768px, the grid switches to mobile view and the columns of each row will be placed below each other with a width of 100%. The height of the columns is auto, it is always set by the content of the columns.

Simple usage

1. Download the latest version of Jumpeye framework from the Free version page or from your account (My account -> My downloads).

2. Extract the content of the package. It is recommended to preserve the structure of the framework in your project, but it is not mandatory.

3. Create an HTML file and include in the <head> tag the required JS and CSS files.

<html>
    <head>
        // For mobile devices include the viewport meta tag
        <meta name='viewport' content='width=device-width, initial-scale=1.0;' />

        // Include the grid css file
        <link rel="stylesheet" href="/css/JFGrid.css" />

        // Include the core file of the framework
        <script type="text/javascript" src="/js/JFCore.js"></script>
    </head>
</html>

4. After the required files are included, in the <body> tag create a div with the class container. This element will contain the rows. Inside the container div we create a div with class row. In the code below the row contains two div tags with class columns. The first have a width of 3 (grid_3) columns and the second 9 (grid_9) columns.

<html>
    <head>
    ...
    </head>

    <body>
        // First of all create a container element using the container class
        <div class="container">
            // Create a row element for a part of content what you want to display in a row using the row class
            <div class="row">
                // Create a 3 columns wide div element for the vertical menu using the grid_3 columns classes
                <div class="grid_3 columns">
                    Vertical menu
                </div>
                // Create a 9 columns wide div element for the content using the grid_9 columns classes
                <div class="grid_9 columns">
                   Content
                </div>
            </div>
            ...
        </div>
    </body>
</html>

Nested columns

The grid allows the usage of nested columns, because the width of the columns is based on percentages. You can create complex layouts placing a row element in a column element. Below you can see an example of nested grid usage:

Columns

Below you can see some examples of how to organize your content using the default 12-columns grid system. Use the grid_1 column, ..., grid_12 columns to set the size for the <div> tags.

One

Eleven

Two

Ten

Three

Nine

Four

Eight

Five

Seven

Six

Seven

Five

Eight

Four

Nine

Three

Ten

Two

Eleven

One

<div class="container">
	<div class="row">
		<div class="grid_1 column">One</div>
		<div class="grid_11 columns">Eleven</div>
	</div>
	
	<div class="row">
		<div class="grid_2 column">Two</div>
		<div class="grid_10 columns">Ten</div>
	</div>
	
	<div class="row">
		<div class="grid_3 column">Three</div>
		<div class="grid_9 columns">Nine</div>
	</div>
	
	<div class="row">
		<div class="grid_4 column">Four</div>
		<div class="grid_8 columns">Eight</div>
	</div>
	
	<div class="row">
		<div class="grid_5 column">Five</div>
		<div class="grid_7 columns">Seven</div>
	</div>
	
	<div class="row">
		<div class="grid_6 column">Six</div>
		<div class="grid_6 columns">Six</div>
	</div>
	
	<div class="row">
		<div class="grid_7 column">Seven</div>
		<div class="grid_5 columns">Five</div>
	</div>
	
	<div class="row">
		<div class="grid_8 column">Eight</div>
		<div class="grid_4 columns">Four</div>
	</div>
	
	<div class="row">
		<div class="grid_9 column">Nine</div>
		<div class="grid_3 columns">Three</div>
	</div>
	
	<div class="row">
		<div class="grid_10 column">Ten</div>
		<div class="grid_2 columns">Two</div>
	</div>
	
	<div class="row">
		<div class="grid_11 column">Eleven</div>
		<div class="grid_1 columns">One</div>
	</div>
</div>

Offsets

You can insert extra space between the columns in a row. Use the offset_1, ..., offset_10 classes to place one column wide or more space between two columns.

One

One columns offset

One

Two columns offset

One

Three columns offset

One

Four columns offset

One

Five columns offset

One

Six columns offset

One

Seven columns offset

One

Eight columns offset

<div class="container">
	<div class="row">
		<div class="grid_1 column">One</div>
		<div class="grid_3 columns offset_1">One column offset</div>
	</div>
	
	<div class="row">
		<div class="grid_1 column">One</div>
		<div class="grid_3 columns offset_2">Two columns offset</div>
	</div>
	
	<div class="row">
		<div class="grid_1 column">One</div>
		<div class="grid_3 columns offset_3">Three columns offset</div>
	</div>
	
	<div class="row">
		<div class="grid_1 column">One</div>
		<div class="grid_3 columns offset_4">Four columns offset</div>
	</div>
	
	<div class="row">
		<div class="grid_1 column">One</div>
		<div class="grid_3 columns offset_5">Five columns offset</div>
	</div>
	
	<div class="row">
		<div class="grid_1 column">One</div>
		<div class="grid_3 columns offset_6">Six columns offset</div>
	</div>
	
	<div class="row">
		<div class="grid_1 column">One</div>
		<div class="grid_3 columns offset_7">Seven columns offset</div>
	</div>
	
	<div class="row">
		<div class="grid_1 column">One</div>
		<div class="grid_3 columns offset_8">Eight columns offset</div>
	</div>
</div>

Push and pull

You can push or pull columns using the push_1, ..., push_11 and pull_1, ..., pull_11 classes.

Three columns - no push

Push one column

Push two columns

Push three columns

Push four columns

Push five columns

Push six columns

Push seven columns

Push eight columns

Push nine columns

<div class="container">
	<div class="row">
		<div class="grid_3 columns">Three columns - no push</div>
	</div>
	
	<div class="row">
		<div class="grid_3 columns push_1">Push one column</div>
	</div>
	
	<div class="row">
		<div class="grid_3 columns push_2">Push two columns</div>
	</div>
	
	<div class="row">
		<div class="grid_3 columns push_3">Push three columns</div>
	</div>
	
	<div class="row">
		<div class="grid_3 columns push_4">Push four columns</div>
	</div>
	
	<div class="row">
		<div class="grid_3 columns push_5">Push five columns</div>
	</div>
	
	<div class="row">
		<div class="grid_3 columns push_6">Push six columns</div>
	</div>
	
	<div class="row">
		<div class="grid_3 columns push_7">Push seven columns</div>
	</div>
	
	<div class="row">
		<div class="grid_3 columns push_8">Push eight columns</div>
	</div>
	
	<div class="row">
		<div class="grid_3 columns push_9">Push nine columns</div>
	</div>
</div>