Permalink
Browse files

Documentation updates to sync with site and recent changes

  • Loading branch information...
Jason Johnston
Jason Johnston committed Dec 5, 2010
1 parent 119c8d4 commit ee110db893c56b437969fccedf3ecb61846208e9
View
@@ -11,105 +11,51 @@
<h1>About PIE</h1>
-<h2>What is PIE?</h2>
-<p>PIE is a utility for Internet Explorer (currently versions 6-8) which gives it the ability to parse
-and render a number of the most useful CSS3 properties.</p>
+<!-- noformat on -->
-<h2>How does it work?</h2>
-<p>PIE is implemented as an attached behavior; in your CSS, you simply specify:</p>
-<pre><code>behavior: url(PIE.htc);</code></pre>
-<p>Once the behavior is attached, it looks for any of the supported CSS3 properties which might be attached to the
-target element, parses those properties, and renders them on the page.</p>
+<p>CSS Level 3 brings with it some incredibly powerful styling features. Rounded corners, soft drop shadows, gradient fills, and so on. These are the kinds of elements our designer friends love to use because they make for attractive sites, but are difficult and time-consuming to implement, involving complex sprite images, extra non-semantic markup, large JavaScript libraries, and other lovely hacks.</p>
+<p>CSS3 promises to do away with all that! But as we all know, due to Internet Explorer's lack of support for any of these features, <strong>we must be patient and refrain from using them</strong>, and make do with the same old tedious techniques for the foreseeable future.</p>
+
+<p><strong>Or must we?</strong></p>
+
+<p>PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties. Consider, if you will, the following CSS:</p>
+
+<pre><code>#myElement {
+ background: #EEE;
+ padding: 2em;
+ -moz-border-radius: 1em;
+ -webkit-border-radius: 1em;
+ border-radius: 1em;
+}</code></pre>
+
+<p>This results in a box with nicely rounded corners in any of today's modern browsers, except of course for IE 6, 7, or 8, which all display a square box. However, add the following single rule to that CSS:</p>
+
+<pre><code>#myElement {
+ ...
+ behavior: url(PIE.htc);
+}</code></pre>
+
+<p>Now the exact same rounded corners appear in IE! That's all there is to it. No, really, I mean it.</p>
+
+<p>PIE currently has full or partial support for the following CSS3 features:</p>
-<h2>What CSS3 properties are currently supported?</h2>
-<p>PIE currently has full or partial support for:</p>
<ul>
<li>border-radius</li>
<li>box-shadow</li>
<li>border-image</li>
<li>multiple background images</li>
- <li>linear-gradient background images</li>
+ <li>linear-gradient as background image</li>
</ul>
-<p>You can find detailed information about the levels of support in the <a href="properties.html">Supported CSS3
-Properties and Values</a> documentation.</p>
-
-
-<h2>How large is it?</h2>
-<p>The .htc behavior file is 28K. With gzip compression, it is 12K. (You do gzip your content, right?)</p>
-<p>It's pretty easy to save at least as much as that by using CSS3 instead of all the extra images, markup, and CSS
-you'd have to use otherwise. Also, it's important to note that the behavior file is only downloaded by IE, so in other
-browsers which support these CSS3 features natively, that's pure win.</p>
-
-
-<h2>What are the goals of the project?</h2>
-<p>Even though today's advanced browsers are starting to implement decent levels of CSS3 support, it will still be
-years before Web authors can start using these CSS3 features in widespread deployment. The main reason is, of course,
-that Internet Explorer does not yet implement any of these features, has a majority market share, and has a notoriously
-slow upgrade cycle among its users. IE9 promises to start implementing some CSS3, but like it or not it will still
-likely be years before IE8 and below shrink to a negligible percentage of users.</p>
-<p>PIE aims to drastically shorten that timeframe, by implementing a simple shim to make CSS3 "just work" in IE. Our
-goals are:</p>
-<ol>
- <li>
- <h3>Be simple to use</h3>
- <p>Applying PIE is extremely simple; in many cases the only thing you have to do is add the behavior property
- to your CSS.</p>
- </li>
- <li>
- <h3>Be a CSS-only solution</h3>
- <p>Many of the current solutions for implementing CSS3 features like border-radius are implemented as
- JavaScript libraries and require the author to write JavaScript to invoke them. That is less than ideal
- because it requires the CSS author to also know how to write JS, and it makes development slower and less
- maintainable because your styling code is scattered between CSS and JS files. PIE works entirely within the
- stylesheet, so you only write CSS and it's all in a single place.</p>
- </li>
- <li>
- <h3>Be seamless to the CSS author</h3>
- <p>There have been several articles and resources in recent months which show ways that you can make IE
- "mimic" certain CSS3 features, for example using IE filters to fake box-shadow, or jQuery plugins to implement
- rounded corners. The problem with these solutions is that they require a lot of IE-specific code on top of your
- real CSS3, increasing your development time and the size of your CSS files. PIE on the other hand uses your
- CSS3 directly whenever possible; you simply write real CSS3, and PIE handles it seamlessly.</p>
- <p>PIE handles attaching, detaching, and updating automatically without any intervention from the author. This
- means that, unlike some other solutions, PIE does not require you to explicitly initialize elements when they
- are added to or removed from the document via script, and does not require any sort of "update" method to be
- called when an element's position, size, or styles are modified on the fly.</p>
- <p>Another aspect of PIE's seamlessness is that it should be fully compatible with any JavaScript library the
- site author might choose to use. You can create elements and assign CSS3 styles to them in jQuery or YUI or
- MooTools or any other library and PIE will automatically apply itself. Also, PIE's objects are completely
- self-contained except for a single global <code>PIE</code> object, so there's no chance that it will
- override objects or functions from any other JS code.</p>
- </li>
- <li>
- <h3>Be as compliant with the CSS3 specs as possible</h3>
- <p>PIE aims to be a true CSS3 implementation for those features it supports, complying with the current spec
- drafts as closely as possible. The goal is to allow authors to write a single set of CSS3 code and have it
- "just work" between browsers.</p>
- </li>
- <li>
- <h3>Be as performant as possible</h3>
- <p>If it makes the browser feel sluggish (more so than IE normally does, that is) then it's useless. PIE was
- architected with performance in mind from the very beginning:</p>
- <ul>
- <li>Rendering elements are only updated when they need to be.</li>
- <li>CSS property values are only parsed when they have changed.</li>
- <li>Internal objects are created lazily, and cached when appropriate.</li>
- <li>The behavior script is written with file size in mind, and the most advanced JS compression tools
- available are used to minimize the file size, so the initial download is as fast as possible.</li>
- </ul>
- </li>
-</ol>
-
-
-<h2>What sites have used PIE?</h2>
-<p>(todo)</p>
-
-
-<h2>What are the licensing terms?</h2>
-<p>PIE is licensed under the <a href="http://github.com/lojjic/PIE/blob/master/LICENSE">Apache License Version 2.0</a>.</p>
+<p>Other features are under active development.</p>
+
+<p><strong>Want to learn more?</strong> View some live <a href="/demos">demos</a>, read the <a href="/documentation/">documentation</a>, and <a href="/download-latest">download PIE</a> to try it yourself.</p>
+
+<p>PIE is still a young project with big plans. But it's already good enough to save you a <em>lot</em> of time and make your life as a Web developer much easier. Happy CSS3 coding!</p>
+
+<!-- noformat off -->
View
@@ -3,16 +3,22 @@
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
- <title>PIE Documentation: Building PIE</title>
+ <title>PIE Documentation: Building PIE From Source</title>
</head>
<body>
-<h1>Building PIE</h1>
+<h1>Building PIE From Source</h1>
-<h2>Prerequisites</h2>
-<p>Building PIE is straightforward. You need the following tools installed:</p>
+
+<!-- noformat on -->
+
+<p>This document describes how you can build PIE from the most recent source code. This is useful if you want to get a feature or bug fix which hasn't yet made it into a release package. It's also necessary if you want to make changes to the code yourself to try and fix a bug or implement a new feature. If you do so, please consider contributing your changes back to the main project so we can all benefit!</p>
+
+<h2 id="prereqs">Prerequisites</h2>
+
+<p>Building PIE is straightforward. You need to have the following tools installed:</p>
<ol>
<li><a href="http://git-scm.com/">Git</a>, if you are going to be checking out the source from the Git repository</li>
@@ -24,7 +30,7 @@ <h2>Prerequisites</h2>
-<h2>Get the source code</h2>
+<h2 id="getsource">Get the source code</h2>
<p>You have two options for getting the source:</p>
@@ -40,7 +46,7 @@ <h2>Get the source code</h2>
-<h2>Perform the build</h2>
+<h2 id="build">Perform the build</h2>
<p>From the root directory of your local copy of the source code, invoke the following command in the terminal:</p>
@@ -56,6 +62,7 @@ <h2>Perform the build</h2>
very large so it should not be deployed in production environments.</li>
</ul>
+<!-- noformat off -->
</body>
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+ <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
+ <title>PIE Documentation: Getting Started</title>
+
+</head>
+<body>
+
+<h1>Getting Started</h1>
+
+
+
+<!-- noformat on -->
+
+<p>The following instructions should get you up and running with PIE in most circumstances. If you run into
+problems along the way, consult our <a href="/documentation/known-issues/">known issues</a> page, or ask
+for help in the <a href="http://css3pie.com/forum">forums</a>.</p>
+
+<h2>Step 1: Download it</h2>
+
+<p><a href="/download-latest">Download the PIE distribution</a> and unzip it somewhere.</p>
+
+<h2>Step 2: Upload it</h2>
+
+<p>Inside the unzipped directory, you will find a file named PIE.htc. This is the behavior file for IE,
+and is what does all the magic. Upload this file to the server where you're going to serve pages using
+CSS3. It doesn't matter where exactly, as long as you know where it is.</p>
+
+<h2>Step 3: Write some CSS3</h2>
+
+<p>Assuming you already have a HTML document, let's say you want to give one of its elements rounded corners.
+Create a CSS rule for that element and give it a border-radius style like so:</p>
+
+<pre><code>#myAwesomeElement {
+ border: 1px solid #999;
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px;
+}</code></pre>
+
+<p>(Note the -webkit- and -moz- prefixed versions; these are necessary to make the rounded corners work in
+WebKit and Mozilla-based browsers.)</p>
+
+<h2>Step 4: Apply PIE</h2>
+
+<p>In that same CSS rule, add the following style line:</p>
+
+<pre><code>behavior: url(path/to/PIE.htc);</code></pre>
+
+<p>Of course you will need to adjust the path to match where you uploaded PIE.htc in step 2. <em>Note: this
+path is relative to the HTML file being viewed, not the CSS file it is called from.</em></p>
+
+<h2>Step 5: View it in IE</h2>
+
+<p>If all went well, at this point you should be able to load the page in IE and see the CSS3 rounded corners
+rendered just like other browsers. Now you can play around with some of the other supported CSS3 decorations
+like box-shadow. See the documentation on <a href="/documentation/supported-css3-features/">supported CSS3
+features</a> to see exactly what PIE can do. Have fun!</p>
+
+<!-- noformat off -->
+
+
+</body>
+</html>
Oops, something went wrong.

0 comments on commit ee110db

Please sign in to comment.