gliss-layout 0.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: c48a75fed0a96d5ec476c4acbb3ea18b5c5c5f01
+  data.tar.gz: d91c3c43e35541b6af630a2e06e98ded60483f58
+SHA512:
+  metadata.gz: 83faa853b0a9a88fbc707013e81ff8af029d42f7d8695964aa53b2fc8cd16b83d6771c55292f1ac1a0a97841c6192c62a2fe95e5d632a7b11e9bfadab474fc84
+  data.tar.gz: ccaae1c1a7dbdb77ce6c09c9a21877734ba4eea7a9d9ee595abec84a651d4e04554e1dc2111befd43b2ead401d721b3eeea030c1536e688766cd6d6a08808724

data/changelog.md

@@ -0,0 +1,3 @@
+# Version 0.0.0
+
+Initial release

data/lib/gliss.rb

@@ -0,0 +1,28 @@
+# All gems that are required for this extension to work should go here.
+# These are the requires you would normally put in your config.rb file
+# By default, you should always included Compass. Do not include your
+#  extension.
+require 'compass'
+
+# This tells Compass what your Compass extension is called, and where to find
+#  its files
+extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
+Compass::Frameworks.register('gliss-layout', :path => extension_path)
+
+# Version and date of version for your Compass extension.
+# Replace Gliss with the name of your extension
+#  Letters, numbers, and underscores only
+#  Version is a number. If a version contains alphas, it will be created as
+#    a prerelease version
+#  Date is in the form of YYYY-MM-DD
+module Gliss
+  VERSION = "0.0.0"
+  DATE = "2015-04-06"
+end
+
+# This is where any custom SassScript should be placed. The functions will be
+#  available on require of your extension without the need for users to import
+#  any partials. Uncomment below.
+
+# module Sass::Script::Functions
+# end

data/license.md

@@ -0,0 +1,11 @@
+BSD license
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

data/readme.md

