compass-layouts 1.0.0

data/.gitignore

@@ -0,0 +1 @@
+.sass-cache

data/Gemfile

@@ -0,0 +1,4 @@
+source "http://rubygems.org"
+
+# Specify your gem's dependencies in compass-layouts.gemspec
+gemspec

data/Rakefile

@@ -0,0 +1,2 @@
+require 'bundler'
+Bundler::GemHelper.install_tasks

data/compass-layouts.gemspec

@@ -0,0 +1,21 @@
+# -*- encoding: utf-8 -*-
+$:.push File.expand_path("../lib", __FILE__)
+require "compass-layouts/version"
+
+Gem::Specification.new do |s|
+  s.name        = "compass-layouts"
+  s.version     = Compass::Layouts::VERSION
+  s.platform    = Gem::Platform::RUBY
+  s.authors     = ["Chris Eppstein"]
+  s.email       = ["chris@eppsteins.net"]
+  s.homepage    = "http://chriseppstein.github.com/Compass-Layouts/"
+  s.summary     = %q{Just enough layout help.}
+  s.description = %q{Do not try and bend the grid. That's impossible. Instead... only try to realize the truth: There is no grid. Then you'll see, that it is not the grid that bends; it is only yourself.}
+
+  s.rubyforge_project = "compass-layouts"
+
+  s.files         = `git ls-files`.split("\n")
+  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.require_paths = ["lib"]
+end

data/compass_init.rb

@@ -0,0 +1,3 @@
+lib_dir = File.expand_path("lib", File.dirname(__FILE__))
+$: << lib_dir unless $:.include?(lib_dir)
+require "compass-layouts"

data/demo/config.rb

@@ -0,0 +1,12 @@
+# Require any additional compass plugins here.
+load File.join(File.dirname(__FILE__), "..")
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "javascripts"
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+line_comments = false
+output_style = :compact

data/demo/css/demo.css

