Create Account
  • You are here:
  • Home
  • Typography
  • Core
  • Columns

 

Our website is currently under development and keep uploading a kind of contents.

Please subscribe to our newsletter at the bottom of the page to get information about the latest news.

 

RESPONSIVE COLUMNS
 
grid 12
grid 11
grid 1
grid 10
grid 2
grid 9
grid 3
grid 8
grid 4
grid 7
grid 5
grid 6
grid 6
grid 4
grid 4
grid 4
grid 3
grid 3
grid 3
grid 3
grid 5
grid 4
grid 3
 
GET CODE
<div class="jf_col grid_12 last-column">grid 12</div>
<div class="jf_col grid_11">grid 11</div>
<div class="jf_col grid_1 last-column">grid 1</div>
<div class="jf_col grid_10">grid 10</div>
<div class="jf_col grid_2 last-column">grid 2</div>
<div class="jf_col grid_9">grid 9</div>
<div class="jf_col grid_3 last-column">grid 3</div>
<div class="jf_col grid_8">grid 8</div>
<div class="jf_col grid_4 last-column">grid 4</div>
<div class="jf_col grid_7">grid 7</div>
<div class="jf_col grid_5 last-column">grid 5</div>
<div class="jf_col grid_6">grid 6</div>
<div class="jf_col grid_6 last-column">grid 6</div>
<div class="jf_col grid_4">grid 4</div>
<div class="jf_col grid_4">grid 4</div>
<div class="jf_col grid_4 last-column">grid 4</div>
<div class="jf_col grid_3">grid 3</div>
<div class="jf_col grid_3">grid 3</div>
<div class="jf_col grid_3">grid 3</div>
<div class="jf_col grid_3 last-column">grid 3</div>
<div class="jf_col grid_5">grid 5</div>
<div class="jf_col grid_4">grid 4</div>
<div class="jf_col grid_3 last-column">grid 3</div>
 
FLUID COLUMNS
 

2/3

1/3

2/3

1/3

1/5

1/5

1/5

1/5

1/5

1/6

1/6

1/6

1/6

1/6

1/6

1/7

1/7

1/7

1/7

1/7

1/7

1/7

1/8

1/8

1/8

1/8

1/8

1/8

1/8

1/8

1/4

1/2

1/4

 
GET CODE
<div class="jf_fluid">
	<div class="col-2-3">
		<div class="module"><h3>2/3</h3></div>
	</div>
	<div class="col-1-3 last">
		<div class="module"><h3>1/3</h3></div>
	</div>
</div>

<div class="jf_fluid">
	<div class="col-2-3">
		<div class="module"><h3>2/3</h3></div>
	</div>
	<div class="col-1-3 last">
		<div class="module"><h3>1/3</h3></div>
	</div>
</div>

<div class="jf_fluid">
	<div class="col-1-5">
		<div class="module"><h3>1/5</h3></div>
	</div>
	<div class="col-1-5">
		<div class="module"><h3>1/5</h3></div>
	</div>
	<div class="col-1-5">
		<div class="module"><h3>1/5</h3></div>
	</div>
	<div class="col-1-5">
		<div class="module"><h3>1/5</h3></div>
	</div>
	<div class="col-1-5 last">
		<div class="module"><h3>1/5</h3></div>
	</div>
</div>

<div class="jf_fluid">
	<div class="col-1-6">
		<div class="module"><h3>1/6</h3></div>
	</div>
	<div class="col-1-6">
		<div class="module"><h3>1/6</h3></div>
	</div>
	<div class="col-1-6">
		<div class="module"><h3>1/6</h3></div>
	</div>
	<div class="col-1-6">
		<div class="module"><h3>1/6</h3></div>
	</div>
	<div class="col-1-6">
		<div class="module"><h3>1/6</h3></div>
	</div>
	<div class="col-1-6 last">
		<div class="module"><h3>1/6</h3></div>
	</div>
</div>

<div class="jf_fluid">
	<div class="col-1-7">
		<div class="module"><h3>1/7</h3></div>
	</div>
	<div class="col-1-7">
		<div class="module"><h3>1/7</h3></div>
	</div>
	<div class="col-1-7">
		<div class="module"><h3>1/7</h3></div>
	</div>
	<div class="col-1-7">
		<div class="module"><h3>1/7</h3></div>
	</div>
	<div class="col-1-7">
		<div class="module"><h3>1/7</h3></div>
	</div>
	<div class="col-1-7">
		<div class="module"><h3>1/7</h3></div>
	</div>
	<div class="col-1-7 last">
		<div class="module"><h3>1/7</h3></div>
	</div>
</div>

