Singularity grid file

_grid.sass

// MEASUREMENTS

// Grid types to work on -- column, scale
$grid-type: column !default
$scale-grid-direction: rtl !default
$scale-grid-style: incremental !default

$base-size: 16px !default
$line-height: 1.3em !default

$grid-width: 90% !default
$columns: 12 !default
$wrapper-align: center !default
$gutter: 2% !default
$padding: 0 !default

$max-width: dp(1400) !default

// DEFATULTS TO OOSASS WITH @EXTEND
$oocss-grid: false !default

// BUILD GRID OBJECTS
$object-type: "%" !default
@if $oocss-grid
  $grid-placeholder: "." !default
$width-prefix: "w-" !default
$column-prefix: "c-" !default

html
  font-size: $base-size
  line-height: $line-height

#{$object-type}wrapper
  width: $grid-width
  max-width: $max-width
  position: relative
  @if $wrapper-align == "center"
    margin-left: auto
    margin-right: auto
  @if $wrapper-align == "right"
    margin-left: auto
    margin-right: 0

=wrapper
  @extend #{$object-type}wrapper

// Seed variables
$calculated-gutter: 0
$calculated-column: 0

// Calculate grid metrics
=calculate-grid($columns, $gutter, $grid-width)
  $columns: $columns
  $gutter: $gutter
  $grid-width: $grid-width
  // COLUMN GRID
  $calculated-gutter: $gutter
  @if $gutter == 0
    $gutter: 0%
  @if unit($gutter) != "%"
    $calculated-gutter: percentage($gutter / $grid-width)
  $calculated-column: (100% - ($calculated-gutter * ($columns - 1))) / $columns
+calculate-grid

// Define grid funciton
@function grid($units, $grid-width)
  @return ($calculated-column * $units) + ($calculated-gutter * ($units - 1))

// For the next column in a series. It floats and spaces to sit on the grid next to the one before it.
#{$object-type}column
  float: left
  margin-left: $calculated-gutter
  @if $padding != 0
    padding: 0 $padding
    // box sizing to make sure padding doesn't effect grid.
    +prefix(box-sizing, border-box, -webkit- -moz-)
    // Polyfill for old IE https://github.com/Schepp/box-sizing-polyfill
    *behavior: url(../js/boxsizing.htc)
=column
  @extend #{$object-type}column

#{$object-type}all-columns
  width: 100%
=all-columns
  @extend #{$object-type}all-columns

#{$object-type}first-column
  margin-left: 0
=first-column
  @extend #{$object-type}first-column

// Grid widths
=grid-widths
  @for $i from 1 through $columns
    // Writes classes or placeholders depending on the $object-type variable.
    // You may also like a more semantic prefix, like "width-". You can chage it by changing the $width-prefix variable.
    #{$object-type}#{$width-prefix+$i}
      width:  grid($i)
+grid-widths

// Column locations in absolute positions. Use next-col in a series.
=grid-columns
  @for $i from 0 through $columns
    // Writes classes or placeholders depending on the $object-type variable.
    // You may also like a more semantic prefix, like "column-". You can chage it by changing the $column-prefix variable.
    #{$object-type}#{$column-prefix+$i}
      position: absolute
      left:  grid($i) + $calculated-gutter

+grid-columns


// Scale grid math
// Requires modular-scale (https://github.com/scottkellum/modular-scale)
$modular-scale-loaded: false !default
$scale-grid-direction: ltr !default

