HTML/CSS

From Things and Stuff Wiki
Revision as of 17:06, 20 July 2012 by Milk (talk | contribs) (→‎Basics)
Jump to navigation Jump to search


to merge from bits of design. aaand break out. and generally sort.

Standards

HTML

CSS

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.

Resources

Articles

Tools

See also Browsers

Bookmarklets

Overlay

div { outline:1px solid red; }

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.

Properties

Selectors

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)

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

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

Tips

Mobile & Responsive

Basics

to review;

Examples

Viewport

High DPI

Media Types/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" />
  • device.js - a starting point for doing semantic, media query-based device detection without needing special server-side configuration, saving the time and effort required to do user agent string parsing.

Articles

320 and Up

@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

Navigation

Shim

  • css3-mediaqueries.js by Wouter van der Graaf is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+, Safari 3+ and Chrome already offer native support.

Video

Grid

Basics

Layout sizings

Quick resolution to grid width and layout list, wip;

  • 240 x 320 (mobile)
    • 3 60px columns, 20px gutter (960)
  • 320 x 480 (mobile)
    • 4 60px columns, 20px gutter (960)
  • 480 x 640 (small tablet)
    • 6 60px columns, 20px gutter (960)
  • 768 x 1024 (tablet - portrait)
  • 1024 x 768 (tablet - landscape)
    • 960s has no far-left/right gutter, but there is space here
      • 12 60px column, 20px gutter
      • 16 40px column, 20px gutter
    • 972 width
      • 12 54px column, 30px gutter
  • 1200 x 800 (desktop)

Sizes from the Responsive Design Testing bookmarklet. See also http://978.gs/browsers/

Frameworks, etc.

  • Blankwork is a simple, flexible and semantic grid system.
    • scss, flexible and semantic

fluid;

  • Frameless - Adapt column by column, not pixel by pixel.
    • adapts around 320, 480, 600, 900 and 1900 pixels
    • less, scss, grid overlay
  • The Fluid Baseline Grid System system was built with typographic standards in mind and combines principals of fluid-column layouts, baseline grids and mobile-first responsive design into a resolution independent and device agnostic framework. It is packed with CSS normalization, beautiful typographic standards, corrected bugs, common browser inconsistencies and improved usability.
  • Griddle is a fluid and modular grid system for modern browsers — IE8+, Firefox, Safari, Opera, Chrome.

Generators

Overlays

Vertical rhythm

Web

JS

Bookmarklets

CSS

Sass

Typography

  • 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.

Basics

font-size: 62.5% - set 1em equal to 10px 

body
article
h1
h2
h3
p, ul
small, aside

Kerning

Font symbols

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]

Background

Outline

Data

Animations & transitions

Sprites

Header, footer

Menus

Gradients

Full screen

Misc

JS Shims

For fixing the lack of HTML5/CSS3 support in older browsers.

Frameworks

Retrieved from "https://wiki.thingsandstuff.org/index.php?title=HTML/CSS&oldid=2332"