@@ -0,0 +1,63 @@
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
+
+body { line-height: 1; color: black; background: white; }
+
+ol, ul { list-style: none; }
+
+table { border-collapse: separate; border-spacing: 0; vertical-align: middle; }
+
+caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }
+
+q, blockquote { quotes: "" ""; }
+q:before, q:after, blockquote:before, blockquote:after { content: ""; }
+
+a img { border: none; }
+
+article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }
+
+.clearfixed { *zoom: 1; }
+.clearfixed:after { content: "\0020"; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; }
+
+.column, .floated-layout aside, .fixed #page aside, .elastic #page aside, .fluid #page aside, .floated-layout article, .fixed #page article, .elastic #page article, .fluid #page article { display: inline; float: left; }
+
+.floated-layout aside, .fixed #page aside, .elastic #page aside, .fluid #page aside, .floated-layout article, .fixed #page article, .elastic #page article, .fluid #page article { width: 33.333%; }
+.floated-layout footer, .fixed #page footer, .elastic #page footer, .fluid #page footer { clear: left; }
+
+.boxed-layout, body.box-fixed, body.box-elastic, body.box-fluid { text-align: center; }
+.boxed-layout > *, body.box-fixed > *, body.box-elastic > *, body.box-fluid > * { text-align: left; }
+.boxed-layout > #page, body.box-fixed > #page, body.box-elastic > #page, body.box-fluid > #page { margin-left: auto; margin-right: auto; }
+.boxed-layout #page, body.box-fixed #page, body.box-elastic #page, body.box-fluid #page { display: -moz-box; display: -webkit-box; display: box; -moz-box-orient: vertical; -webkit-box-orient: vertical; box-orient: vertical; -moz-box-align: stretch; -webkit-box-align: stretch; box-align: stretch; }
+.boxed-layout #body, body.box-fixed #body, body.box-elastic #body, body.box-fluid #body { -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; display: block; display: -moz-box; display: -webkit-box; display: box; -moz-box-orient: horizontal; -webkit-box-orient: horizontal; box-orient: horizontal; -moz-box-align: stretch; -webkit-box-align: stretch; box-align: stretch; }
+.boxed-layout aside, body.box-fixed aside, body.box-elastic aside, body.box-fluid aside, .boxed-layout article, body.box-fixed article, body.box-elastic article, body.box-fluid article { -moz-box-flex: 1; -webkit-box-flex: 1; box-flex: 1; display: block; }
+
+.fixed #page { width: 960px; margin-left: auto; margin-right: auto; }
+
+.elastic #page { min-width: 640px; max-width: 1100px; margin-left: auto; margin-right: auto; }
+
+body.box-fixed #page { width: 960px; }
+
+body.box-elastic #page { min-width: 640px; max-width: 1100px; width: 100%; }
+
+body.box-fluid #page { width: 100%; }
+
+@media screen and (max-width: 500px) { .floated-layout aside, .fixed #page aside, .elastic #page aside, .fluid #page aside, .floated-layout article, .fixed #page article, .elastic #page article, .fluid #page article { float: none; width: auto; margin-left: auto; margin-right: auto; display: block; }
+  .boxed-layout #body, body.box-fixed #body, body.box-elastic #body, body.box-fluid #body { display: -moz-box; display: -webkit-box; display: box; -moz-box-orient: vertical; -webkit-box-orient: vertical; box-orient: vertical; -moz-box-align: stretch; -webkit-box-align: stretch; box-align: stretch; } }
+
+@media screen and (min-width: 800px) { .fluid #page aside { width: 25%; }
+  .fluid #page article { width: 50%; }
+  body.box-fluid article { -moz-box-flex: 2; -webkit-box-flex: 2; box-flex: 2; display: block; } }
+
+@media screen and (min-width: 1000px) { .fluid #page aside { width: 20%; }
+  .fluid #page article { width: 60%; }
+  body.box-fluid article { -moz-box-flex: 3; -webkit-box-flex: 3; box-flex: 3; display: block; } }
+
+@media screen and (min-width: 1200px) { .fluid #page aside { width: 16.667%; }
+  .fluid #page article { width: 66.667%; }
+  body.box-fluid article { -moz-box-flex: 4; -webkit-box-flex: 4; box-flex: 4; display: block; } }
+
+/* For demonstration purposes */
+header, footer { min-height: 200px; background-color: #959908; }
+
+aside { min-height: 400px; background-color: #992326; }
+
+article { min-height: 600px; background-color: #373B99; }

data/demo/demo.html

@@ -0,0 +1,35 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>Compass Layouts Demo</title>
+    <link rel="stylesheet" href="css/demo.css" type="text/css" media="screen">
+  </head>
+  <body class="fixed">
+    <div id="page">
+    <header>
+      This is the header.
+      <select onchange="document.body.className=this.value;">
+        <option value="fixed">floated fixed</option>
+        <option value="elastic">floated elastic</option>
+        <option value="fluid">floated fluid</option>
+        <option value="box-fixed">box fixed</option>
+        <option value="box-elastic">box elastic</option>
+        <option value="box-fluid">box fluid</option>
+      </select>
+    </header>
+    <div id="body">
+      <aside class="nav">
+        Left Side Nav
+      </aside>
+      <article>
+        This is the main content
+      </article>
+      <aside class="callout">
+        Right Side callout
+      </aside>
+    </div>
+    <footer>
+      This is the footer.
+    </footer>
+  </body>
+</html>

data/demo/sass/demo.scss

@@ -0,0 +1,115 @@
+@import "compass/layout/floated";
+@import "compass/layout/box";
+@import "compass/reset";
+
+@include reset-html5;
+
+// Some base classes for conciseness.
+.clearfixed { @include pie-clearfix; }
+.column { @include floated(left, 0, 0); }
+
+// A base class for our floated layouts
+.floated-layout {
+  aside   { @extend .column; }
+  article { @extend .column; }
+  aside, article { width: 33.333%; }
+  footer { clear: left; }
+}
+
+// A base class for our boxed layouts
+.boxed-layout {
+  @include centered-box-container("#page");
+  #page   { @include flexbox(vertical); }
+  #body   { @include liquid; @include flexbox(horizontal); }
+  aside,
+  article { @include liquid; }
+}
+
+// A fixed width layout
+.fixed #page {
+  width: 960px;
+  @include centered;
+  @extend .floated-layout;
+}
+
+// An elastic layout
+.elastic #page {
+  min-width: 640px;
+  max-width: 1100px;
+  @include centered;
+  @extend .floated-layout;
+}
+
+// A fluid layout (full width)
+.fluid #page {
+  @extend .floated-layout;
+}
+
+// a fixed box layout
+body.box-fixed {
+  @extend .boxed-layout;
+  #page { width: 960px; }
+}
+
+// an elastic box layout
+body.box-elastic {
+  @extend .boxed-layout;
+  #page { min-width: 640px; max-width: 1100px; width: 100%;}
+}
+
+// a fluid box layout
+body.box-fluid {
+  @extend .boxed-layout;
+  #page { width: 100%; }
+}
+
+// Respond to browser resizing to keep the layout readable
+@media screen and (max-width: 500px) {
+  .floated-layout {
+    aside, article { @include sunken; display: block; }
+  }
+  .boxed-layout {
+    #body   { @include flexbox(vertical); }
+  }
+}
+
+@media screen and (min-width: 800px) {
+  .fluid #page {
+    // with a floated layout we have to recalculate all float proportions
+    aside   { width: percentage(1/4); }
+    article { width: percentage(2/4); }
+  }
+  body.box-fluid {
+    // with a box layout, the proportions are recalculated automatically.
+    // The article will be twice the width of the asides.
+    article { @include liquid(2); }
+  }
+}
+
+@media screen and (min-width: 1000px) {
+  .fluid #page {
+    aside   { width: percentage(1/5); }
+    article { width: percentage(3/5); }
+  }
+  body.box-fluid {
+    // The article will be three times the width of the asides.
+    article { @include liquid(3); }
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .fluid #page {
+    aside   { width: percentage(1/6); }
+    article { width: percentage(4/6); }
+  }
+  body.box-fluid {
+    // The article will be four times the width of the asides.
+    article { @include liquid(4); }
+  }
+}
+
+/* For demonstration purposes */
+header,
+footer  { min-height: 200px; background-color: #959908; }
+aside   { min-height: 400px; background-color: #992326; }
+article { min-height: 600px; background-color: #373B99; }

data/lib/compass-layouts.rb

@@ -0,0 +1,13 @@
+module Compass
+  module Layouts
+  end
+end
+
+%w(version).each do |f|
+  require "compass-layouts/#{f}"
+end
+
+Compass::Frameworks.register(
+  "compass-layouts",
+  File.expand_path("..", File.dirname(__FILE__))
+)

data/lib/compass-layouts/version.rb

@@ -0,0 +1,5 @@
+module Compass
+  module Layouts
+    VERSION = "1.0.0"
+  end
+end

data/stylesheets/compass/layout/_box.scss

@@ -0,0 +1,47 @@
+@import "compass/css3/box";
+@import "shared";
+
+// this is an experimental layout module
+// based on the new box layout module in css3
+// it is not fully supported by all browsers
+// and will not degrade particularly gracefully
+// unless you take some action to do so.
+
+// $orientation - One of: horizontal, vertical
+// $align - One of: start, end, center, baseline, stretch (default)
+@mixin flexbox($orientation: $default-box-orient, $align: $default-box-align) {
+  @include display-box;
+  @include box-orient($orientation);
+  @include box-align($align);
+}
+
+// Distribute the children of the box. This is an alias for box-pack.
+// Can be one of `start`, `end`, `center`, `justify`
+@mixin distribute-children($distribute) {
+  @include box-pack($distribute);
+}
+
+// Makes a box liquid (relative to the box container)
+// The remaining space that is left after the fixed with
+// boxes is distributed proportionally across the liquid
+// elements according to the $size parameter which must be
+// a positive integer.
+@mixin liquid($size: 1) {
+  @if $size == none {
+    $size: 0;
+  }
+  @include box-flex($size);
+}
+
+// Mix this into the element that contains the flexbox
+// to make the box container centered (probably the body element).
+// $box - the selector that identifies the flexbox. 
+@mixin centered-box-container($box) {
+  text-align: center;
+  > * {
+    text-align: left;
+  }
+  > #{$box} {
+    @include centered;
+  }
+}

data/stylesheets/compass/layout/_floated.scss

@@ -0,0 +1,106 @@
+@import "compass/utilities/general/float";
+@import "compass/utilities/general/clearfix";
+@import "shared";
+
+// Direction of the float
+$compass-float-direction: left !default;
+// Set to 0 to disable gutters
+$compass-gutter-width: 10px !default;
+$compass-left-gutter-width: ceil($compass-gutter-width / 2) !default;
+$compass-right-gutter-width: $compass-gutter-width - $compass-left-gutter-width !default;
+
+// A floated element is generally assigned a width to achieve table-less alignment
+@mixin floated($side : $compass-float-direction, 
+               $left-gutter : $compass-left-gutter-width,
+               $right-gutter : $compass-right-gutter-width) {
+  @include float($side);
+  @if $left-gutter > 0 {
+    margin-left: $left-gutter;
+  }
+  @if $right-gutter > 0 {
+    margin-right: $right-gutter;
+  }
+}
+
+// Remove the gutter for a particular side of a floated element
+// pass `both` to disable the gutter on both sides.
+@mixin gutterless($side) {
+  @if $side == both {
+    margin-left: 0;
+    margin-right: 0;
+  } @else {
+    margin-#{$side}: 0;
+  }
+}
+
+// provides the base structure required to make an element pushable in
+// the specified direction (which defaults to `right`).
+@mixin pushable($side: opposite-position($compass-float-direction)) {
+  @include float($side);
+  position: relative;
+}
+
+// provides the base structure required to make an element pullable in
+// the specified direction (which defaults to `left`).
+@mixin pullable($side : $compass-float-direction) {
+  @include float($side);
+  position: relative;
+}
+
+// push an element in the specified direction by the specified amount.
+@mixin pushed($side, $amount) {
+  margin-#{$side}: -$amount;
+  margin-#{opposite-position($side)}: $amount;
+}
+
+// pull an element in the specified directionn by the specified amount.
+@mixin pulled($side, $amount) {
+  margin-#{$side}: $amount;
+}
+
+// Take an element out of the float if it had been made floated already.
+// This might be applied to an element to allow it to fill the remainder
+// of a row, in which case you'll probably want to make that element also
+// a float container.
+@mixin sunken {
+  float: none;
+  width: auto;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+@mixin act-like-blueprint {
+  .clearfixed { @include pie-clearfix; }
+  .column     { @include floated(left, 0, $compass-gutter-width); }
+  .last       { @include gutterless(right); }
+  .float-container { @extend .clearfixed; }
+  .container  { @extend .float-container; @include centered; }
+  .push       { @include pushable; }
+  .pull       { @include pullable; }
+}
+
+@mixin act-like-960 {
+  .clearfixed     { @include pie-clearfix; }
+  .grid           { @include floated(left, $compass-gutter-left-width, $compass-gutter-right-width); }
+  .alpha          { @include gutterless(left);  }
+  .omega          { @include gutterless(right); }
+  .container      { @extend .clearfixed;        }
+  .grid-container { @extend .container; @include centered;  }
+  .push           { @include pushable; }
+  .pull           { @include pullable; }
+}
+
+@mixin act-like-oocss {
+  .clearfixed { @include pie-clearfix; }
+  .line       { @extend .clearfixed; }
+  .unit       { @include floated(left, 0, 0); }
+  .lastUnit   { @extend .clearfixed; @include sunken; }
+  .size1of1   { @include sunken; }
+
+  @for $divisions from 2 through 5 {
+    @for $segment from 1 to $divisions {
+      .size#{$segment}of#{$divisions} { width: percentage($segment / $divisions); }
+    }
+  }
+}
+

data/stylesheets/compass/layout/_shared.scss

@@ -0,0 +1,8 @@
+// make an element centered within its fixed-width parent.
+// Can be applied to a top level float container to create
+// a centered layout within the window.
+@mixin centered {
+  margin-left: auto;
+  margin-right: auto;
+}
+

metadata

@@ -0,0 +1,81 @@
+--- !ruby/object:Gem::Specification 
+name: compass-layouts
+version: !ruby/object:Gem::Version 
+  hash: 23
+  prerelease: 
+  segments: 
+  - 1
+  - 0
+  - 0
+  version: 1.0.0
+platform: ruby
+authors: 
+- Chris Eppstein
+autorequire: 
+bindir: bin
+cert_chain: []
+
+date: 2011-07-05 00:00:00 -07:00
+default_executable: 
+dependencies: []
+
+description: "Do not try and bend the grid. That's impossible. Instead... only try to realize the truth: There is no grid. Then you'll see, that it is not the grid that bends; it is only yourself."
+email: 
+- chris@eppsteins.net
+executables: []
+
+extensions: []
+
+extra_rdoc_files: []
+
+files: 
+- .gitignore
+- Gemfile
+- Rakefile
+- compass-layouts.gemspec
+- compass_init.rb
+- demo/config.rb
+- demo/css/demo.css
+- demo/demo.html
+- demo/sass/demo.scss
+- lib/compass-layouts.rb
+- lib/compass-layouts/version.rb
+- stylesheets/compass/layout/_box.scss
+- stylesheets/compass/layout/_floated.scss
+- stylesheets/compass/layout/_shared.scss
+has_rdoc: true
+homepage: http://chriseppstein.github.com/Compass-Layouts/
+licenses: []
+
+post_install_message: 
+rdoc_options: []
+
+require_paths: 
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
+  requirements: 
+  - - ">="
+    - !ruby/object:Gem::Version 
+      hash: 3
+      segments: 
+      - 0
+      version: "0"
+requirements: []
+
+rubyforge_project: compass-layouts
+rubygems_version: 1.6.2
+signing_key: 
+specification_version: 3
+summary: Just enough layout help.
+test_files: []
+