HTML/CSS Templates/Patterns

Points
15
Assigned
April 04, 2019
Due
May 06, 2019

We're now on our way to making a real, functioning website. For the purposes of this project, we will be producing three prototype templates that would eventually become the website. Using these three templates, we would easily be able to do produce the rest of the site.

Instead of producing all of the templates at once, we'll split this assignment into 5 parts over the last part of the semester.

  1. Basic Wireframe Structure and Mockups: Week 12
  2. Patterns - Global: Week 13
  3. Patterns - Page Level: Week 14
  4. Combined Templates and Patterns - Instructor Review: Week 15
  5. Final Templates and Patterns: Finals Week

Part 1: Basic HTML Wireframes

You've already sketched out your site on paper and developed a lot of the core content. Now we need to start developing your content into HTML wireframes. The wireframes will be built mobile-first and demonstrate the content priority in each of your 3 templates.

Remember, the wireframes don't need to be "pretty" yet. We're going to create the structure first, and then slowly add style and layout (including responsive breakpoints) to our templates through CSS.

What To Do

  1. Create a new folder in your project repository and call it "prototype".
  2. Inside the folder, create three individual HTML files. One is going to be called index.html (which will be your home page template). The other two are your choice, depending on which 2 other templates are most important for your website. For example, a Product page might be considered a template. You don't have to create a separate template for each Product, since they will all follow the same basic format.
  3. Create a structure for each of the HTML pages, based on your content. Most of your sites will include the global header and footer patterns. The rest of the content elements are up to you.
  4. Use semantic HTML to mark up your content. For example, you might surround your main content using the MAIN HTML template and the header using the HEADER tag. If your site uses navigation, mark it up using an unordered list. We'll everything in the next assignments.
  5. Add real content into your 3 templates. The content should be representative of the actual content that will be on the website, not lorem ipsum. Links don't necessary need to work right now.
  6. Once you have created your three templates, create a new file called "style.css". This is where your styles will eventually go.
  7. Link your stylesheet to each of your main templates, using the code below.
  8. Add a few default styles to make your templates a bit easier to view. Use the starter CSS below.

Starter HTML Code with Stylesheet Link

Starter CSS Code for Wireframing

These styles will help give outlines to your elements. You'll delete them eventually.

Wireframe Example

Your wireframes might look something like these wireframes, used to create the RWD website.


Part 2: Prototype Patterns - Global

What To Do

Rather than styling everything at once, this week we're going to pick out "global" patterns to style first on your templates.

What do we mean by global? These are design pieces that are shared among most or every page on the website. This commonly includes:

Using the stylesheet you've already created and your 3 "wireframe" templates, focus on styling these components for this week. You will review these with both the instructor and class.


Part 3: Prototype Patterns - Page Level Components

For this week, we're going to dive into the specific components that make up the core of each page or template. These might be considered molecules or organisms in atomic design.

Specific page-level components could include:

  1. A hero image or slider
  2. A food menu item
  3. An embedded video or map
  4. A calendar or event item
  5. A news story or blog post
  6. Promo blocks/photos

These will vary depending on what components make up your individual templates.

Focus on styling and adding any appropriate JavaScript for these patterns for this week, adding on to the stylesheet you've already created. You will review these with both the instructor and class.

Common RWD Patterns

Starting out a new responsive web site can be intimidating. To help you get started, I've provided some of the most common patterns used across responsive websites that you can simply copy and paste, or modify for your own use.

These patterns use very light styling, with the assumption that you'll add your own CSS.

To learn more about creating accessible and maintainable patterns, pick up Ethan Marcotte's newest book, Responsive Design Patterns and Principles.

Also see This is Responsive by Brad Frost, where I found many of these examples.

CSS Reset Stylesheet

This is by no means required, but by adding this default CSS, you'll ensure maximum consistency in CSS between browsers.

I also added in some default responsive image styles and box-sizing: border-box by default, as I always use these.

View the Code Here

How to Use JavaScript/JQuery

Use these instructions for patterns below that require JavaScript and/or Jquery.

Main Content Area with SideBar

A common layout pattern start with main content and sidebar stacked until you reach a larger breakpoint, at which point the elements are positioned left and right (using flexbox).

Uses: HTML and CSS

Typical Page Layout (Header, Nav, Main Area, Footer)

A typical page setup - creativity away from this standard layout is encouraged though!

Uses: HTML and CSS

Buttons

Buttons are typically just links with a special style applied to them.

The pattern below will get you started, but of course you can customize a button to have any style you'd like.

Uses: HTML and CSS

Equal-Width Columns

Start with three stacked pieces of content and create three side-by-side columns, when space allows.

Note that you can change the 33% to 25% for 4 columns, 50% for 2 columns, etc.

Uses: HTML and CSS

Stacked Navigation

Navigation is stacked by default and at larger screens, the navigation floats horizontally.

Uses: HTML and CSS

Basic Toggle Navigation

Start your menu as a toggle menu for small screens. When there is room, the toggle disappears and displays the full menu horizontally.

Uses: HTML, CSS and JavaScript with Jquery

Adding Tint On Top of Images/Boxes

Add a tinted overlay on top of an HTML element (such as an image) with CSS. You can adjust the tint color and percentage in the CSS (even adding a gradient instead).

Basic Toggle Navigation with Hamburger

