Permalink
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/crossdomain.md
  4. +134 −0 docs/css.md
  5. +506 −0 docs/extend.md
  6. +66 −0 docs/faq.md
  7. +322 −0 docs/htaccess.md
  8. +169 −0 docs/html.md
  9. +30 −0 docs/js.md
  10. +25 −0 docs/misc.md
  11. +36 −0 docs/readme.md
  12. +21 −0 docs/todo.md
  13. +159 −0 docs/usage.md
  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
View
@@ -0,0 +1,15 @@
+<?xml version="1.0"?>
+<!DOCTYPE cross-domain-policy SYSTEM "http://www.adobe.com/xml/dtds/cross-domain-policy.dtd">
+<cross-domain-policy>
+ <!-- Read this: www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html -->
+
+ <!-- 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"/>
+ -->
+</cross-domain-policy>
View
@@ -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:before,
.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:before,
.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;
}
.btn-group:before,
View
@@ -0,0 +1,20 @@
+[Documentation table of contents](README.md)
+
+# 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
+specification](http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html)
+
+Read the [Cross-domain policy file
+specification](http://learn.adobe.com/wiki/download/attachments/64389123/CrossDomain_PolicyFile_Specification.pdf?version=1)
+- (PDF, 129 KB)
View
@@ -0,0 +1,134 @@
+[Documentation table of contents](README.md)
+
+# The CSS
+
+The Kickoff starting CSS includes:
+
+* [Normalize.css](https://github.com/necolas/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](http://necolas.github.com/normalize.css/) 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](http://www.webaim.org/techniques/css/invisiblecontent/), [Hiding
+content for
+accessibility](http://snook.ca/archives/html_and_css/hiding-content-for-accessibility),
+[HTML5 Boilerplate
+issue/research](https://github.com/h5bp/html5-boilerplate/issues/194/).
+
+#### `.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
+content.
+
+#### `.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
+clearfix](http://nicolasgallagher.com/micro-clearfix-hack/).
+
+
+## Media Queries
+
+The boilerplate makes it easy to get started with a "Mobile First" and
+[Responsive Web
+Design](http://www.alistapart.com/articles/responsive-web-design/) approach to
+development. But it's worth remembering that there are [no silver
+bullets](http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/).
+
+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](https://github.com/h5bp/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](http://www.phpied.com/delay-loading-your-print-css/).
+* 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](http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Grammar_and_rules).
+* 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](http://en.wikipedia.org/wiki/Widows_and_orphans) 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.