HTML/CSS

to merge from bits of design. aaand break out.

• Browsers

Specs

• HTML Living Standard
• HTML: The Markup Language
• HTML5: Edition for Web Authors - omits UA aspects

• HTML Design Principles

• W3C: CSS (2010 snapshot)
• W3C Wiki: CSS

Docs, guides, etc.

• Dochub.io

• About HTML semantics and front-end architecture
• http://htmlhelp.com/reference/css/structure.html
• HTML5 id/class name cheatsheet - Or, “The mapping of HTML5 structural elements to id and class names for use with
  s”

• Mozilla Developer Network
• Introduction to The Web Standards Curriculum - opera
• Web Education Community Group Wiki - w3c
  • Floats and clearing

• http://learn.shayhowe.com/html-css/

• https://github.com/necolas/idiomatic-css
• http://smacss.com/

• http://www.betaversion.org/~stefano/linotype/news/169/

• http://www.evolutionoftheweb.com

Tools

• https://developers.google.com/chrome-developer-tools/
  • https://www.youtube.com/watch?v=N8SS-rUEZPg
  • http://www.chromium.org/devtools

• http://jtaby.com/2012/04/23/modern-web-development-part-1.html

• Request Maker - Log, edit and send HTTP requests

http://unify.eightshapes.com/what-you-get/

• http://getfirebug.com/

div { outline:1px solid red; }

• http://www.red-root.com/sandbox/holmes/
• http://csstidy.sourceforge.net/

• http://speckyboy.com/2009/02/16/32-indispensable-bookmarklets-for-web-developers-and-designers/
• http://aymanh.com/css-debugging-bookmarklets - outline is border not outline >_<
• http://subtlegradient.com/articles/2009/07/23/subtle_hover_css_inspect_bookmarklet.html

Testing

Browsers I use:

• Chromium 21 (Dev)
• Google Chrome 19
• Firefox 13
• Firefox 16 (Nightly)
• Opera 12

To check

• http://www.webupd8.org/2011/09/test-websites-in-internet-explorer-9-8.html

Resets, etc.

Different browsers have different defaults.

• http://necolas.github.com/normalize.css/ [1]
  • http://nicolasgallagher.com/about-normalize-css/

• http://html5boilerplate.com/
  • http://html5boilerplate.com/docs/css/

Specificity

p has a specificity of 1 (1 HTML)
div p has a specificity of 2 (2 HTML; 1+1)
.sith has a specificity of 10 (1 class)
div p.sith has a specificity of 12 (2 HTML and a class; 1+1+10)
#sith has a specificity of 100 (1 id)
body #darkside .sith p has a specificity of 112 (HTML, id, class, HTML; 1+100+10+1)

[2] [3] ([4]),[5]

Properties

• http://www.w3.org/community/webed/wiki/CSS/Properties

Selectors

• http://www.w3.org/community/webed/wiki/CSS/Selectors
• http://twostepmedia.co.uk/cssselectors/
• http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

h1 + h2
  <h1></h1><h2></h2>

h1 > h2
  <h1><h2></h2></h1>

Positioning

display: block - default 100% width, flows vertically
display: inline - consumes width of content, flows horizontally
display: inline-block
display: table-cell - vertical align method [6]
  http://www.quirksmode.org/css/display.html

float - floats element next to containing box or other floated element

position: absolute - out of flow

• Google HTML/CSS/Javascript from the Ground Up Class: CSS Walkthrough - video

rgba(0, 0, 0, 0.2) - shadow

• https://github.com/andreasbovens/understanding-viewport
• http://www.brainjar.com/css/positioning/default.asp

• http://blog.themeforest.net/tutorials/vertical-centering-with-css/ [7]
• http://css-tricks.com/what-is-vertical-align/
• http://www.barelyfitz.com/screencast/html-training/css/positioning/

Tips

• http://paulirish.com/2012/box-sizing-border-box-ftw/ [8]

Responsive

• Multi-Device Layout Patterns
• Supporting high-dpi pixel-dense "Retina" Displays like iPhones or the iPad 3 with CSS or IMG

• http://webdesignerwall.com/tutorials/css-elastic-videos
• http://drupal.org/node/1413558
• http://drupal.org/node/1535954
• http://groups.drupal.org/node/233238

• http://drupal.org/project/fitvids - js lib

Accessibility

See also Design

Headings should not be removed using display:none, because it removes the headings from assistive technology. Instead headings can be made invisible to sighted users using CSS class="element-invisible". [9]

Background

• http://whereswalden.com/files/mozilla/background-size/more-examples.html

• http://www.impressivewebs.com/image-tint-blend-css/

Outline

• http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines
• http://htmldog.com/reference/cssproperties/outline/

Animations & transitions

• https://developer.mozilla.org/en/CSS/CSS_animations
• http://www.jasondavies.com/animated-bezier/
• http://daneden.me/animate/

Grid

• http://960.gs
• http://compass-style.org/reference/blueprint/grid/

• http://grids.heroku.com/
• http://www.gridsystemgenerator.com/gs01.php
• http://gridpak.com/
• http://www.designbygrid.com/tools

• http://blog.centresource.com/2009/06/15/6-tips-and-tricks-for-designing-with-960/
• http://divitodesign.com/css/tricks-to-solve-960-css-framework-problems/

• http://hashgrid.com/ - js grid display

Vertical rhythm

• The Elements of Typographic Style Applied to the Web
  • Vertical Motion
• http://24ways.org/2006/compose-to-a-vertical-rhythm - oft' linked to

• [10] [11]

Web

• http://www.gridlover.net/
• http://drewish.com/tools/vertical-rhythm - calculator, px based
• http://topfunky.com/baseline-rhythm-calculator/ - px based
• http://lamb.cc/typograph/ - Scale & Rhythm - fucking weird paddings

JS

• Syncotype-Alt
• http://www.fortes.com/2008/jmetronome-using-jquery-to-keep-typographic-rhythm

Bookmarklets

• http://gridwax.gs/ - great
• http://sfcgeorge.github.com/Grid-Bookmarklet/
• http://scribu.net/util/baseline-checker-bookmarklet.html

CSS

• Check Your Vertical Rhythm With CSS3 gradients
• http://basehold.it/

Sass

• See Sass

Font symbols

• http://news.ycombinator.com/item?id=3672526
• http://news.ycombinator.com/item?id=3675301

Sprites

• http://www.phpied.com/command-line-css-spriting/

Header, footer

• http://stackoverflow.com/questions/643879/css-to-make-html-page-footer-stay-at-bottom-of-the-page-with-a-minimum-height

Menus

• http://stackoverflow.com/questions/2865380/how-do-i-center-align-horizontal-ul-menu

Gradients

• ColorZilla Ultimate CSS Gradient Generator

Full screen

• https://developer.mozilla.org/en/DOM/Using_full-screen_mode

Misc

• http://mathiasbynens.be/notes/css-without-html

• http://davatron5000.github.com/deCSS3/ - bookmarklet to test pre css3 browsers

• http://www.youtube.com/watch?v=a2_6bGNZ7bA Faster HTML and CSS: Layout Engine Internals for Web Developers

• http://bootswatch.com/

Preprocess

• http://learnboost.github.com/stylus/
• https://github.com/visionmedia/nib

Frameworks

• https://github.com/zurb/foundation
• http://yeoman.io/