Created
March 10, 2012 22:13
-
-
Save scottkellum/2013559 to your computer and use it in GitHub Desktop.
Singularity grid file
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); | |
} | |
} |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
VERY rough but a work in progress.