From cb739a5d724eaa1b622df8f54bdbee31484c1a95 Mon Sep 17 00:00:00 2001 From: Eric Bollens Date: Tue, 16 Oct 2012 13:13:30 -0700 Subject: [PATCH] Move image replacement readme to doc folder and sym link for template README.md [#125] --- doc/modules/base/Image-Replacement.md | 53 ++++++++++++++++++++++ template/base/image-replacement/README.md | 54 +---------------------- 2 files changed, 54 insertions(+), 53 deletions(-) create mode 100644 doc/modules/base/Image-Replacement.md mode change 100644 => 120000 template/base/image-replacement/README.md diff --git a/doc/modules/base/Image-Replacement.md b/doc/modules/base/Image-Replacement.md new file mode 100644 index 0000000..47529be --- /dev/null +++ b/doc/modules/base/Image-Replacement.md @@ -0,0 +1,53 @@ +# Base/Image Replacement + +## Definition + +This library provides utility classes for applying image replacement to an element. + +## Usages + +* Apply image replacement to an element + +## Features + +The `.ir` class can be added to an element to apply image replacement to that element. + +Image replacement can be used to replace a text element within a document with an image +without placing an image directly in the markup. For example, if a document contained a +link to a Twitter account page using an image of the Twitter logo, it could be implemented +as follows: + +```html +Twitter +``` + +However, the `img` element does not add semantic value to the page in this example; +the image is simply a design implementation. Ideally, we would want to have the +following HTML: + +```html +Twitter +``` + +And then replace the inner text with an image. Image replacement allows for this. + +To apply image replacement to an element, add the `.ir` class to the element and +then create a CSS declaration containing the width, height, and background image to +use in image replacement. For example: + +```html +

Website Title

+``` + +```css +h1 +{ + background-image: url(main-logo.png); + height: 200px; + width: 500px; +} +``` + +## Responsive Considerations + +None \ No newline at end of file diff --git a/template/base/image-replacement/README.md b/template/base/image-replacement/README.md deleted file mode 100644 index 47529be..0000000 --- a/template/base/image-replacement/README.md +++ /dev/null @@ -1,53 +0,0 @@ -# Base/Image Replacement - -## Definition - -This library provides utility classes for applying image replacement to an element. - -## Usages - -* Apply image replacement to an element - -## Features - -The `.ir` class can be added to an element to apply image replacement to that element. - -Image replacement can be used to replace a text element within a document with an image -without placing an image directly in the markup. For example, if a document contained a -link to a Twitter account page using an image of the Twitter logo, it could be implemented -as follows: - -```html -Twitter -``` - -However, the `img` element does not add semantic value to the page in this example; -the image is simply a design implementation. Ideally, we would want to have the -following HTML: - -```html -Twitter -``` - -And then replace the inner text with an image. Image replacement allows for this. - -To apply image replacement to an element, add the `.ir` class to the element and -then create a CSS declaration containing the width, height, and background image to -use in image replacement. For example: - -```html -

Website Title

-``` - -```css -h1 -{ - background-image: url(main-logo.png); - height: 200px; - width: 500px; -} -``` - -## Responsive Considerations - -None \ No newline at end of file diff --git a/template/base/image-replacement/README.md b/template/base/image-replacement/README.md new file mode 120000 index 0000000..ea3d28a --- /dev/null +++ b/template/base/image-replacement/README.md @@ -0,0 +1 @@ +../../../doc/modules/base/Image-Replacement.md \ No newline at end of file