@if $grid-type == "scale"
  @if $modular-scale-loaded
    
    // Core logic function
    @function ms-grid($units, $ratio)
      $column-sum: 100%
      $grid-sum: 0%
      $column-ratio: $ratio
      $return: 0
      $column-short: false
      @if $ratio > 1
        $column-ratio: 1 / $ratio
      @if $scale-grid-style == traditional
        @for $i from 1 through $units
          $column-sum: ms($i, 100%, $column-ratio)
          $grid-sum: $column-sum + $grid-sum
          $return: $column-sum
          @if $grid-sum > 100%
            $return: 0%
            @if $column-short == false
              $column-short: $i
          @if $i == $columns
            @if $grid-sum < 100%
              $return: 100% - $grid-sum + $column-sum
          @if $column-short == $i
            $return: 100% - $grid-sum + $column-sum
      @if $scale-grid-style == incremental
        @for $i from 1 through $units
          $return: ms(-1, $column-sum)
          $column-sum: $column-sum - $return
          $grid-sum: $return + $grid-sum
          @if $grid-sum > 100%
            $return: 0%
            @if $column-short == false
              $column-short: $i
          @if $i == $columns
            @if $grid-sum < 100%
              $return: $column-sum
          @if $column-short == $i
            $return: $column-sum
      @return $return

    // Create array of all columns on the grid
    $ms-grid-list: ms-grid(1)
    @for $i from 2 through $columns
      $ms-grid-list: join($ms-grid-list, ms-grid($i))
    
    $ms-grid-list-sum: 0
    @for $i from 1 through $columns
      $ms-grid-list-sum: $ms-grid-list-sum + nth($ms-grid-list, $i)
        
    $counter: 0 // counter that knows how many columns are used for placement

    // Calculate the units on the grid
    @function grid($units, $counter)
      $half-gutter: false
      @if $counter == 1 or ($counter + $units) == $columns
        $half-gutter: true
      @if $counter > $columns
        $counter: 1
      @if $counter < 1
        $counter: 1
      
      $grid-return: 0 // zero out grid return

      // Add up the columns
      @for $i from 1 through $units
        @if $scale-grid-direction == ltr
          $grid-return: $grid-return + nth($ms-grid-list, abs($columns - $counter) + 1)
        @if $scale-grid-direction == rtl
          $grid-return: $grid-return + nth($ms-grid-list, $counter)
        // the only difference between rtl and ltr is this
        $counter: $counter + 1
        @if $i == $units
          @if $counter > ($columns) and $ms-grid-list-sum < 100%
            @warn $grid-return - ($ms-grid-list-sum - 100%)
            $grid-return: $grid-return - ($ms-grid-list-sum - 100%)
          @if $counter == 0
            $half-gutter: true
          @if $half-gutter
            @return $grid-return - ($calculated-gutter / 2)
          @return $grid-return - $calculated-gutter


  @if $modular-scale-loaded == false
    @warn "Modular-Scale needs to be loaded to use a scale grid"
    @warn "https://github.com/scottkellum/modular-scale"

// Simple mixin that figures it all out.
$grid-mixin-counter: 0

=grid($units, $grid-override: false)
  // If object spans all columns
  @if $units == $columns
    @extend #{$object-type}all-columns
    @extend #{$object-type}column
  @else
    @extend #{$object-type}column
    @if $grid-type == "scale"
      // Width objects for Modular Scales are tricky, write width directly.
      width: grid($units, $grid-mixin-counter + 1)
    @else
      // extend width objects
      @extend #{$object-type}#{$width-prefix+$units}
    // reset counters
    @if $grid-mixin-counter >= $columns
      $grid-mixin-counter: 0
    @if $grid-mixin-counter == 0
      @extend #{$object-type}first-column
    $grid-mixin-counter: $grid-mixin-counter + $units


