Add reference documentation and examples for stretching module.

This commit is contained in:
Chris Eppstein 2010-11-12 16:45:19 -08:00
parent a82a5938b6
commit a8a2f42b60
4 changed files with 69 additions and 0 deletions

View File

@ -0,0 +1,8 @@
---
title: Compass Stretch Layout Example
description: How to do stretch out your elements.
framework: compass
stylesheet: compass/layout/_stretching.scss
example: true
---
= render "partials/example"

View File

@ -0,0 +1,17 @@
.example
Click on the the following links to make them stretch.
Click <a href="#">here</a> to dismiss it.
#stretch-container
%ul
%li
%a#stretch-full(href="#stretch-full")
This element is fully stretched.
%li
%a#stretch-offset(href="#stretch-offset")
This element is stretched with a 1em offset on each side.
%li
%a#stretch-x(href="#stretch-x")
This element is stretched horizontally.
%li
%a#stretch-y(href="#stretch-y")
This element is stretched vertically.

View File

@ -0,0 +1,29 @@
@import "compass/layout/stretching"
@import "compass/css3"
#stretch-container
border: 1px solid #999
min-width: 200px
min-height: 200px
position: relative
.stretched
$stretch-color: #4C6B99
border: 3px solid $stretch-color
+border-radius(8px)
display: block
background-color: darken($stretch-color, 30%)
text-align: center
vertical-align: middle
padding: 2em 0
#stretch-full:target
@extend .stretched
+stretch
#stretch-offset:target
@extend .stretched
+stretch(1em, 1em, 1em, 1em)
#stretch-x:target
@extend .stretched
+stretch-x
#stretch-y:target
@extend .stretched
+stretch-y

View File

@ -0,0 +1,15 @@
---
title: Compass Stretching
crumb: Stretching
framework: compass
stylesheet: compass/layout/_stretching.scss
layout: core
classnames:
- reference
- core
- layout
---
- render 'reference' do
%p
The stretch mixins allow you to style absolutely positioned elements
such that they will stretch to fill their positioning parent.