When we mention patterns, we come across many programming language patterns like MVC, Gang Of Four, Repository, and many others. They are called design patterns. And when used in programming, they help write and complete projects, small and big, faster than usual, because in each pattern, a system is defined, by which one can successfully come to desired results and achieve the best optiomal end-result.
Fibonacci Sequence, or golden ratio spiral,can be observed in spirals in nature.The man who observed this sequence is Fibonacci. This sequence looks something like this: 1,1,2,3,5,8 … The next number is the sum of previous two. The formula is F(n) = F(n-1) + F(n-2). And the golden ratio of dividing upper number by previous saller number is always 1.61803 approaching infinity as the numbers grow bigger.

I read a lot of materials on Fibonacci Sequence. Moreover, I was interested in its applications in real life. And nothing much is said about it.Either because it is used by many people and no one wants to tell their secret to the world, although it is not their sequence but a nature’s way of sayign “hi”. Or because indeed it is not applicable or not yet revealed how to apply it in real world. Some examples that I came across is eqyption pyramids proportions, stock market percentages. In stock market buying and selling,Fibonacci Sequence for example is integrate into graphs of rising and falling stocks,where one can make predictions on buying or selling a particular stock, after coputing Fibonacci Sequence from high and low of a trend or stock.

And I did not find much else.Oh, sorry. I also found how people, many people describe where they see the spirals in nature. That is about it.

Since I write software, I thought how can it be applied to software. Proportional web template, based on Fibonacci Sequence, is the first thing that came to my mind.If you search the web for Fibonacci Sequence, you will find the golden ratio picture drawn in squares first, with proportions (height and width) starting with 1,1,2,3,5,8 ..meaning that first two squares have width and height of 1.Then 2X2. Then 3X3. then 5×5, and so on. And with the help of Drafting Compasses, if you draw arcs from one end of each square to its opposite, and continue as the numbers increase, you get the famous Fibonacci Sequence golden spiral which you see all over the web.

So, to design Fibonacci Sequence web template, it needs to be proportional, and maintain its ratio across all screens that the page is opened. In short, it needs to be responsive. So we have width and height that we will need to base on the golden proportion of 1.61803, meaning that the total width of the screen, when bigger column width is divided by shorter column width should equal to 1.61803,no matter what the size of the screen is. Same with height.

For our case, we will consider that for segment AB, AC will be

And we will use this JavaScript code to compute left, and right segments’ width and height respectively:

Then we design our basic HTML table, which in theory should have two rows, and two columns, where first column of first row is also divided into two rows, as shown below:

As you can see, the numbers 1, 1, 3, 5, and 8 resectively denote and represent visually the Fibonacci Sequence proportions.

The next step, for it to be responsive, in $(document).ready or when the document or page that we are loading is ready, we will set proportions. Here is the code for that:

So, after doing this,as you can see, wherever the page is opened, even on TV screen, it will have Fibonacci Sequence proportions, and the golden ratio among its squares.

Let’s add very basic but important styles also, in order for content inside to stay inside each cell, and color borders, to see the first Fibonacci Sequence Responsive Web Template:

Also let’s add width to 100% to the body because we want it to scale to the container’s maximum width and height, thus obtaining Golden Ratio on whatever screen or device it is opened:

And, in the head, please add JQuery script, or translate it to pure javascript if you want, but I use JQuery:

jquery-3.3.1.min.js

All the scripts are included !

Below are the pictures of emulators on major phones and devices. And as you can see, it maintains its ratio.

And the code for basic phase one:

The next phase or step is to include content. I decided it would be great to include bootstrap css and javascript.So we will add two bootstrap scripts:

Then, for each Fibonacci Square, or td, in our case, we need to add following CSS:

style=”overflow-y: scroll;text-overflow: ellipsis;white-space: nowrap;position:relative;vertical-align:top”

And, here is the important part, include all the content that we want to put inside container of any kind, (div with class = container in our case), with position absolute. This is in order to achieve respectively full elements content stretch, and overflow scroll, which is when content is higher than the square, it will add a scroll bar on Y-axis. An example would be a twitter feed in one of the suares, 1,2, 3, 5, or 8.

In short, you can put anything in those squares.

Square 2, I left it for LOGO, BRAND name, TITLE, or NAME. The rest is content, bootstrap content, whichever you want.

In reality, we added a CSS wrapper outside bootstrap, which is Fibonacci Sequence Responsive Web Template, and then inside, we have bootstrap elements.

As an example, I added the following, as shown in the pictures below:

And the code after the bootstrap was added: