This week, we discussed Page layout, Firstly we talked about grid layout, Grids lie at the heart of most modern web page designs. They provide an easy way to organise content and
if used carefully, can help the reader find information more easily. Bootstrap and Skeleton are examples of boiler-plates which are grid systems.
The 5 types of page layout are –
• Fixed-width layouts – Elements given absolute pixel dimensions.
• Fluid layouts – Elements given %age dimensions.
• Elastic layouts – Elements sized using Ems in order to accommodate changing text size.
• Hybrid layouts – Layouts using combinations of the above – maybe one fixed-width column and one fluid.
• Responsive layouts – Using a combination of fluid layouts and media
Layouts with floats – Positioning is only one method for creating CSS page layouts but it’s not
the best option. Using CSS floats is usually more convenient because we don’t have to
calculate element positions, we can allow them to “float”. Working with floats also means we can
control content order more easily. However, it takes a little more experience to get to grips with the
idea and practice of floating elements.
CSS grid layout – The markup for this simple grid layout is exactly the same as for the floated layout. Each element in the grid is named (grid-area) and then the configuration is made using the container (#wrapper) with the grid-template-areas WYSIWYG syntax.
grid-template-columns: 2fr 1fr;
Working with percentages for floated layouts can sometimes be troublesome, especially
when the maths gets complicated. When the CSS Grid Layout module was designed, a
better way to describe the ratio of flexible columns was introduced: fractional units.
Fractional units are simple to use and leave the browser to work out the maths. If we create the same layout 960px using grid, everything gets easier. We no longer need percentages because
fractional units work on the basis of ratios, so our simple 2:1 ratio layout can be described as 2fr 1fr. All modern browsers now understand CSS grid so it is safe to use in most local contexts. But if you need to support older browsers or mobile browsers in emerging markets, you may need to provide a fallback with a float layout that even old or basic browsers will understand.
Our homework this week is to prepare for our role play client meeting for our Small Business project. the small business, i have to choose a small business to design a website for, and prepare some questions to ask the client.