Skip to content

Instantly share code, notes, and snippets.

@notenociz

notenociz/How-I-Do-It.md

Last active October 14, 2016 15:24
Show Gist options
  • Save notenociz/e8efc5b566e3b4ca732e to your computer and use it in GitHub Desktop.
Save notenociz/e8efc5b566e3b4ca732e to your computer and use it in GitHub Desktop.
Download ZIP
A barebones, dot point guide to how I prototype websites.
Raw
How-I-Do-It.md

How I do it

Rapidly Protptyping it the enociz way

  1. Sketch a low fidelity design on paper to get a general feel of what you're going to make
  2. Write up content or get it written by someone else before you start (preferably written in Markdown) (don't use ipsums if you can; always try to use the actual content)
  3. Turn writing into semantic markup using <header>, <footer>, <nav>, <h1>-<h6>, <section>, <main>, <article> and <aside> tags
  4. Import semantic markup into initproj starter page
  5. set up all tags etc. needed in the <head>
  6. Use initproj, colors, scaffold and typos along with Tachyons or BassCSS (I wonder how Gemma by colepeters is going to be) to quickly add classes to elements and style as necessary
  7. Head into style.css file and style things that need more than just one liners such as animations (or use VHS by jxnblk for animations)

Tenets of my trade

  • Make it Simple, Efficient and Epic (SEE)
  • Be semantic
  • Content before styles
  • Stray away from using CSS for interactions (such as :hover to make things hide and appear)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment