Difference between revisions of "HTML/CSS"

From Things and Stuff Wiki
Jump to navigation Jump to search
Line 81: Line 81:
 
* http://basehold.it/
 
* http://basehold.it/
 
* http://scribu.net/util/baseline-checker-bookmarklet.html
 
* http://scribu.net/util/baseline-checker-bookmarklet.html
 +
* http://www.fortes.com/2008/jmetronome-using-jquery-to-keep-typographic-rhythm
  
 
* [http://jransijn.tumblr.com/post/5304050674/resources-vertical-rhythm-in-webdesign] [http://designbyelle.com.au/journal/2008/02/14/vertical-rhythm-recent-resources/]
 
* [http://jransijn.tumblr.com/post/5304050674/resources-vertical-rhythm-in-webdesign] [http://designbyelle.com.au/journal/2008/02/14/vertical-rhythm-recent-resources/]

Revision as of 18:44, 8 June 2012


to merge from bits of design.

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)

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

Positioning

display: block - default 100% width, flows vertically
display: inline - consumes width of content, flows horizontally
display: inline-block
  http://www.quirksmode.org/css/display.html
float - floats element next to containing box or other floated element
position: absolute - out of flow
rgba(0, 0, 0, 0.2) - shadow

https://github.com/andreasbovens/understanding-viewport

Tips

Responsive

background

Animations & transitions

Resets, etc.

Grid

Vertical rhythm

Typography

Font symbols

Sprites

Header, footer

Menus

Gradients

Misc