March 29: Assignment is finalized and complete!

April 2: Assignment #3 Turn-in Guide added to How to Turn in Your Assignment section

April 3: UIkit 3 beta requirements updated to include newly available Sass files (Instructor's Choice item)

Assignment 3 is due on April 14, 2017, by 11:59 PM. Regrade and late policy are listed below. This assignment is worth 25% of your grade for the course.

Part 1: Build a Website with UIkit (60% of the grade)

Build a 2-3 page website leveraging the UIkit framework. Required site elements are listed below. 

• Write your own content for the site. Please don’t use lorem ipsum or Wikipedia entries. The site can be about anything you want provided it’s work-safe, legal, ethical, and moral. If you are redesigning a page or two from a site, you may use that site’s content. You may use the content from assignments 1 and/or 2 if you wish, or you may build a new one.
• Grid: You must use UIkit's grid system to lay out the website. Use the responsive form of the grid where appropriate. You may customize the grid using Sass, or you may use the default. Incorporate one of the following special grid features: grid gutter, nested grid, source ordering, match height of panels, wrap multiple rows, even grid columns (with or without responsive width).
• Other layout structures: Incorporate at least one: Panel, Block, Article, Comment, Cover. (For comments, this would be a mockup. You do not have to have a functioning comment interface. A mockup comment interface could count as a form if it fills form requirements.)
• Navigation: The site should include a navigation bar that links the relevant pages together, and it should be available on all pages of the site. You may style this navigation bar however you wish. Navigation bar layout should respond to page width changes. In lecture, I demonstrated how to do this with a hamburger button and an off-canvas option. You can do this, or choose another methodology that produces a similar result (i.e. one type of display on desktop, something different on mobile).
• Styling: Incorporate 3 instances of styled items in your pages: table, button, button group, button dropdown, icon (including icon hover, icon button, justify icon), close, badge, alert, thumbnail, overlay. 
  • Three buttons, 3 icons, etc. count as one item, not three!
  • It's possible to incorporate an icon with your form fields. If you have icons on your form field(s), this counts toward form requirements OR general styling requirements, not both.
  • Your form submit button could be styled using this option and count as one styling instance. (Other styled buttons would not count.)
• Form:
  • Include a form with at least 4 form fields.
  • A submit button is required but does NOT count as a form field. However, it may count as a generally styled item, if you apply button styling.
  • The form does not need to submit.
  • The form field types should be appropriate to the data collected. For example, the "email" field type should be used when collecting email addresses. 
  • Include one example of form styling from this list: form rows, size modifiers, width modifiers, form blank, help text, form stacked, form horizontal, form and grid, form and icons.
  • It's possible to incorporate an icon with your form fields. If you have icons on your form field(s), this counts toward form requirements OR general styling requirements, not both.
• Core JavaScript-based widget: Incorporate at least one: Dropdown, modal, off-canvas, switcher, toggle,scrollspy, smooth scroll.
  • STRONGLY RECOMMENDED: Code this FIRST to make sure your jQuery and UIkit JavaScript is working correctly, before moving to components.
  • If you use off-canvas and/or dropdowns in your nav bar, you may count those JS widgets towards this requirement.
• Components: TWO items are required. One must be part of the "JavaScript" section. The other may be part of JavaScript, Common, or Navigations. (Layout counts towards Instructor's Choice, below.)
  • You may incorporate these widgets anywhere on your site, by themselves or incorporated in something else. For example, you could use the datepicker as part of a form field.
  • You may use the image carousel as covered in the video.
  • You may combine components and count them individually. In the video, I combined slideshow with dotnav and slidenav. That counts for one in the JavaScript section (slideshow) plus one elsewhere in components (dotnav), with one to spare (slidenav).
• Using Sass, change the look of your UIkit website in some way. Using the methodologies I demonstrated in the videos:
• Configure your files to compile.
• Change at least 2 variables.
• Create at least 2 new styles. 
• Modify at least 2 existing styles.

Part 2: Comparison exercise (30% of grade)

Compare custom responsive design, created without any frameworks as we did at the start of this course, with one of the big three responsive design frameworks (UIkit, Foundation, Bootstrap) or jQuery Mobile. Other frameworks may be approved; ask your question in the Assignment 3 Questions thread. Framework should include CSS and JavaScript and should not focus on just one area (like only a grid system).

Rationale: It's a code course -- why write a paper? Because when I read capstone and thesis proposals, it's clear that students don't understand why they're choosing one technology over another. This is good practice in structured thinking about technology choice. Even if you don't complete a degree at Extension, you will be asked about technology choices throughout your career. It's nice to have the skill set to critically evaluate all choices and pick the best one for the problem at hand.

1. Create a comparison grid with at least 5 criteria. You may have as many criteria as you wish, but 5 is the minimum. State what each criteria is clearly. State how that criteria is implemented/addressed (or not) in the items you're comparing. Which is better based on that criteria?

• Try to go a bit beyond the obvious and terse in your comparison. Example of the obvious:
• Problem: Creating columns of equal heights
• Foundation: comes with Equalizer component
• Custom: Must download and include your own JS solution
• Which is better: it depends!
• A better way of dealing with this would be:
• Problem: Addressing common responsive design problems requiring a JavaScript-based solution, like equal height columns or responsive images
• Foundation: ships with several Javascript-based components to address common responsive design problems. All components are designed to work together without conflict and integrate easily with the framework using HTML attributes.
• Custom: Must research and identify Javascript-based components to address common responsive design problems. Potential exists for conflicts between components. May not integrate with HTML attributes, meaning you must tweak or modify JavaScript to work with your HTML. Alternatively, you could code your own, which adds to development time.
• Which is better: ...
• In other words, don't be a community college student. Go beyond and show me what a Harvard graduate student does when thinking about a list of criteria.

2. Once this list of 5 criteria is generated, then write a 1-2 page paper explaining which is better, responsive design frameworks or custom responsive design.

• If you have a clear winner for most situations, defend your answer. Why is your choice the best? Why should everyone use it?
• If you don't have a clear winner, or if you think the answer is "it depends", explain. What does it depend on? What is an ideal project for each approach? 

Remember this is a critical thinking exercise driven by your opinions of what's important when building a responsive website. There is no correct answer, but there are answers not sufficiently supported by data. An A answer will demonstrate the data (the criteria grid) that supports your opinion (the paper). 

Grading criteria for the paper:

• Please no more than 2 pages. Say it in fewer words. I'm not going to play games with fonts and margins. I'm asking you to write clearly and compactly to make your argument.
• Good grammar, spelling, and punctuation count. You're Harvard grad students, for goodness sake.
• Have you made a good, supported argument? 
• Have you made an argument that someone could follow who may not know much about responsive design? Imagine you're talking to a CTO or other technical manager who may not write the code for this, but who may have a reasonable technical background. (You don't need to explain what HTML, CSS, Sass, and compiling are, for example.)
• Hint: management considerations might be worth considering -- documentation, development time, cost of ownership, technical debt, stability of a given open source project, etc., in addition to the more obvious technical considerations.

10% of your grade is Instructor's Choice

Not all of these items "count" the same! If you want to get a 100 on your assignment, then you may want to do a few of these, rather than just one.

• Build your UIkit site with UIkit 3 Beta, and work with LESS instead of Sass to fill that portion of the assignment. (up to 10 points) NOTE: UIkit 3 Beta may not have all of the features described above, including: "Slideshow, Slider, Slideset, Parallax, Nestable, Lightbox, Dynamic Grid, HTML editor, Date- and Timepicker components."
• Added April 3: Build your UIkit site with UIkit 3 Beta, and work with new Sass files. (up to 7 points) 
• Write an amazing, persuasive paper with an amazing, persuasive comparison grid. Include more than 10 items to compare. Give us something ready for publication in Smashing Magazine, rather than just another homework assignment. (up to 10 points)
• Make modifications to the JavaScript widgets using JavaScript and the documentation provided. (up to 10 points)
• Demonstrate use of the dynamic grid or the parallax grid, in addition to the required grid above. (up to 5 points)
• Build your UIkit site with UIkit 2, and work with LESS instead of Sass to fill that portion of the assignment. (up to 7 points)
• Go beyond the Sass requirements above to make your site look as little like the UIkit default theme as possible, using LESS (up to 10 points) or Sass (up to 7 points).

What Jen cares about

• You make good use of the UIkit framework, leveraging all components and widgets as described.
• HTML and CSS validate as much as possible. YOUR code should validate. If you see errors or warnings in UIkit's files, you may ignore those.

What Jen doesn’t care about

• Your graphic design and color matching abilities/inabilities don’t matter to me. Neither does your ability/inability to make pretty pictures.
• I don’t care what compiler you use for Sass. 

How to turn in your assignment

Turn your assignment in via the Assignments link in Canvas. Post your site on your web hosting location.

Include a text file in your zipped submission, indicating the following:

• Paste the URL for the assignment web page. You do not need to provide a link for the CSS.
• Indicate your browser/operating system combination (Mac/PC, Firefox/Chrome).
• Provide details about each of the elements described above with HTML document names and line numbers:
• Grid: It is assumed you used the grid system, so no information is required about this. Indicate which of the special grid features you used and its starting line number. Comment the HTML so these features are easy to find.
• Other layout structures:Indicate which structure, the starting line number for this on one page of your site, and comment the HTML.
• Navigation: Indicate the structures used to make a flexible navigation, the starting line number for this on one page of your site, and comment the HTML.
• Styling: for each instance, indicate where (file name and starting line number) and what. Example: Button in index.html on line 23, table in about.html starting line 50, etc. Comment your HTML.
• Form: Indicate which page contains your form, the types of form styling used, and its starting line number. Comment your HTML.
• Core JavaScript widgets: Indicate which widget, which page it's on, and the starting line number. If something appears across multiple pages (maybe a dropdown menu, for example), indicate one page where it's located and its starting line number. Comment the HTML.
• Components: Indicate which components are used, which page(s) they are on, and the starting line numbers. If something appears across multiple pages, indicate one page where it's located and its starting line number. Comment the HTML.
• Sass: Zip up the relevant Sass documents and submit these. Detail where you have made changes in which file(s) and on which line number(s) in those files for your new styles, your variables you change, and the styles you've modified. You do not need to submit all of the Sass documents; submit only the ones you've changed. Comment your Sass.
• Comparison: Zip together your relevant documents and submit, or point to those files online (if you did something like Google Docs, for example). If you are using Google Docs, make sure Kourtnie (kourtniesanders@g.harvard.edu) and I (jen@jenkramer.org) are able to see your document(s). 
• Instructor's Choice: Just as you've done above, indicate what you did, what files are involved, and comment whatever is relevant. The easier you make grading, the happier we are!

Feel free to utilize the Assignment #3 Turn-In Guide included here:

Assignment #3 Turn-In Guide

Oh no! I can’t make the deadline!

This project is due on April 14, 2017, at 11:59 PM Eastern time. It is expected that you will turn the assignment in on time.

You have one "free pass" to turn in one assignment late for this class. You may use this pass with assignment 1, 2, or 3, but not assignment 4 (due to Extension timelines and end of term). 

Should you choose to use this late pass for this assignment, your assignment is due on April 17, 2017, at 11:59 PM Eastern time. You do not need to do anything special to activate the pass. Simply turn the assignment in late, exactly the way you would have done earlier. We will mark that you've used your free pass in the grade book. If you don't turn in Assignment 3 by April 17 at 11:59 PM, you will receive a zero for this assignment.

Exceptions: In our experience, the #1 reason students need a late pass is due to poor planning. The lectures may look easy, but once you start working on your site, you may hit snags along the way. You need to plan for bad things to happen, both personally and professionally. If you have the assignment done early, that's not a tragedy!

However, we know that life happens when you are in graduate school, and we are willing to work with you in extreme cases if you need an additional extension beyond the one provided. These exceptions include things like being in the hospital (or having a significant other or children in the hospital), a car accident or other debilitating accident, and so forth.

Traveling for work or pleasure is NOT an exception -- budget your time to get the assignment in on time. 

Being sick is NOT an exception, either for yourself or your children or significant other, unless this is an extreme case (like being in the hospital).

I used my late pass in Assignment 1 or 2, now what?

Your assignment is due on April 14, 2017, at 11:59 PM. Please budget your time accordingly.

Grading timeline

Grades will be posted online in Canvas. Jen will send an email to the class when these are ready for viewing. When this email is sent, Jen will indicate the date that regrade requests are due. Typically it takes 1-2 weeks to grade all assignments.

Regrading of assignments

You are permitted a regrade for either assignments 1, 2, or 3. Regrades are not permitted for assignment 4 due to the timing at the end of the term.

Should you wish for a regrade on your assignment, submit your regrade within 3 days of the completion of grading. Jen will send an email when grading is complete with the due date for regrades. A courtesy email to Kourtnie Sanders is appreciated, to indicate you'd like a regrade.

Typically, regrades take longer than the first round of grading, because these are fit into our schedules as possible. If you have not received your regrade within 2 weeks of submitting it, email Kourtnie Sanders to check on status.