Objective
To learn CSS layout techniques by recreating this
web page.
Discussion
Responsive web design adjusts the layout of web pages and re-formats them for smaller screens like handheld devices. The most common approach is to use CSS media queries to determine browser width, then letting alternate style sheets re-format the layout.
In this exercise we will be reverse-engineering Matt Imling's "One Percent CSS Grid." Matt's code also features fluid images that scale down larger images to fit elastic columns. This framework is one of the easier to understand systems out there.
To make this framework as useful as possible, additional CSS styles have been included that do the following (these additional styles can be easily removed):
The end result is a reference file of useful code snippets that can be utilized on future web projects:
Additional responsive web design resources:
Procedure
Prepping for the exercise
- download starter files
- browse to tools.dynamicdrive.com/favicon
- create "favicon.ico" from "favicon.png"
- examine onepcssgrid.css (read commented reference notes at top of file)
- open "responsive.html"
• note structure
• note js etc in <head>
• note <img> has no width/height
- window > css: link the following files (in order):
• "reset.css"
• "boilerplate.css"
• "onepcssgrid.css"
• "font.css"
• "onepcssgrid_small.css" (media=handheld)
- copy media code from "onepcssgrid_small.css" (line 3) to <head>
(code view)
Creating the basic page structure
- open "original/grid-page-1000.html"
- choose appropriate rows and copy selected <div.onerow> to bottom of "onepcssgrid/responsive.html":
• <div class="onerow"> <div class="col12">col12</div> </div>
• <div class="onerow"> <div class="col4">col4</div> <div class="col4">col4</div> <div class="col4 last">col4</div> </div>
• <div class="onerow"> <div class="col12">col12</div> </div>
- modify 2nd row as follows:
• <div class="onerow"> <div class="col3">col3</div> <div class="col6">col6</div> <div class="col3 last">col3</div> </div>
- select <div.onerow>
- insert > layout objects > div tag: class=onepcssgrid-1000 (wraparound)
- repeat with others
- select <div.onepcssgrid-1000>
- insert > layout objects > div tag: class=container (wraparound)
- repeat with others
- cut/paste <div#top> into first <div.col12>
- cut/paste <div#footer> into last <div.col12>
- cut/paste <div#leftColumn> into <div.col3>; repeat with others
- select <div#top>
- insert > layout objects > div tag: class=topWrapper (wraparound)
- save, file > preview in browser (opt+F12 and cmd+F12)
Fine-tuning the page layout
- window > CSS: add CSS styles to "layout.css" (+):
• .container: box: margin left/right=auto, padding left/right=50px,
min-width=924px, max-width=80%
• #topWrapper: box: margin-bottom=50px; bg: color=#9f5f33
• #leftColumn: box: width=190px
• #mainColumn: box: width=80%, margin left/right=auto
• #footer: box: height=50px, margin top=30px, padding-top=10px; border-top=dashed, thin, #9f5f33
• body: bg: color=#f1e2ad
- window > CSS: add CSS styles to "layout_small.css" (+):
• .container: box: width=90%, padding=0
• #mainColumn: box: width=100%
• body: min-width=320px
- select <div.container> for top
- insert > layout objects > div tag: id=topWrapper
- inspect load order of CSS files: handheld styles must load last
- save, file > preview in browser (opt+F12 and cmd+F12)
Styling the menu buttons
- window > CSS: add CSS styles to "menu.css" (+):
• #menu:
width=190px, font-size=1.2em, font-weight=bold,
line-height=30px
• #menu ul: padding-left=0, list-style=none
• #menu li: padding-bottom=1em
• #menu a:
block: display=block,padding-left/right=20px,
color=white;
text-decoration=none, background=#9f5f33
• #menu li:hover a:
text-decoration=none;
background=black
- save, file > preview in browser (opt+F12 and cmd+F12)
Fine-tuning the CSS
- window > CSS: add CSS styles to "corners.css" (+):
• .rounded15: border-radius=15px;
-moz-border-radius=15px; -webkit-border-radius=15px
- select <a>: class=rounded15
- window > CSS: add CSS styles to "table.css" (+):
• table.border: border: top/left=solid, thin, #9f5f33
• table.border td: border: right/bottom=solid, thin, #9f5f33
• td: block: vertical-align=top; box: padding=5px
• table: box: margin-bottom=1em
- select <table>: class=border
- select <td>: class=noWrap
- window > CSS: add CSS styles to "font.css" (+):
• .first: box: padding-top=0
- select <h1>: class=first
- save, file > preview in browser (opt+F12 and cmd+F12)
Adding Google web fonts
- browse to www.google.com/webfonts#HomePlace:home
- search for "anton", click "quick use" and follow instructions
- window > CSS: add CSS styles to "fonts.css" (+):
• #top p: 'Anton', sans-serif; color=white, size=36px, line-spacing=1.1em; box: padding-top=1em
- save, file > preview in browser (opt+F12 and cmd+F12)
- file > print: preview (what needs to change?)
Adding a print style
- open "onepcssgrid_small.css"
- file > save as "print.css"
- window > css: link to "print.css" (media=print) (loads last)
- edit CSS style in "print.css":
• .container: min-width=80%
- add CSS styles to "print.css" (+):
• body: bg=white
• #topWrapper: bg=white; box: margin-bottom=0
• #top p: color=9f5f33
• #leftColumn: block: display=none
• #mainColumn: box: width=100%
• #rightColumn: box: width=50%
- save, file > preview in browser (opt+F12 and cmd+F12)
- file > print: preview
Grading
- publish file (see separate lesson)
- correct the path to your favicon; re-publish
- make a link from your process page to this assignment
