Objective
To explore media queries and the 12-column grid. To review responsive web development techniques by creating a page similar to this example.
Discussion
Most responsive web development frameworks make use of a 12-column grid structure. Once you understand how to control this structure, you will understand how responsive design works.
In this exercise, we will be using the Skeleton Responsive Framework, a lean alternative to Bootstrap. Skeleton's simplicity allows us to explore the 12-column grid structure easily (see Skeleton's default breakpoints).
Procedure
Overview: Merge existing HTML page with downloaded Skeleton Responsive Framework. Add additional CSS styles. Note: replace bold with personalized info.
Prepping for the exercise
- download starter files (location: faa999/class/html/exercises/x0_grid)
- download skeleton framework
- extract zip files, merge contents into "x0_grid" folder
- launch Dreamweaver
- site > new site: site name=class_x0_grid;
local site folder=faa999/class/html/exercises/x0_grid); export STE file - open "grid-example.html"
- view > code and design (note formatting)
- select <body>: copy to clipboard
- open "index.html"
- select <div.row>; DELETE
- paste clipboard contents into <div.container>
Exploring the grid
- select first <section>
- insert > div (wraparound): id="example"
- window > CSS designer: source=define in page, add selectors:
• #example: margin-top: 80px;
• #example .column, #example .columns: height: 3rem; margin-bottom: 2rem; font-weight: 700; font-size: 1rem; line-height: 3rem; text-align: center; text-transform: uppercase; background: #EEE; - examine page in "live" view
- note the default 550px breakpoint
- alter the breakpoint to suit your needs
- file > preview in browser (opt+F12 and cmd+F12)
Grading
- publish your page (see separate instructions)
- make a link to this excercise from your Process Page