HTML/CSS
to merge from bits of design. aaand break out. and generally sort.
Standards
- W3C Standards for the Open Web Platform
HTML
- HTML Living Standard
- HTML: The Markup Language
- HTML5: Edition for Web Authors - omits UA aspects
- HTML5: Editor's Draft - bleeding edge
CSS
- W3C: CSS (2010 snapshot)
Working Drafts
Docs, guides, etc.
Basics
- A Beginner’s Guide to HTML & CSS is a simple and comprehensive guide dedicated to helping beginners learn HTML and CSS. Outlining the fundamentals, this guide works through all common elements of front-end design and development.
- Dive Into HTML5 by Mark Pilgrim
- http://stac.ly/cheat/
- Mozilla Developer Network
- Introduction to The Web Standards Curriculum - opera
- Web Education Community Group Wiki - w3c
Resources
Articles
- About HTML semantics and front-end architecture
- HTML5 id/class name cheatsheet - Or, “The mapping of HTML5 structural elements to id and class names for use with s”
- Principles of writing consistent, idiomatic CSS
- Scalable and Modular Architecture for CSS - A flexible guide to developing sites small and large.
- http://blog.responsivenews.co.uk/post/18948466399/cutting-the-mustard
Tools
See also Browsers
Bookmarklets
Overlay
div { outline:1px solid red; }
- http://aymanh.com/css-debugging-bookmarklets - outline is border not outline >_<
javascript:(function(){var t=['div','table','form','address','blockquote','h1','h2','h3','h4','h5','h6','p','pre','dd','dl','dt','ol','ul'];var c=['blue','blue','blue','red','red','red','red','red','red','red','red','red','red','green','green','green','green','green'];for (var i in t){var l=document.getElementsByTagName(t[i]);var j=0,e;while(e=l.item(j++)){e.style.outline='solid '+c[i]+' 1px';}}})();
Testing
- Holmes is stand-alone diagnostic CSS stylesheet that can highlight potentially invalid, inaccessible or erroneous HTML(5) markup by adding one class.
- Helps by showing errors
Testing
Browsers available:
- Chromium 22 (Dev)
- Google Chrome 20
- Firefox 13
- Firefox 16 (Nightly)
- Opera 12
Plus Windows; Firefox, Chrome, IE.
To check
Resets, normalize, etc.
Different browsers have different defaults.
- http://stackoverflow.com/questions/6887336/what-is-the-different-between-normalize-css-and-reset-css
Properties
Selectors
- Selectors Level 3 - W3C Recommendation 29 September 2011
- 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>
- root - Selects the element that is at the root of the document. Almost certainly will select the <html> element, unless you are specifically working in some weird environment that somehow also allows CSS. Perhaps XML.
- first-child - Selects the first element of its type within a parent.
- last-child - Selects the last element of its type within a parent.
- nth-child(N) - Selects elements based on a simple provided algebraic expression (e.g. "2n" or "4n-1"). Has the ability to do things like select even/odd elements, "every third", "the first five", and things like that. Covered in more detail here with a tester tool.
- nth-of-type(N) - Works like :nth-child, but used in places where the elements at the same level are of different types. Like if inside a div you had a number of paragraphs and a number of images. You wanted to select all the odd images. :nth-child won't work there, you'd use div img:nth-of-type(odd). Particularly useful when working with definition lists and their alternating -dt- and -dd- elements.
- first-of-type - Selects the first element of this type within any parent. So if you have two divs, each had within it a paragraph, image, paragraph, image. Then div img:first-of-type would select the first image inside the first div and the first image inside the second div.
- last-of-type - Same as above, only would select the last image inside the first div and the last image inside the second div.
- nth-last-of-type(N) - Works like :nth-of-type, but it counts up from the bottom instead of the top.
- nth-last-child(N) - Works like :nth-child, but it counts up from the bottom instead of the top.
- only-of-type - Selects only if the element is the only one of its kind within the current parent.
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)
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 [5] http://www.quirksmode.org/css/display.html float - floats element next to containing box or other floated element position: absolute - out of flow
- https://github.com/andreasbovens/understanding-viewport
- http://www.brainjar.com/css/positioning/default.asp
- http://blog.themeforest.net/tutorials/vertical-centering-with-css/ [6]
- http://css-tricks.com/what-is-vertical-align/
- http://www.barelyfitz.com/screencast/html-training/css/positioning/
Tips
Responsive
Basics
- http://www.w3.org/community/webed/wiki/Optimizing_content_for_different_browsers:_the_RIGHT_way
- Mobile First - Luke Wroblewski, Nov 3 2009
- http://www.slideshare.net/pkattera/design-process-for-responsive-web-design
- http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/ - difference between fluid, adaptive and responsive
Viewport
- Safari Developer Library: Configuring the Viewport
- MDN: Using the viewport meta tag to control layout on mobile browsers
- tuts+: Quick Tip: Don’t Forget the Viewport Meta Tag
Examples
- Responsive Design, Responsively Illustrated
- Multi-Device Layout Patterns
- Media Queries - Many great examples
Media Types/Queries
- CSS 2: Media types
- Recognized media types
- e.g., all, screen, print, projection, etc.
- https://developer.mozilla.org/en/CSS/@media
- Recognized media types
- CSS 3: Media Queries - W3C Recommendation 19 June 2012
- MDN: CSS media queries
@media <media type (expressions)> { /* media-specific rules */ } @media screen and (min-width: 500px) and (max-width: 800px) { ... }
or
<link rel="stylesheet" media="<media type (expressions)>" href="specific.css" />
Templates
Mobile first responsive theming is the way to go these days.
From the Responsive Design Testing bookmarklet;
- 240 x 320 (mobile)
- 320 x 480 (mobile)
- 480 x 640 (small tablet)
- 768 x 1024 (tablet - portrait)
- 1024 x 768 (tablet - landscape)
- 1200 x 800 (desktop)
320andup
Mobile first system.
@media only screen and (min-width: 480px) { /* 480 =================================================== */ } @media only screen and (min-width: 600px) { /* 600 =================================================== */ } @media only screen and (min-width: 768px) { /* 768 =================================================== */ } @media only screen and (min-width: 992px) { /* 992 =================================================== */ } @media only screen and (min-width: 1382px) { /* 1382 =================================================== */ body { max-width: 1440px; } }
Other
- http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/ - deprecated method
- http://internet-alacarte.com/media-queries-template-for-browser-window-adjustments/ - basic example
- http://nmsdvid.com/snippets/
- http://www.getskeleton.com/
- http://bradfrostweb.com/blog/web/responsive-nav-patterns/
- http://justmarkup.com/log/2012/06/19/responsive-multi-level-navigation/
Shim
Articles
- Supporting high-dpi pixel-dense "Retina" Displays like iPhones or the iPad 3 with CSS or IMG
- A non-responsive approach to building cross-device webapps
Video
- CSS: Elastic Videos
- Responsive Media
- FitVids: Which class selector to use with embed videos from youtube
- Media: YouTube - Responsive Embeds
- http://drupal.org/project/fitvids - js lib
Grid
- Designing With Grid-Based Approach - Smashing Magazine
Frameworks
960.gs
- http://960.gs
- http://960.gs/demo.html
- 60px/20px | 12
- 40px/20px | 16
blueprint
- http://compass-style.org/reference/blueprint/grid/
- 12, 16, and 30px/10px | 24
- http://semantic.gs/
- less.js, sass, stylus
Generators
- http://grids.heroku.com/
- http://www.gridsystemgenerator.com/gs01.php
- http://gridpak.com/
- http://www.designbygrid.com/tools
- http://modulargrid.org
- 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/
Overlays
- http://hashgrid.com/ - js grid display
- http://gridwax.gs/ - grid bookmarklet
- http://peol.github.com/960gridder/ - grid and rhythm bookmarklet
- https://github.com/milkmiruku/960gridder - my fork of the above. 16 column, 24 line height.
Vertical rhythm
- The Elements of Typographic Style Applied to the Web
- http://24ways.org/2006/compose-to-a-vertical-rhythm - oft' linked to
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
Bookmarklets
- http://gridwax.gs/ - great
- http://sfcgeorge.github.com/Grid-Bookmarklet/
- http://scribu.net/util/baseline-checker-bookmarklet.html
CSS
Sass
- See Sass
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". [10]
Typography
- http://www.w3.org/TR/css3-fonts/
- http://www.html5rocks.com/en/tutorials/webfonts/quick/
- http://ie.microsoft.com/testdrive/graphics/opentype/opentype-fontbureau/index.html
- http://people.mozilla.com/~jkew/woff/ - sfnt2woff, convert existing TrueType/OpenType fonts to WOFF format
- FontForge - An outline font editor that lets you create your own postscript, truetype, opentype, cid-keyed, multi-master, cff, svg and bitmap (bdf, FON, NFNT) fonts, or edit existing ones. Also lets you convert one format to another.
- http://stackoverflow.com/questions/8942625/font-face-bold-in-ff-is-bolder-than-in-chrome
- http://www.w3.org/Talks/2010/0313-Fonts-SXSW/
- https://github.com/thefella/Responsive-type-references
- http://informationarchitects.net/blog/responsive-typography-the-basics/
- http://trentwalton.com/2012/06/19/fluid-type/
body article h1 h2 h3 p, ul small, aside
Kerning
- http://www.w3.org/TR/css3-fonts/#font-kerning-prop
- http://adamdscott.com/typography/kerning-for-the-web/
- http://adamdscott.com/typography/kerning-for-the-web/
- http://designshack.net/articles/typography/kerning-live-web-type-with-jquery-and-lettering-js/
- http://blog.typekit.com/2011/06/03/type-study-a-better-kerning-experience-with-kern-js/
- http://logofontandlettering.com/kernking.html - kerning ipsum
Font symbols
Background
- http://www.tizag.com/cssT/background.php/
- http://whereswalden.com/files/mozilla/background-size/more-examples.html
- http://css-tricks.com/perfect-full-page-background-image/
- http://www.vanseodesign.com/css/background-properties/ - w/ css3
Outline
- http://www.w3.org/TR/CSS21/ui.html#dynamic-outlines
- http://htmldog.com/reference/cssproperties/outline/
Data
Animations & transitions
- http://www.w3.org/TR/css3-animations/
- https://developer.mozilla.org/en/CSS/CSS_animations
- http://www.jasondavies.com/animated-bezier/
- http://daneden.me/animate/
Sprites
- http://jsfiddle.net/6PSVU/ - bottom: 0;
Menus
Gradients
Full screen
Misc
- 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
Preprocess
See also Sass
JS Shims
For fixing the lack of HTML5/CSS3 support in older browsers.
- http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
- http://ecsstender.org/
- http://selectivizr.com/