// Mixin to test grid
=test-grid($prefix: g)
  .test
    display: none
    height: 6em
    > .inner
      background-color: rgba(#fff, .5)
      height: 6em
  
  @for $i from 1 through $columns
    .#{$prefix}#{$i}
      display: block
      @if ($i / 2) == round($i / 2)
        background-color: #f66
      @else
        background-color: #f99
      @if $i == 1
        background-color: #6f6
      +grid(1)
      @if $i == $columns
        background-color: #66f

example.scss

// Singularity is OOSass NOT OOCSS. Using Sass objects (functions, mixins, extend) to write ONLY the styles needed.

// Just add the mixin and floats, scale calculations, everything is just taken care of.

// SETTINGS
// change these around as you see fit. Default is a 12 column fluid grid.
//$base-size: 16px;
//$line-height: 1.3em;

//$grid-width: 90%;
//$columns: 4;
//$wrapper-align: center; // left, center or right
//$gutter: 2%;
//$grid-type: scale; // column, scale
//$ratio: ms(1, $gold);
//$scale-grid-direction: rtl; // rtl, ltr
//$padding: 10px;


.article {
	@include grid(6);
}

.aside {
	@include grid(6);
}


// If you don’t want to maintain markup order in CSS, simply add the place on the grid where the element begins.
.article {
	@include grid(6, 1); // 6 columns wide, starts on the first column
}

.aside {
	@include grid(6, 7); // 6 columns wide, starts on the seventh column.
}

// In RWD, simply add media queries, no breakpoints are set.
@media all and (min-width: 20em) {
	.article {
		@include grid(6);
	}
	.aside {
		@include grid(6);
	}
}

VERY rough but a work in progress.

Functionality is pretty much done! Some re-factoring could be done but just include the grid mixin and everything is taken care of.

This looks awesome and I want to help. I started kicking this around tonight, and ran into a couple things. First, it looks like the $grid-mixin-counter is falling apart when I start nesting elements.

.article-1
  +grid(6)

.article-2
  +grid(4)
  .sub-thing-1
    +grid(6)
  .sub-thing-2
    +grid(6)

.aside
  +grid(2)

.article-2, .article-2 .sub-thing-1, .aside {
  margin-left: 2%;
  float: left;
}

/* SITE-WIDE DESIGN -------------------------------------------------------------- */
.article-1 {
  width: 49%;
  float: left;
}

.article-2 {
  width: 32%;
}
.article-2 .sub-thing-1 {
  width: 49%;
}
.article-2 .sub-thing-2 {
  width: 49%;
  float: left;
}

.aside {
  width: 15%;
} 

I also get weird results when I switch it to 'scale' mode. I'm not sure what success looks like with this option tho.

Cool, I just added you as a collaborator. The current branch is actually in the gh-pages-beta branch because it is easier for me to work on something more real. https://github.com/scottkellum/Singularity/tree/gh-pages-beta I found a few more bugs in the scale grid as well, I need to subtract the result from the previous result to always reach 100% and test it with different scales. Grids will look dramatically different here because the columns can get crunched way down. Because of this weird scaling, this is a more normal use case (actually people should use fewer 4 or 5 col grid) - article +grid(2) aside +grid(10) Where the article is still bigger because it is up the scale. As elements get smaller than the padding things start to get bad, maybe we can @warn for that. Excited to see what you do with this. The goal is to make an OOSass framework that is extremely flexible and easy to use. Because it is OOSass it should generate an incredibly small CSS file.

…

--- Scott Kellum scott@scottkellum.com (347) 422-7572 www.scottkellum.com

On Tue, Mar 13, 2012 at 1:01 AM, Mason Wendell < ***@***.*** > wrote: This looks awesome and I want to help. I started kicking this around tonight, and ran into a couple things. First, it looks like the $grid-mixin-counter is falling apart when I start nesting elements. ``` sass .article-1 +grid(6) .article-2 +grid(4) .sub-thing-1 +grid(6) .sub-thing-2 +grid(6) .aside +grid(2) ``` ``` css .article-2, .article-2 .sub-thing-1, .aside { margin-left: 2%; float: left; } /* SITE-WIDE DESIGN -------------------------------------------------------------- */ .article-1 { width: 49%; float: left; } .article-2 { width: 32%; } .article-2 .sub-thing-1 { width: 49%; } .article-2 .sub-thing-2 { width: 49%; float: left; } .aside { width: 15%; } ``` I also get weird results when I switch it to 'scale' mode. I'm not sure what success looks like with this option tho. --- Reply to this email directly or view it on GitHub: https://gist.github.com/2013559