Browse files

Add initial documentation

  • Loading branch information...
mrmartineau committed Sep 11, 2012
1 parent 2c15185 commit 63401551ca5b9ed31989391925b306b2e0061b32
Showing with 1,599 additions and 88 deletions.
  1. +15 −0 crossdomain.xml
  2. +6 −0 css/kickoff.css
  3. +20 −0 docs/
  4. +134 −0 docs/
  5. +506 −0 docs/
  6. +66 −0 docs/
  7. +322 −0 docs/
  8. +169 −0 docs/
  9. +30 −0 docs/
  10. +25 −0 docs/
  11. +36 −0 docs/
  12. +21 −0 docs/
  13. +159 −0 docs/
  14. +11 −1 examples/carousel.html
  15. +6 −2 examples/elements.html
  16. +20 −1 examples/forms.html
  17. +0 −1 examples/grids.html
  18. +16 −2 examples/sprites.html
  19. +37 −81 index.html
@@ -0,0 +1,15 @@
+<?xml version="1.0"?>
+<!DOCTYPE cross-domain-policy SYSTEM "">
+ <!-- Read this: -->
+ <!-- Most restrictive policy: -->
+ <site-control permitted-cross-domain-policies="none"/>
+ <!-- Least restrictive policy: -->
+ <!--
+ <site-control permitted-cross-domain-policies="all"/>
+ <allow-access-from domain="*" to-ports="*" secure="false"/>
+ <allow-http-request-headers-from domain="*" headers="*" secure="false"/>
+ -->
@@ -40,6 +40,8 @@ html {
/* 1 */
-webkit-text-size-adjust: 100%;
+ /* 2 */
-ms-text-size-adjust: 100%;
/* 2 */
@@ -687,6 +689,7 @@ img {
display: block;
list-style-type: none;
zoom: 1;
+ zoom: 1;
.block-grid:after {
@@ -1388,6 +1391,7 @@ select:focus:required:invalid:focus {
background-color: #f5f5f5;
border-top: 1px solid #ddd;
zoom: 1;
+ zoom: 1;
.form-actions:after {
@@ -1618,6 +1622,7 @@ legend + .control-group {
.form-horizontal .control-item {
margin-bottom: 24px;
zoom: 1;
+ zoom: 1;
.form-horizontal .control-item:before,
.form-horizontal .control-item:after {
@@ -2699,6 +2704,7 @@ input[type="submit"].btn.btn-mini {
.btn-group {
position: relative;
zoom: 1;
+ zoom: 1;
*margin-left: .3em;
@@ -0,0 +1,20 @@
+[Documentation table of contents](
+# crossdomain.xml
+A cross-domain policy file is an XML document that grants a web client—such as
+Adobe Flash Player, Adobe Reader, etc., permission to handle data across
+multiple domains. When a client hosts content from a particular source domain
+and that content makes requests directed towards a domain other than its own,
+the remote domain would need to host a cross-domain policy file that grants
+access to the source domain, allowing the client to continue with the
+transaction. Policy files grant read access to data, permit a client to include
+custom headers in cross-domain requests, and are also used with sockets to
+grant permissions for socket-based connections.
+For full details, check out Adobe's article about the [cross-domain policy file
+Read the [Cross-domain policy file
+- (PDF, 129 KB)
@@ -0,0 +1,134 @@
+[Documentation table of contents](
+# The CSS
+The Kickoff starting CSS includes:
+* [Normalize.css](
+* Useful Kickoff defaults.
+* Common helpers.
+* Placeholder media queries.
+* Print styles.
+This starting CSS does not rely on the presence of conditional classnames,
+conditional style sheets, or Modernizr. It is ready to use whatever your
+development preferences happen to be.
+## Normalize.css
+Normalize.css is a modern, HTML5-ready alternative to CSS resets. It contains
+extensive inline documentation. Please refer to the [Normalize.css
+project]( for more information.
+## Kickoff defaults
+This project includes a handful of base styles that build upon Normalize.css.
+These include:
+* Basic typography settings to provide improved text readability by default.
+* Protection against unwanted `text-shadow` during text highlighting.
+* Tweaks to default image alignment, fieldsets, and textareas.
+* A pretty Chrome Frame prompt.
+You are free to modify or add to these base styles as your project requires.
+## Common helpers
+#### `.ir`
+Add the `.ir` class to any element you are applying image-replacement to. When
+replacing an element's content with an image, make sure to also set a specific
+`background-image: url(pathtoimage.png);`, `width`, and `height` so that your
+replacement image appears.
+#### `.is-hidden`
+Add the `.hidden` class to any elements that you want to hide from all
+presentations, including screen readers. It could be an element that will be
+populated later with JavaScript or an element you will hide with JavaScript. Do
+not use this for SEO keyword stuffing. That is just not cool.
+#### `.visuallyhidden`
+Add the `.visuallyhidden` class to hide text from browsers but make it
+available for screen readers. You can use this to hide text that is specific to
+screen readers but that other users should not see. [About invisible
+content](, [Hiding
+content for
+[HTML5 Boilerplate
+#### `.invisible`
+Add the `.invisible` class to any element you want to hide without affecting
+layout. When you use `display: none` an element is effectively removed from the
+layout. But in some cases you want the element to simply be invisible while
+remaining in the flow and not affecting the positioning of surrounding
+#### `.group` or `.clearfix`
+Adding `.clearfix` to an element will ensure that it always fully contains its
+floated children. There have been many variants of the clearfix hack over the
+years, and there are other hacks that can also help you to contain floated
+children, but the HTML5 Boilerplate currently uses the [micro
+## Media Queries
+The boilerplate makes it easy to get started with a "Mobile First" and
+[Responsive Web
+Design]( approach to
+development. But it's worth remembering that there are [no silver
+We include a placeholder Media Queries to build up your mobile styles for wider
+viewports and high-resolution displays. It's recommended that you adapt these
+Media Queries based on the content of your site rather than mirroring the fixed
+dimensions of specific devices.
+If you do not want to take a "Mobile First" approach, you can simply edit or
+remove these placeholder Media Queries. One possibility would be to work from
+wide viewports down and use `max-width` MQs instead, e.g., `@media only screen
+and (max-width: 480px)`.
+Take a look into the [Mobile
+Boilerplate]( for features that are
+useful when developing mobile wep apps.
+## Print styles
+* Print styles are inlined to [reduce the number of page
+ requests](
+* We strip all background colors and change the font color to dark gray and
+ remove text-shadow. This is meant to help save printer ink.
+* Anchors do not need colors to indicate they are linked. They are underlined
+ to indicate so.
+* Anchors and Abbreviations are expanded to indicate where users reading the
+ printed page can refer to.
+* But we do not want to show link text for image replaced elements (given that
+ they are primarily images).
+### Paged media styles
+* Paged media is supported only in a [few
+ browsers](
+* Paged media support means browsers would know how to interpret instructions
+ on breaking content into pages and on orphans/widows.
+* We use `page-break-inside: avoid;` to prevent an image and table row from
+ being split into two different pages, so use the same `page-break-inside:
+ avoid;` for that as well.
+* Headings should always appear with the text they are titles for. So, we
+ ensure headings never appear in a different page than the text they describe
+ by using `page-break-after: avoid;`.
+* We also apply a default margin for the page specified in `cm`.
+* We do not want [orphans and
+ widows]( to appear on pages
+ you print. So, by defining `orphans: 3` and `widows: 3` you define the minimal
+ number of words that every line should contain.
Oops, something went wrong.

0 comments on commit 6340155

Please sign in to comment.