@@ -0,0 +1,141 @@
+# Gliss
+
+Gliss is a constraint based layout system for articles. It uses the CSS properties `width` and `max-width` instead of media queries to change the layout at different viewport sizes. You can [see a demo here](http://gliss.pgdn.us/), and the [related source code](https://github.com/scottkellum/gliss/blob/master/test-compass/sass/style.scss).
+
+## Getting started
+
+### Install with Compass:
+
+In your terminal execute:
+
+```
+gem install gliss-layout
+```
+
+In your `config.rb` file write
+
+```
+require 'gliss'
+```
+
+And finally, import Gliss into your stylesheet
+
+```
+@import 'gliss';
+```
+
+### Install without Compass:
+
+Download the [latest release](https://github.com/scottkellum/gliss/releases).
+
+Unzip into your project and import Gliss into your stylesheet
+
+```
+@import 'gliss';
+```
+
+## Documentation
+
+First, you are going to want to configure Gliss. Here are the main variables to define your grid:
+
+<table>
+<tr>
+<th>Variable</th><th>Default</th><th>Description</th></tr>
+<tr>
+<td>$max-width</td><td>80rem</td><td>Max width of content container. This must be a fixed width (em, rem or px)</td></tr>
+<tr>
+<td>$gutter</td><td>1rem</td><td>Gutter width, must be same units as $max-width.</td></tr>
+<tr>
+<td>$margin</td><td>4%</td><td>Margins on either side of the content container.</td></tr>
+<tr>
+<td>$cols</td><td>12</td><td>Number of columns the grid is divided into.</td></tr>
+</table>
+
+So far this just provides you with a basic toolset, but if you want to have something more out of the box to work with, set `$gliss-modules` to `true` and define these variables as needed:
+
+<table>
+<tr>
+<th>Variable</th><th>Default</th><th>Description</th></tr>
+<tr>
+<td>$gliss-modules</td><td>false</td><td>Generates default styles so you can get going with writing markup.</td></tr>
+<tr>
+<td>$gliss-wrapper</td><td>'article'</td><td>The wrapper for the entire article.</td></tr>
+<tr>
+<td>$gliss-text</td><td>'.text'</td><td>A block of text.</td></tr>
+<tr>
+<td>$gliss-figure</td><td>'figure'</td><td>A figure to contain an image, media or graphic that you wish to be floated alongside the main text column.</td></tr>
+</table>
+
+
+Gliss is primarily designed to help out with math by providing a few mixins that set the width constraints and alignment on elements.
+
+The primary mixin you will use is `grid()` and you can pass the small and large constraints to it. If we wanted `foo` to be 6 columns wide at small sizes and 3 columns wide at the largest sizes then we would write it like this:
+
+```scss
+foo {
+	@include grid(6,3);
+}
+```
+
+This will generate the following CSS:
+
+```css
+figure._quarter {
+	width: 19.25rem;
+	max-width: calc(50% + -0.5rem);
+}
+```
+
+For alignment, you can choose left, right, or center by using the following mixins:
+
+```scss
+foo {
+	@include grid-center();
+	@include grid-left();
+	@include grid-right();
+}
+```
+
+If you are generating Gliss modules, then use the module definitions you have created with your variables.
+
+First off, the markup should be structure something like this:
+
+```html
+<article>
+  <figure></figure>
+  <div class="text"></div>
+  <figure></figure>
+  <div class="text"></div>
+</article>
+```
+
+Gliss figures have a number of modifiers available. `._half`, `._third`, and `._quarter` set elements to be half width, a quarter width, or one third the width of the page at the max width of the layout. All three degrade to half width. `._left` and `._right` will float these figures left or right.
+
+`._hang` is an additional figure modifier that will align the figure with the main text column and also push it flush with the side of the article. You can use `._left` and `._right` with hanging figures.
+
+This framework is intended as a barebones toolset, not something that will solve all your layout problems for you. It is intended as a beginning to solving some tough problems, not an end and it’s likely that you will find value in reworking components to fit your needs.
+
+## Authors
+
+[Scott Kellum](https://github.com/scottkellum)
+
+## Contribute
+
+This is an active project and we encourage contributions. [Please review our guidelines and code of conduct before contributing.](https://github.com/voxmedia/open-source-contribution-guidelines)
+
+## License
+
+Copyright (c) 2015, Vox Media, Inc.
+All rights reserved.
+
+BSD license
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

data/stylesheets/_gliss.scss

@@ -0,0 +1,23 @@
+// Max width of content container. This must be a fixed width (em or px)
+$max-width:         80rem      !default;
+// Gutter width, must be same units as $max-width.
+$gutter:            1rem       !default;
+// Margins on either side of the content container.
+$margin:            4%        !default;
+// Number of columns the grid is divided into.
+$cols:              12        !default;
+
+// Chose to write gliss classes.
+// By default, only the math tools are avalible.
+// This does a lot of the other work for you.
+$gliss-modules:    false     !default;
+
+// Choose what classes to write for your elements:
+$gliss-wrapper:    'article' !default;
+$gliss-text:       '.text'   !default;
+$gliss-figure:     'figure'  !default;
+
+
+@import
+  'gliss/core',
+  'gliss/modules';

data/stylesheets/gliss/_core.scss

@@ -0,0 +1,97 @@
+// Non-configurable variables for internal use:
+
+// Find the width of the margins within the context of the container
+$margin-inv: (100% / (100 - $margin * 2) * $margin);
+
+
+// Upper limit for elements on the grid. This is a fixed width.
+@function grid-max(
+    $max:$max,
+    $cols:$cols,
+    $max-width:$max-width,
+    $gutter:$gutter
+  ) {
+
+  // Total width of the columns minus the gutters
+  $cols-max-width: $max-width - ($gutter * ($cols - 1));
+  // Find the max width of a simgle column as a fixed width.
+  $col-max-width: ($cols-max-width / $cols);
+
+  // All the columns plus gutters.
+  @return ($col-max-width * $max) + ($gutter * ($max - 1));
+}
+
+// The lower constraint, how small can this get?
+@function grid-min(
+    $min:$min,
+    $cols:$cols,
+    $max-width:$max-width,
+    $gutter:$gutter
+  ) {
+
+  // Make sure not to divide by zero.
+  @if $min < $cols {
+    @return calc(#{(100% / $cols) * $min} + #{$gutter * ($min - $cols) / ($cols)});
+  }
+  @return 100%;
+}
+
+@mixin grid(
+    $min:false,     // Lower limit (compiles to % constraint)
+    $max:false,     // Upper limit (compiles to fixed constraint)
+    $cols:$cols,
+    $max-width:$max-width,
+    $gutter:$gutter
+  ) {
+
+  // Write max width first as it is mapped to just width.
+  @if $max {
+    width: grid-max($max,$cols,$max-width,$gutter);
+  } @else {
+    // If unspecified, use 100% to ensure the min-width is fulled.
+    width: 100%;
+  }
+  // Write min width second.
+  // It may seem counter-intuitive that $min is mapped to
+  // max-width but it's because as the screen shrinks
+  // the elements will hit higher %s.
+  // This is the upper bounds on that % but on a smaller screen.
+  @if $min {
+    max-width: grid-min($min,$cols,$max-width,$gutter);
+  }
+}
+
+
+// Alignment
+
+// Center a thing
+@mixin grid-center {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+// Align right
+@mixin grid-right(
+    $offset:0
+  ) {
+
+  @if $offset != 0 {
+    $offset: calc(#{(100% / $cols) * $offset} + #{($gutter * ($offset - $cols) / ($cols)) + ($gutter)});
+  }
+
+  float: right;
+  margin: 0 $offset 0 $gutter;
+}
+
+// Align left
+@mixin grid-left(
+    $offset:0
+  ) {
+
+  @if $offset != 0 {
+    $offset: calc(#{(100% / $cols) * $offset} + #{($gutter * ($offset - $cols) / ($cols)) + ($gutter)});
+  }
+
+  float: left;
+  margin: 0 $gutter 0 $offset;
+}

data/stylesheets/gliss/_modules.scss

@@ -0,0 +1,58 @@
+@if $gliss-modules {
+  #{$gliss-wrapper} {
+    padding: 0 $margin;
+    margin: 0 auto;
+    max-width: $max-width;
+  }
+
+  // Text level elements
+  #{$gliss-text} {
+    @include grid-center();
+    @include grid(12,6);
+    body.show-grid & {
+      background: rgba(#f00,.1);
+    }
+  }
+
+  // figure logic
+  #{$gliss-figure} {
+    margin: 0 ($margin-inv * -1);
+    @media (min-width: ($max-width / 3)) {
+      &._quarter {
+        @include grid-right();
+        @include grid(6,3);
+        &._left {
+          @include grid-left();
+        }
+      }
+
+      &._third {
+        @include grid-right();
+        @include grid(6,4);
+        &._left {
+          @include grid-left();
+        }
+      }
+
+      &._half {
+        @include grid-right();
+        @include grid(6);
+        &._left {
+          @include grid-left();
+        }
+      }
+      &._hang {
+        margin: 0 ($margin-inv * -1) 0 0;
+        float: right;
+        width: calc(
+          (100% - #{grid-max(6)}) / 2 + #{$margin-inv} + #{grid-max(6)}
+        );
+        max-width: 100% + $margin-inv * 2;
+        &._left {
+          margin: 0 0 0 ($margin-inv * -1);
+          float: left;
+        }
+      }
+    }
+  }
+}

metadata

@@ -0,0 +1,72 @@
+--- !ruby/object:Gem::Specification
+name: gliss-layout
+version: !ruby/object:Gem::Version
+  version: 0.0.0
+platform: ruby
+authors:
+- Scott Kellum
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-04-06 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: compass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.12.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.12.0
+description: Gliss is a system that uses max-width and width to allow elements to
+  fall on different grids at different sizes instead of more traditional media queries.
+  This allows elements to fluidly change their size instead of snapping to a new grid
+  system at various breakpoints.
+email:
+- scott@scottkellum.com
+executables: []
+extensions: []
+extra_rdoc_files:
+- changelog.md
+- license.md
+- readme.md
+files:
+- changelog.md
+- lib/gliss.rb
+- license.md
+- readme.md
+- stylesheets/_gliss.scss
+- stylesheets/gliss.zip
+- stylesheets/gliss/_core.scss
+- stylesheets/gliss/_modules.scss
+homepage: http://product.voxmedia.com
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 1.3.6
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.2.2
+signing_key: 
+specification_version: 4
+summary: A constraint based responsive grid system.
+test_files: []