What’s Golden Ratio?
Golden Ratio in Nature
Golden Ratio in Art & Architecture
Logos with Golden Ratio
Applying the Golden Ratioto Web Layouts
The Golden Ratio and CSS Frameworks
Golden Ratio Tools
2. What’s Golden Ratio
▪ The magic number
(actually 1.618…)
1.62
▪ If the ratio of the sum of the
quantities to the larger quantity is
equal to the ratio of the larger
quantity to the smaller one, then
the quantities are said to have a
golden ratio.
3. Golden Rectangle
• Choose a number that will
be the length of the
rectangle’s short side.
• Multiply that by 1.618.
• The result, is the length of
the long side of your
rectangle.
• Therefore, this rectangle
obeys the golden ratio.
4. Golden Ratio in
Nature
• The golden ratio is
found throughout
nature, art, and
architecture.
• Pinecones, seashells,
and the human body all
exhibit the golden ratio.
19. Example: You would like to create a fixed width layout. The width
of your layout is 960px. You would to have a large block for your
content (#content) and a smaller block for your sidebar
(#sidebar). How would you calculate the widths of your columns?
Step 1:
Calculate the width of
your #content-block. You
need to make sure that the
ratio between this block and
the overall layout width is
1.62. Hence you divide 960px
by 1.62 which results in
approximately 593px.
20. Example: You would like to create a fixed width layout. The width
of your layout is 960px. You would to have a large block for your
content (#content) and a smaller block for your sidebar
(#sidebar). How would you calculate the widths of your columns?
Step 2:
Subtract 593px from the
overall layout width
(which is 960px) and get
960px – 593px = 367px
21. Example: You would like to create a fixed width layout. The width
of your layout is 960px. You would to have a large block for your
content (#content) and a smaller block for your sidebar
(#sidebar). How would you calculate the widths of your columns?
Step 3:
Now if you calculate the ratio
between the #content-block
and the #sidebar-block
(593px : 367px ≈ 1.615) and the
ratio between the containerwidth and the width of the
content-block (960px : 593px
≈ 1.618) you have achieved
almost the same ratio.
25. The Golden Ratio and CSS Frameworks
Bootstrap
Bootstrap grid system utilizes 12 columns, making for a 940px wide
container without responsive features enabled. With the responsive CSS
file added, the grid adapts to be 724px and 1170px wide depending on
your viewport.