Difference between revisions of "HTML/CSS"
Jump to navigation
Jump to search
| Line 1: | Line 1: | ||
| − | # | + | == CSS == |
| + | tag | ||
| + | .class | ||
| + | #id | ||
| + | |||
| + | display: block - default 100% width, flows vertically | ||
| + | display: inline - consumes width of content, flows horizontally | ||
| + | |||
| + | float - floats element next to containing box or other floated element | ||
| + | |||
| + | position: absolute - out of flow | ||
| + | |||
| + | * [http://www.youtube.com/watch?v=_mgyfwYKpmQ Google HTML/CSS/Javascript from the Ground Up Class: CSS Walkthrough] | ||
| + | |||
| + | === Tips === | ||
| + | * http://paulirish.com/2012/box-sizing-border-box-ftw/ [http://www.jefftk.com/news/2012-02-18.html] | ||
| + | |||
| + | === Resets, etc. === | ||
| + | * https://github.com/necolas/normalize.css/wiki [http://stackoverflow.com/questions/6887336/what-is-the-different-between-normalize-css-and-reset-css] | ||
| + | |||
| + | * http://html5boilerplate.com/docs/css/ | ||
| + | |||
| + | === Grid === | ||
| + | * 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/ | ||
| + | |||
| + | === Vertical rhythm === | ||
| + | * http://24ways.org/2006/compose-to-a-vertical-rhythm - oft' linked to | ||
| + | |||
| + | * http://drewish.com/tools/vertical-rhythm | ||
| + | |||
| + | * https://github.com/pyrsmk/vertical-rhythmic - sass mixins (no sure if worth it) | ||
| + | |||
| + | === Typography === | ||
| + | * [http://drewish.com/tools/vertical-rhythm CSS with vertical rhythm] - drewish.com | ||
| + | * [http://lamb.cc/typograph/ Scale & Rhythm] | ||
| + | |||
| + | === 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 === | ||
| + | * [http://www.colorzilla.com/gradient-editor/ ColorZilla Ultimate CSS Gradient Generator] | ||
Revision as of 03:41, 19 February 2012
CSS
tag .class #id
display: block - default 100% width, flows vertically display: inline - consumes width of content, flows horizontally
float - floats element next to containing box or other floated element
position: absolute - out of flow
Tips
Resets, etc.
Grid
- 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/
Vertical rhythm
- http://24ways.org/2006/compose-to-a-vertical-rhythm - oft' linked to
- https://github.com/pyrsmk/vertical-rhythmic - sass mixins (no sure if worth it)
Typography
- CSS with vertical rhythm - drewish.com
- Scale & Rhythm