Rows And Columns >1. Download from latest release. click here
2. Paste all files in any folder and link them to your document.
3. You can link - <script type="module" src="rowcolumn.js"> </script> - to head of your html file or single file <script type="text/javascript" src="prototypeSyntax.js"> </script>
4. Start making grid websites easily.
Rows & columns is a javascript framework based on line placement of CSS grid which gives supercontrol over children <div> . Unlike others, this is completely two dimensional which helps in making grids without using many ` <div> `. You can also use this on html besides native coding in javascript which eliminates the excessive use of <div class='row' > or <div class='column' > . It can be very useful for making layouts and reducing the CSS code.
<div layout="(100).splits(30, (70).splits(30.splits(50, 50, 'parallel'), 70, 'parallel'), 'perpendicular')">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
The above codes make two columns: left column and right column, and two rows each in the right column similar to -
<div class="col">
<div></div>
<div class="row">
<div></div>
<div class="row">
<div></div>
<div></div>
</div>
</div>
</div>
Messy, as you can see no nesting and width-height is required.
Many people don't like to use framework and make custom layouts and design, but sometimes to make a grid becomes headache - the nesting and look for div and section. CSS Grid provides a great alternative to avoid making one dimensional columns and rows and this gives way better management and rediting the HTML. Many people also don't know basic designing
This framework is made to make better design and use minimum efforts as possible.
Lets start with making rows columns in ` <div> `. On parent ` <div> ` create a ` layout ` attribute like this `<div layout="...">`. The row-column codes will be written inside the layout attribute.
Then when someone calls ` splits() ` function on any number inside the layout attribute which takes currently 3 arguments called left, right and direction like ` splits(left, right, direction) `, the first two parameters will divide the number into two parts or a ` <div> ` into two parts. The last direction parameter takes direction `perpendicular` or `parallel` which basically means divide a line(Number) into two parts vertically or horizontally or arrange two ` <div> ` in either rows or columns.
You can call this function like the example `(100).splits(60, 40, 'perpendicular')`. Here (100) is divided into two parts of 60 and 40 in perpendicular direction to make columns, look the function again to understand. The (100) or parent value defines the width and height of the parent ` <div> ` which is dividing the rectangle/square into two parts. Number(100) will automatically set the divs width and height to `100%` and `100vh` respectively. Number(100) represents the height and width of the parent <div>(Full screen <div>).
Note: You can also set custom width and height
To divide into three parts, divide any resultent div into two parts - very simple. Example `(100).splits(60, (40).splits(20, 20 ,'perpendicular'), 'perpendicular')". Here (100) is divided into two parts of 60 and 40 and then again (40) is divided into two parts of 20 and 20 in perpendicular direction to make columns. Likewise you can divide any number to as many parts you want in any direction to make columns and rows.
You can also make any desired number of columns and rows. There is no restriction to make 12 columns.For example to make 10 columns we just have to do like `<div layout="(100).splits(2, 8, 'perpendicular')">` this will make two columns of 10 divided into 2 and 8. Notice the third parameter `perpendicular` which is passed as a string tells us to divide any number column wise.
<div layout="(100).splits(2,(8),'perpendicular')">
<div></div>
<div></div>
</div>
You can also divide the columns further, let's say to divide the number or rectangular display of any `div` further, we do ` <div layout="(100).splits(2, (8).splits(2, (6), 'perpendicular'), 'perpendicular')">`. You can also divide as many columns as we you want.
<div layout="(100).splits(2, (8).splits(2, (6), 'perpendicular'),'perpendicular')">
<div></div>
<div></div>
<div></div>
</div>
You can also divide as many columns as we you want.
Similary to make rows just change the direction to `parallel` like `<div layout="(100).splits(2,8,'parallel')">` you can always make as many rows you want
Below is the exaple to make three rows of min-height 20vh, 20vh and 60vh, the max-height is always auto
<div layout="(100).splits(2, (8).splits(2, (6), 'parallel'),'parallel')">
<div></div>
<div></div>
<div></div>
</div>
Here is the important part of the framework, you can always call nested function in any direction you want which makes the framework 2 dimensional and making grids very easy.
<div layout="(100).splits(3, (7).splits(3, 7, 'parallel'),'perpendicular')">
<div></div>
<div></div>
<div></div>
</div>
The above function demonstrates to make grid. But this time we made columns and rows of 10 into 3 and 7 parts.
You see this time numbers are changed a litte. Here we divide the children <div></div> by calling splits() function on parent. Then Number(100) is divided into two parts of having leftside 3 and rightside 7 of 100. We have <div> of width 30 and 70 with height of 100vh again we divide the right <div> into two parts horizontally in ratio of 30 and 70 which is same as 3 and 7. Hence right side is being split into two parts.
So calling <div layout="(100).splits(30,(70).splits(30,70,'parallel'),'perpendicular')"> is same as <div layout="(100).splits(3, (7).splits(3, 7, 'parallel'), 'perpendicular')">
There is no limit of splitting any div into rows or column. In above example we saw to make columns and rows of 10 spliting into two columns or rows which is on Number(100).splits().
The above example is just for explaination. We can make any number of custom rows and columns. To make columns of 12 we just have to do simple maths. Before doing that first understand the rational division. To divide a number into two equal parts to make two columns we just call it like <div layout="(100).splits(1/2, (1/2), 'perpendicular')">. And to to make three columns we call recursively <div layout="(100).splits(1/3,(2/3).splits(1/2, (1/2), 'perpendicular')">. Now make 2 equal columns of 12 like 3/12 and 9/12
<div> width height to 100 by calling Number(100).splits()3/12 and 9/12 which will give first 3 parts of 12 and second 9 parts of 12.
<div layout="(100).splits(3/12, (9/12), 'perpendicular')">
<div></div>
<div></div>
</div>
We are always dividing a square <div> into either horizontally or vertically in only two parts. Do not forget we can also divide recursively.
To make 12 equal columns we have to call the function 11 times which is very lengthy therefore we have already designed a function which will call the splits() function 12 times.
<div layout="(100).splits(1/12, (11/12).splits(1/11, (10/11).splits(1/10, (9/10).splits(1/9, (8/9).splits(1/8, (7/8).splits(1/7, (6/7).splits(1/6, (5/6).splits(1/5, (4/5).splits(1/4, (3/4).splits(1/3, (2/3).splits(1/2, (1/2), 'perpendicular'), 'perpendicular'), 'perpendicular'), 'perpendicular'), 'perpendicular'), 'perpendicular'), 'perpendicular'), 'perpendicular'), 'perpendicular'), 'perpendicular'), 'perpendicular')">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div layout="(100).col(12)">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Calling function like (100).col(12) has an end point, this means you cannot further divide the columns anymore.
In splitting any rational number remember the denominator of child must be same to the numerator of the parent, this is just an exception, but to make perfect column you should follow this. Example:Here `<div layout="(100).splits(4/10, 6/10, 'perpendicular')">` parent is being split in two parts into left side and right side in perpendicular or vertical direction
Number(100) represents the height and width of the parent <div>(Full screen <div>). Now let's try to change to Number(50). Now the screen will be 1/4 of the parent i.e. 50 in height and width. Each time we call splits() we are locked the to make custom width and height. Let's suppose we don't want make the <div> of same height and width, we just need pass the an array as a forth argument in splits() function like Number.splits(Number, Number, 'direction',[100, 50]) here the forth argument is Array and Array[0] is width and Array[1] is height.
<div layout="(100).splits(50,50,'perpendicular',[100,50])">
<div></div>
<div></div>
</div>
Although you can use any numbers but there are already predefined number variables already proportioned in golden ratio to give modern division. You should definitely use them in making rows and columns.
<script>
const parent = 100
const lg = 61.2;
const sm = 38.8
parent.splits(lg, sm, 'perpendicular')
</script>
<div layout="(100).splits(lg.splits(lg.splits(lg,sm,'perpendicular'),sm.splits(sm,lg,'perpendicular'),'parallel'), sm.splits(sm.splits(lg,sm,'parallel'),lg.splits(lg.splits(lg,sm,'parallel'),sm,'perpendicular'),'parallel'),'perpendicular',[100,60])">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
You can make as many rows and columns row, but making rows and columns in specific way by using custom numbers will gove more aesthetics to your websites. As this framework is focused on design, without any extra efforts you can use this framework to make attractive layouts with any design principles.
<div layout="(100).splits(lg,sm.splits(lg,sm.splits(sm.splits(sm.splits(lg,sm.splits(lg,sm.splits(sm.splits(sm,lg,'parallel'),lg,'perpendicular'),'parallel'),'perpendicular'),lg,'parallel'),lg,'perpendicular'),'parallel'),'perpendicular',[100,61.2])">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div layout="(100).splits(sm.splits(lg.row(5),sm,'perpendicular'),sm.splits(sm,lg.row(5),'perpendicular'),'perpendicular',[100,sm])">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div layout="(100).splits(sm,lg.splits(sm,lg.splits(sm,lg.splits(sm,lg.splits(sm,lg.splits(sm,lg.splits(sm,lg.splits(lg,sm,'perpendicular'),'perpendicular'),'perpendicular'),'perpendicular'),'perpendicular'),'perpendicular'),'perpendicular'),'perpendicular',[100,sm])">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Note:Customising width does not make many sence because if you are changing the width it means you want to place any div in right side.
Often, we find grids are not arranged in order when calling splits() function recursively this happens because it follows declarative syntax or sometimes we want to offset a <div> or complete removal of <div> without affecting the grid layout. There are total 5 utility functions which help modify the <div> in every aspect. To use this you must know how CSS is applied using javascript.
There is an add() method which takes function() in its arguments. We can simply call it in splits() like (100).splits(lg, sm, 'perpendicular').add()
When we divide the left side like (100).splits(lg.splits(lg, sm, 'perpendicular'), sm, 'perpendicular') we see <div>s are not arranged in order. So order() method can be passed inside the add() to arrange and align all <div> in ascending order. It can be called like this(100).splits(lg.splits(lg, sm, 'perpendicular'), sm, 'perpendicular')
Before without order()
<div layout="(100).splits(lg.splits(lg, sm, 'perpendicular'), sm, 'perpendicular',[100,10])">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
After with order()
<div layout="(100).splits(lg.splits(lg, sm, 'perpendicular'), sm, 'perpendicular',[100,10]).add(order())">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
offset() method is very useful in layout making can be passed inside the add() to offset from the grid. It has arguments to be passed, to use offset() simply call like
Before
<div layout="parent.splits(lg.splits(sm, lg, 'parallel'),sm.splits(lg, sm, 'parallel'), 'perpendicular',[100,50])">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
After
<div layout="parent.splits(lg.splits(sm, lg, 'parallel'),sm.splits(lg, sm, 'parallel'), 'perpendicular',[100,50]).add(offset(0, 3),order())">
<div>2</div>
<div>3</div>
</div>
Using splits().add(offset(0,3) will remove the first and last div from the above code. Always remember it starts with zero.
Using property you are able to do everything what CSS does. You can simply add any CSS property to parent like the width, height, font-weight, padding, margin anything which css uses.
The best case of using property is to add gap property in the parent div, this will give gap to grid, to use we splits().add(property( 'gap', '10px' ))
<div layout="parent.splits(lg.splits(sm, lg, 'parallel'),sm.splits(lg, sm, 'parallel'), 'perpendicular').add(property('gap','10px'))">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
We can always use multiple utility functions to add multiple properties separated by comma, Number.splits().add(property('gap', '10px'), property('margin', '0px 50px'))
Similar to the property() function we can also apply any CSS property to children <div> which hence gives supercontrol to parent. This function is also very useful. Sometimes we don't want to display a div - surely you can do this through CSS - but there is an option to apply any property to children properties.
To use this you have to select a range of <div>s or evn one and apply to any single or every <div> Number.splits().add(childProperty('display', 'none', 3, 8)) the last two arguments are range to select from and to. Here we select 3rd to 8th <div> and applying the property display: none. To select only one you can do Number.splits().add(childProperty('display', 'none', 0, 1)) from 0 to 1 here we have selected only first <div>.
<div layout="parent.splits(lg.splits(sm, lg, 'parallel'),sm.splits(lg, sm, 'parallel'), 'perpendicular').add(property('gap','10px'),childProperty('background-color','lightsalmon',3,4))">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
This function has two arguments first window.matchMedia can be like (max-wdth: 700px) and second is new layout it can be like (100).splits(3/12, (9/12), 'perpendicular'). You can use this function to make responsive design just target a screen and layout. Remember to pass it always as a string.
To use this we just do Number.splits().add(breakpoint('(max-wdth: 700px)', '(100).splits(3/12,(9/12),'perpendicular')'))
JS
<script>
const leftside = lg.splits(sm, lg, 'parallel')
const rightside = sm.splits(lg, sm, 'parallel')
const layoutMobile = parent.splits(leftside, rightside, 'perpendicular')
</script>
HTML
<div layout="parent.splits(lg, sm, 'perpendicular').add(breakpoint('(max-wdth: 700px)', layoutMobile),childProperty('display','none',2,4))">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
You can always use multiple utility functions inside add()
This framework is just to simplify the layout and positioning so it does not have any UI component like buttons form inputs etc if you know styling then it is okay otherwise css is included in the same folder. It has already display set to flex and has classes. .bl,.tl,.br,.tr,.bc,.tc,.lc,.rc,.cc abbreviation b = bottom, r = right, c = center and t = top can be used in need.
You can give any breakpoints by calling breakpoint() using ulitity function like Number.splits().add(breakpoint('(max-wdth: 700px)', '(100).splits(3/12, (9/12), 'perpendicular')')) where the function takes two arguments breakpoint(window.matchMedia, newLayout) first window.matchMedia can be like (max-wdth: 700px) and second is new layout it can be like (100).splits(3/12,(9/12),'perpendicular') . As this framework is only designed to create layouts not UI elements, you will have to make buttons forms etc and customise it or you can use any other frameworks' UI like Bootstrap, Material design, Bulma, Ant Design etc.
<div layout="parent.splits(lg, sm, 'perpendicular').add(childProperty('display','none',2,4),breakpoint('(max-width: 700px)', parent.splits(lg.splits(sm, lg, 'parallel'), sm.splits(lg, sm, 'parallel'), 'perpendicular')))">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
This framework only has two breakpoints natively are (orientation: portrait) and (orientation: landscape), It is upto you to make any breakpoint.
There are only few useful classes recommended for layout making and positioning.l-bl,.l-tl,.l-br,.l-tr,.l-bc,.l-tc,.l-lc,.l-rc,.l-cc for landscape mode
.p-bl,.p-tl,.p-br,.p-tr,.p-bc,.p-tc,.p-lc,.p-rc,.p-cc for portrait mode.
abbreviation b = bottom, r = right, c = center and t = top
Note: You will have to refresh the browser to get the layout if you use orientation