Day 23

November 11, 2015

  • Restaurant Site critique
  • Introduce WordPress Child Theme
  • WordPress setup
    • Go to your DreamHost Web Panel
    • Choose Goodies > One-Click Installs (upper left)
    • Choose WordPress
      • Install to: Choose domain, type in name of new folder
      • Automatically create database
      • Deluxe Install checked
      • Click Install it for me now
    • Wait for email, then follow instructions for setting up an admin user (don’t use admin as username)
    • Log in
  • Setting up a child theme
    • Download parent theme – just type in underscores and click Generate
    • Using Coda, place it in wordpressfolder/wp-content/themes
    • Create a new folder in wp-content/themes with style.css, reset.css, and functions.php files inside of it
    • Add code below as well as usual reset.css code
    • Activate your child theme in Appearance > Themes
  • WordPress basics
    • How themes work
      • You will be editing your code directly on the server for this project – make sure to back up your files periodically
    • User settings
      • Disable visual editor
      • Set display name
    • Site settings
    • Where content goes
      • Site title
      • Pages and posts
      • Menus
        • Create menu
        • Set theme location as “Primary Menu”
      • Sidebars
    • Jetpack plugin / WordPress.com accounts

Child Theme – style.css (plain text here)

Includes code to remove mobile menu.

/*
 Theme Name:   My Child Theme
 Author:       Your Name
 Template:     underscores
*/

@import url("reset.css");

.menu-toggle {
    display: none;
}
.main-navigation ul {
    display: block;
}

Child Theme – functions.php (plain text here)

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

?>

Day 21

November 4, 2015

Gentlemen,

Sorry to be missing class today; I’m attending a funeral out of town. Please continue work on your Restaurant Site—the deadline for the project will remain next Wednesday at noon.

By the end of class, please email me with an update as to your progress, including a link to your site as it stands and any questions you may have. Failure to do so will result in a 2 point penalty on the Restaurant Site.

See you Monday,
Chris

Day 18

October 26, 2015

Today’s files

  • Updates to Practice Layouts 2
  • 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 okay most of the time
  • Restaurant Site
    • Due Wednesday, November 11 by noon

Example media query

@media screen and (max-width: 414px) {

    /* alternate CSS here */

}

Day 17

October 21, 2015

Today’s files

  • Client/Developer Site critique
  • Responsive design
  • Flexible layouts
    • Percentages
      • Use percentages for layout widths
      • How to do percentages inside of percentages
      • Set a max-width for your container if needed
    • 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
  • Practice Layouts 2
    • Example layouts
    • Use an ID on the body tag to differentiate between pages in your stylesheet
    • Due Monday, November 2 by noon