<div class="jf_fluid">
	<div class="col-1-8">
		<div class="module"><h3>1/8</h3></div>
	</div>
	<div class="col-1-8">
		<div class="module"><h3>1/8</h3></div>
	</div>
	<div class="col-1-8">
		<div class="module"><h3>1/8</h3></div>
	</div>
	<div class="col-1-8">
		<div class="module"><h3>1/8</h3></div>
	</div>
	<div class="col-1-8">
		<div class="module"><h3>1/8</h3></div>
	</div>
	<div class="col-1-8">
		<div class="module"><h3>1/8</h3></div>
	</div>
	<div class="col-1-8">
		<div class="module"><h3>1/8</h3></div>
	</div>
	<div class="col-1-8 last">
		<div class="module"><h3>1/8</h3></div>
	</div>
</div>

<div class="jf_fluid">
	<div class="col-1-4">
		<div class="module"><h3>1/4</h3></div>
	</div>
	<div class="col-1-2">
		<div class="module"><h3>1/2</h3></div>
	</div>
	<div class="col-1-4 last">
		<div class="module"><h3>1/4</h3></div>
	</div>
</div>
 
FLUID COLUMNS - WITH NO "PADDINGS"
 

2/3

1/3

2/3

1/3

1/5

1/5

1/5

1/5

1/5

1/6

1/6

1/6

1/6

1/6

1/6

1/7

1/7

1/7

1/7

1/7

1/7

1/7

1/8

1/8

1/8

1/8

1/8

1/8

1/8

1/8

1/4

1/2

1/4

 
GET CODE
<div class="jf_fluid no_paddings">
	<div class="col-2-3">
		<div class="module"><h3>2/3</h3></div>
	</div>
	<div class="col-1-3">
		<div class="module"><h3>1/3</h3></div>
	</div>
</div>

<div class="jf_fluid no_paddings">
	<div class="col-2-3">
		<div class="module"><h3>2/3</h3></div>
	</div>
	<div class="col-1-3">
		<div class="module"><h3>1/3</h3></div>
	</div>
</div>

<div class="jf_fluid no_paddings">
	<div class="col-1-5">
		<div class="module"><h3>1/5</h3></div>
	</div>
	<div class="col-1-5">
		<div class="module"><h3>1/5</h3></div>
	</div>
	<div class="col-1-5">
		<div class="module"><h3>1/5</h3></div>
	</div>
	<div class="col-1-5">
		<div class="module"><h3>1/5</h3></div>
	</div>
	<div class="col-1-5">
		<div class="module"><h3>1/5</h3></div>
	</div>
</div>

<div class="jf_fluid no_paddings">
	<div class="col-1-6">
		<div class="module"><h3>1/6</h3></div>
	</div>
	<div class="col-1-6">
		<div class="module"><h3>1/6</h3></div>
	</div>
	<div class="col-1-6">
		<div class="module"><h3>1/6</h3></div>
	</div>
	<div class="col-1-6">
		<div class="module"><h3>1/6</h3></div>
	</div>
	<div class="col-1-6">
		<div class="module"><h3>1/6</h3></div>
	</div>
	<div class="col-1-6">
		<div class="module"><h3>1/6</h3></div>
	</div>
</div>

<div class="jf_fluid no_paddings">
	<div class="col-1-7">
		<div class="module"><h3>1/7</h3></div>
	</div>
	<div class="col-1-7">
		<div class="module"><h3>1/7</h3></div>
	</div>
	<div class="col-1-7">
		<div class="module"><h3>1/7</h3></div>
	</div>
	<div class="col-1-7">
		<div class="module"><h3>1/7</h3></div>
	</div>
	<div class="col-1-7">
		<div class="module"><h3>1/7</h3></div>
	</div>
	<div class="col-1-7">
		<div class="module"><h3>1/7</h3></div>
	</div>
	<div class="col-1-7">
		<div class="module"><h3>1/7</h3></div>
	</div>
</div>

<div class="jf_fluid no_paddings">
	<div class="col-1-8">
		<div class="module"><h3>1/8</h3></div>
	</div>
	<div class="col-1-8">
		<div class="module"><h3>1/8</h3></div>
	</div>
	<div class="col-1-8">
		<div class="module"><h3>1/8</h3></div>
	</div>
	<div class="col-1-8">
		<div class="module"><h3>1/8</h3></div>
	</div>
	<div class="col-1-8">
		<div class="module"><h3>1/8</h3></div>
	</div>
	<div class="col-1-8">
		<div class="module"><h3>1/8</h3></div>
	</div>
	<div class="col-1-8">
		<div class="module"><h3>1/8</h3></div>
	</div>
	<div class="col-1-8">
		<div class="module"><h3>1/8</h3></div>
	</div>
</div>

<div class="jf_fluid no_paddings">
	<div class="col-1-4">
		<div class="module"><h3>1/4</h3></div>
	</div>
	<div class="col-1-2">
		<div class="module"><h3>1/2</h3></div>
	</div>
	<div class="col-1-4">
		<div class="module"><h3>1/4</h3></div>
	</div>
</div>