session nine
agenda
- web layout evolution
- css positioning
- flexbox review
- introduction to grid
- readings & resources
web layout evolution
- prior to
flexbox
andgrid
modules of CSS standard, designers worked with CSS positioning andfloat
to achieve page layouts float
was introduced to deal with wrapping text around images within an element, but was seized upon by coders as an alternative to table layout - was never really intended for laying out entire pages as floating elements are tied to the document flow (affects flexibility)- could be used effectively for things such as grid-based photo galleries, horizontal menus, and multi-column layouts
- over time, a collection of frameworks evolved:
- a package of files and folders of standardized HTML, CSS, and/or JavaScript that provide a common structure allowing us to reuse code and save time
- act as a "starting point" (design best-practices and standardized classes/rules) for styling sites
- addresses common design/code problem, to be used as a reference to solve similar problems
- essentially, why reinvent the wheel if you don't have to?
- with the arrival of
flexbox
andgrid
modules, native CSS can now challenge the power of frameworks for rapid development
css positioning
- default value of the
position
property for elements isstatic
, which means elements will follow normal flow - we looked briefly at the
float
property in session four, noting how it takes objects out of normal flow - likewise, positioned objects are taken out of the normal flow and behave differently, e.g., overlapping, or remaining fixed in the browser display
- positioning is always with respect to a frame of reference, like the parent element or the whole page (e.g. body element) by default
- static positioning is the default; elements fall into their normal position in the document flow
- relative positioning is similar to static positioning, except you can change the location of an element in relation to where it would otherwise appear
- absolute positioning disregards normal flow and allows you to place an element exactly where you say - coordinates apply to the whole page, unless the parent element is a postioned element as well
- fixed positioning is done in reference to viewport - useful for creating persistent UI elements like fixed menus that are always visibile even as page scrolls
- sticky positioning is a hybrid between relative and fixed position - allows a positioned element to act relatively positioned until scrolled to a certain point (e.g., the top of the viewport), after which it becomes fixed.
- none of the above values for the
position
property will work withouttop
,bottom
,left
, orright
properties that specify exactly where to position an element
- arrival of standard wc3 modules for Flexbox and CSS Grid makes the use of positioning for full page layout unusual (and unnecessarily painful), but there may still be times when it makes sense for particular content design challenges (e.g., text overlay)
- review the positioning examples in the
00_css_positioning_begin
folder from this session's resource files
flexbox review
- flexbox makes it easier to design responsive layout structure without using positioning or floats
- flexbox containers:
- define a container - becomes flexible by setting
display: flex;
- flex container properties include:
flex-direction
- direction the container wants to display the flex itemsflex-wrap
- defines how items will wrapjustify-content
- used to align itemsalign-items
- the alignment of items on the cross axis (e.g., vertical or horizontal)align-content
- positions content and allows flex items to wrap
- define a container - becomes flexible by setting
- flex items:
- the direct child elements of a flex container become flex items
- flex container properties include:
order
- specifies the order of the itemsflex-grow
- specifies how much a flex item will growflex-shrink
- specifies how much a flex item will shrinkflex-basis
- specifies the initial length of a flex itemalign-self
- specifies alignment for the selected item inside the flexible container
- intended for one-dimensional layouts
- review: take a few minutes to review session 04 to reacquaint yourself with flexbox
introduction to grid
- like flexbox, CSS grid gets applied to a parent element and its direct descendants automatically become grid items
- inside individual grid elements, content is managed using whatever techniques you wish - use
float
,position
, orflex
as needed (e.g.,float
to wrap text around an image inside a grid cell - supports 2-dimensional layout and can adapt more fluidly, i.e., responsive elements without necessarily using media queries
- allows us to align page elements into columns and rows, but far more powerful as grid container child elements can overlap/layer similar to positioned elements
- grid features:
- fixed and flexible tracks (columns/rows) - grids can be created with fixed track sizes (e.g., pixels) or flexible sizes using percentages or
fr
unit (fractions) - item placement - items can be placed into a precise location on a grid using line numbers, names, or a specific area of the grid (grid areas)
- create additional tracks implicitly - an explicit grid can be created but specification is flexible enough to add additional rows and columns when needed
- alignment control - can control how grids as a whole are aligned as well as how items are aligned in a grid area
- overlapping content - multiple items can be placed into a grid cell or area, partially overlapping each other (control this with the
z-index
property)
- fixed and flexible tracks (columns/rows) - grids can be created with fixed track sizes (e.g., pixels) or flexible sizes using percentages or
- important elements:
- grid container - the parent element to which
display: grid;
is applied - grid item - the direct descendants of a grid container
- grid lines - the horizontal or vertical lines separating the grid into sections (you will use these to positon grid items)
- grid cells - intersection between a row and column (essentially the same as a table cell)
- grid track - the space between two grid lines (helps to think of them as "rows" and "columns")
- grid area - the space between four sepcified grid lines; can cover one or more cells
- grid gap - empty space between grid tracks
- grid container - the parent element to which
- defining grids:
- start by defining a grid container with
display: grid;
- as soon as we do this, all direct descendants are automatically grid items
.item { display: grid; }
- define grid tracks using
grid-template-columns
andgrid-template-rows
- options for defining width/height
.item { display: grid; grid-template-columns: 10% 4em 20px 50vw; grid-template-rows: repeat(3 1fr); }
- place items on the grid by defining
grid-column
andgrid-row
values
.item { display: grid; grid-template-columns: 10% 4em 20px 50vw; grid-template-rows: repeat(3 1fr); } .banner { grid-column: 1/5; grid-row: 1/2; } .main { grid-column: 1/3; grid-row: 2/3; }
- start by defining a grid container with
- flex vs. grid:
- in many cases, you can acheive identical effects from using either
flex
orgrid
- flexbox characteristics:
- items sizes are defined in the flex items
- organizes elements on a linear path
- ideal for navigation bars, sticky footers, many page layouts
- grid characteristics:
- item size is defined in the grid container
- organizes elements on a 2-dimensional grid
- essential for card layouts
- in many cases, you can acheive identical effects from using either
exercises
- Take some time to work through Grid Garden to acquaint yourself with grid.
- From the
session09
files, update the style sheet in02_grid_exercise_begin
to create a grid layout for the page. - From the
session09
files, update the style sheet in03_responsive_grid_begin
to add media queries as directed. - From the
session09
files, update the style sheet in04_responsive_grid_card_begin
to add media queries as directed.
assignment five
objective: Recreate a grid layout with the basic orientation and responsive qualities shown in sample wireframes.
readings & resources
- The Mystery Of The CSS Float Property (2009)
- Absolute, Relative, Fixed Positioning: How Do They Differ?
- CSS Position Property
- How CSS Positioning and Flexbox Work – Explained with Examples
- Practical positioning examples
- HTML Layout Elements and Techniques (w3Schools)
- CSS Layout Templates (float, flex, grid)
- Flexbox resources:
- Grid resources:
- Relationship of grid layout to other layout methods
- Flexbox vs. CSS Grid: Which Should You Use and When?