Typography

Assignment

For our next assignment, we will be recreating the exercise found here. The full text of Aesop’s Fables can be found here.

A rubric for this assignment will be available next week, but the basic requirements are:

  • The title and full text of three fables.
  • Each fable styled for desktop and mobile view.
  • A minimum of two fonts per fable.
  • A minimum of one image per fable.
  • Each fable’s design should be unique – no reusing fonts or images.

Good resources for images include Unsplash and Subtle Patterns.


Typography


Helpful CSS

Responsive Design

  • Responsive design
    • Examples
    • Getting started
      • New reset stylesheet (in Basecamp)
        • text-size-adjust
        • word-wrap
        • max-width for images
      • New HTML page template (in Basecamp)
      • Using HTML5 elements – ch. 17
        • Note that hgroup has been deprecated
      • Set html font size to 100% in style.css
  • Flexible layouts
    • Percentages
      • Use percentages for layout widths
      • How to do percentages inside of percentages
    • rem
      • Used instead of pixels for font-size, border, as well as margin and padding in some cases
      • Target ÷ context = result (24px ÷ 16px = 1.5rem)
        • Context is the font size of the html element (16px).
        • Put your math in a comment next to the result.
      • Continue using em for line-height
  • Borders in flexible layouts
    • CSS for divs with borders: box-sizing: border-box;
    • Counts padding and border as part of width
  • Media queries
    • Will mostly use ones based on width (max-width or min-width)
    • Other options available
    • General viewport widths
      • Newest iPhones – 375-414px
      • Older iPhones – 320px
      • iPads – 1024px by 768px
      • Other tablets – 1280px by 800px
      • Others
    • Web inspector’s responsive design mode
    • Using multiple media queries
      • Largest to smallest
      • Multiple values
  • Flexible images
    • max-width: 100%; will work most of the time
    • background-size: cover; (example) and background-size: contain; (example)

Example media query

@media screen and (max-width: 414px) {
        /* alternate CSS here */
}

Sass Basics

Installing

sudo gem install sass

Enter computer password


Running

pwd to show current folder

cd and path to your site to get to correct folder

sass --watch --style expanded sass/style.scss:style.css to run Sass


Features

Importing

@import "reset"; to import _reset.scss

Indenting &:hover, etc.

Variables

$variable: value;

Media queries

$viewport-ipad: 1024px;
$viewport-iphone: 414px;

@mixin responsive($viewport-width) {
    @if $viewport-width == ipad {
        @media screen and (max-width: $viewport-ipad) {
            @content;
        }
    }
    @else if $viewport-width == iphone {
        @media screen and (max-width: $viewport-iphone) {
            @content;
        }
    }
}

and

@include responsive(iphone) {
        ...
}

Agenda for Thursday, February 2

  • Updated schedule
    • (1) About Me Page and Animal Info Page due at the beginning of next class at the latest
    • (2) Progress Check 1 next class
    • (1) Single Purpose Site and (2) WordPress Site due Tuesday 2/14 at the beginning of class
  • (1) Hosting Check
  • (1) Single Purpose Site
  • (1) Process and Design – ch. 18
    • Process
      • Idea
      • Purpose/audience
      • Content
      • Wireframe/site map
      • Code/design first page
      • Code/design additional pages
    • Design
      • “It’s not just what it looks like and feels like. Design is how it works.” -Steve Jobs
      • Communicating through organization and prioritization
      • Visual hierarchy
        • Size
        • Color
        • Style
      • Grouping
      • Similarity
  • (2) WordPress
    • Working with the built-in JS menu

Agenda for Tuesday, January 31

  • (2) Work on WordPress Site and Independent Project
  • (1) Finish images and captions
  • (1) Layout – pp. 370-376
    • Columns with float
    • Clearing div
  • (2) WordPress Site
    • Site structure
    • Using pages versus posts
    • Understanding theme files
  • Hosting Check this class and next

Layouts for Animal Info Page

  • Red: header (image)
  • Orange: content (overview of animal)
  • Yellow: sidebar (interesting facts)
  • Green: footer

Agenda for Tuesday, January 24

  • (1) Hosting due next Tuesday – start now!
  • (1) Animal Info Page
    • Start with content
      • Title
      • Overview of animal
      • 4-6 interesting facts
      • Footer
    • Images
      • Header
      • 2 for content
      • Background
  • (2) Hosting and FTP setup
  • (2) WordPress Site
  • (1) Images and captions
    • Using classes and IDs – pp. 183-184, 238