People seem to love this pattern, so I'm including it here. In my example, I kept the menu label and added an additional element for the hamburger icon (which animates).

Uses: HTML, CSS and JavaScript with Jquery

Off Canvas Navigation

This popular navigation style pushes the content area over to reveal the navigation at small screens. At large screens, the full navigation shows horizontally, although the toggle breakpoint could be removed and display at all screen sizes.

I modified this to include an overlay and close button for the navigation.

Also see a version with the navigation revealed from the top.

Uses: HTML, CSS and JavaScript with Jquery

Full-Screen Navigation

Displays navigation as an animated overlay on top of the main content area. Could potentially be modified to only show this pattern at small screens using media queries.

Priority+ Navigation

At smaller screens, only the most important navigation items are shown, with a toggle to turn on the rest of the options. At larger screens, all of the options are shown.

Uses: HTML, CSS and JavaScript

Source: https://github.com/gijsroge/priority-navigation

Simple CSS-only Accordion

Achieve an accordion effect using only HTML and CSS.

Uses: HTML and CSS

Simple Tabs

Some very easily implemented tabs. If you have many tabs, you might want to try the tab/accordion combination below for a better mobile experience

Uses: HTML, CSS and JavaScript with Jquery

Tabs/Accordions

This accordion/tab pattern shows accordions by default, and then switches to tabs at larger breakpoints.

Uses: HTML, CSS and JavaScript

Vertically Centered Text on Top of Image

Uses: HTML and CSS

People commonly want to center text vertically on top of an element (such as an image). This uses flexbox to easily position elements both vertically and horizontally on top of the element, and adds some tinting on top of the image for readability.

Slider/Carousel

Creates a carousel of images. The example below is using the Flickity plugin, but there are many out there:

Uses: HTML, CSS and JavaScript (can either download the CSS/JS files or reference them from Flickity)

You can also download and customize Flickity at http://flickity.metafizzy.com.

Photo Gallery

Displays thumbnail photos as a gallery, with the option to click through for a full-screen version.

Note - this is a more advanced implementation

Responsive Date Picker Widget

This is from the Pikaday Responsive date picker library. I've reproduced all of the code you'll need for clearer implementation.

I like this date picker because it detects whether the user is on a mobile browser and instead displays the native (small-screen optimized) date picker for these browsers.

There are some additional customizations you can make and you can find them in the full documentation: https://github.com/mydea/PikadayResponsive

Uses: HTML, CSS, JavaScript and Modernizr (included in HTML)

Response Modal Window/Popover

I like this modal example because it fills the entire screen on small screens, and on larger screens, allows the user to exit by tapping anywhere outside of the window.

Uses: HTML, CSS and JavaScript with Jquery

Simple CSS-Only Content Filter

Uses pure CSS to filter a list of items by category when selected.

Uses: HTML & CSS

Smooth Scroll to a Page Location (Anchor)

Scrolls user to a particular location up or down the page by clicking a link. JavaScript adds the smooth scrolling motion.

Uses: HTML, CSS and JavaScript with Jquery

Anchored (Floating) Back to Top Navigation Button

Arrow appears once scrolling has started and auto scrolls user back to top of the page

Uses: HTML, CSS and JavaScript with Jquery

Animated Content Entry/Exit on User Scroll

Animates in and out content via fade or slide transition when scrolling up and down. Uses the third-party Delighters JavaScript library.

Uses: HTML, CSS and JavaScript with Jquery and Third Party Delighters library

Lazy Loading Plugins

Options for intelligently loading content only when the user reaches that position on the page. Note - these are more advanced, but provided in case you need them.

CSS Animations

Easily add CSS animations to elements on your page with this animation library.

Note - you do not need to add this entire CSS file to your website - only the animations you need.

Skip to Main Navigation (Accessibility)

Not really anything to do with responsive design, but add this code to your website to ensure users on screen readers can skip past your main navigation directly to your content. I put this on all of my sites.

Clearfix

If you're using floats and your elements below the float aren't displaying properly (for example, they aren't calculating the height of the prior element correctly or aren't starting on the right line), you probably need to apply a clearfix.

<script src="https://gist.github.com/challahan/a8c38d1e92fea18b15146459e094b8b5.js"></script>


Part 4: Combined Templates and Patterns: Instructor Review

For this week, take both the global patterns and components that you've already developed and refine them into a cohesive, working design.

The instructor will individually review these templates with you and give feedback.

You'll also use these for usability, accessibility and technical testing, so they have to be functional and working.

After this week, you'll have one week left to refine them.


Part 5: Final Templates and Patterns

The finalized working templates (including the feedback you've received so far) are due in class today. You'll demonstrate them along with your Project Hub and Pattern Lab in the Review Session during finals week.


How to Turn In the Assignment

You'll be submitting your templates via your GitHub repository. You'll simply update the same files each week as you progress.

  1. Make sure your three templates are placed in the "templates" folder
  2. On your root index.html file, which is the Project Hub, add an H2 with Date: Templates.
  3. Add a link to your three templates under the Templates section. Name each link with the title of the template, for example "Product Page Template".
  4. After you've committed and synced your changes via GitHub Desktop, you can submit both the timeline hyperlink and the link your three templates via Blackboard Learn. Note: Don't link to the local version on your computer. You need to access the live version on the web with the GitHub.io URL.

Rubric

Use the following rubric to ensure you receive the highest possible grade for the assignment:

Return to Assignments