From b49f23499979e47e82a8fa31d49872af5e687df1 Mon Sep 17 00:00:00 2001 From: Eric Bollens Date: Tue, 16 Oct 2012 13:28:53 -0700 Subject: [PATCH] Move visibility readme to doc folder and sym link for template README.md [#125] --- doc/modules/base/Visibility.md | 45 ++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 doc/modules/base/Visibility.md diff --git a/doc/modules/base/Visibility.md b/doc/modules/base/Visibility.md new file mode 100644 index 0000000..18071ac --- /dev/null +++ b/doc/modules/base/Visibility.md @@ -0,0 +1,45 @@ +# Base/Block + +## Definition + +This library provides several helper utilities related to visibility. The +classes described in this module may be applied to any element and define +visibility unless the element is already hidden by a parent element. + +## Usages + +The `Base/Visibility/Hide` library provides a helper that sets visibility to +none for all devices. This is useful in the context of Javascript by adding and +removing this class to change visibility. An alternative might be using the +`display:none` property such as in jQuery. + +The `Base/Visibility/Responsive/Show` library provides helpers that set visibility +to none for devices with viewport dimensions that **do** meet the breakpoints +specified as `$base-breakpoint-small` and `$base-breakpoint-medium`. + +The `Base/Visibility/Responsive/Show` library provides helpers that set visibility +to none for devices with viewport dimensions that **don't** meet the breakpoints +specified as `$base-breakpoint-small` and `$base-breakpoint-medium`. + +## Features + +### Base/Visibility/Hide + +* `.hide` applies left-alignment to text + +### Base/Visibility/Responsive/Hide + +* `.hide-small` hides the element on all devices smaller than `$base-breakpoint-small` +* `.hide-medium` hides the element on all devices smaller than `$base-breakpoint-medium` and at least as large as `$base-breakpoint-small` +* `.hide-large` hides the element on all devices at least as large as `$base-breakpoint-medium` + +### Base/Visibility/Responsive/Show + +* `.show-small` shows the element on all devices smaller than `$base-breakpoint-small` +* `.show-medium` shows the element on all devices smaller than `$base-breakpoint-medium` and at least as large as `$base-breakpoint-small` +* `.show-large` shows the element on all devices at least as large as `$base-breakpoint-medium` + +## Responsive Considerations + +All visibility classes in `Base/Visibility/Responsive` relate visibility of an +element to \ No newline at end of file