Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Remove typography mixins and add visual grid

  • Loading branch information...
commit 84b9cd2ca4ff8c1767cf24390a621a5e3e8e9671 1 parent d0b3485
@kaishin kaishin authored
View
11 README.md
@@ -12,7 +12,6 @@ Requirements:
- Sass 3.2+
- Bourbon 2.1+
-<<<<<<< HEAD
Put the `/neat` folder in your Sass directory and import it right below Bourbon in your stylesheets:
=======
@@ -34,7 +33,6 @@ Within your application.css.scss file place the following:
@import "bourbon";
@import "neat";
->>>>>>> Preliminary README edits
```scss
@import "bourbon/bourbon";
@@ -48,6 +46,10 @@ The default grid uses 12 columns, a setting that can be easily overridden as det
### Containers
Include the `outer-container` mixin in the topmost container (to which the `max-width` setting will be applied):
+ div.container {
+ @include outer-container;
+ }
+
```scss
div.container {
@include outer-container;
@@ -57,7 +59,7 @@ div.container {
You can include this mixin in more than one element in the same page.
### Columns
-Use the `span-columns` mixin to specify the number of columns an element should span:
+Use the `span-columns` mixin to specify the number of columns an element should span:
```scss
@include span-columns($span: $columns of $container-columns, $display: block)
@@ -114,7 +116,6 @@ In order to clear floated or table-cell columns, use the `row` mixin:
```scss
@include row($display);
```
-
* `display` takes either `block`—the default—or `table`.
### Shifting columns
@@ -341,6 +342,7 @@ The visual grid reflects the changes applied to the grid via the `new-breakpoint
### Changing the defaults
+<<<<<<< HEAD
All the default settings can be overridden in your site-wide `_variables.scss`. Make sure to import this file *before* Neat (failing to do so will cause Neat to use the default values):
```scss
@@ -348,7 +350,6 @@ All the default settings can be overridden in your site-wide `_variables.scss`.
@import "variables";
@import "neat/neat";
```
-
Here is the list of the available settings:
#### Grid settings
View
34 app/assets/stylesheets/functions/_helpers.scss
@@ -0,0 +1,34 @@
+@function is-even($int) {
+ @if $int%2 == 0 {
+ @return true;
+ }
+
+ @return false;
+}
+
+@function belongs-to($tested-item, $list) {
+ @each $item in $list {
+ @if $item == $tested-item {
+ @return true;
+ }
+ }
+
+ @return false;
+}
+
+@function new-breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
+
+ @if length($query) == 1 {
+ $query: $default-feature nth($query, 1) $total-columns;
+ }
+
+ @else if length($query) == 2 or length($query) == 4 {
+ $query: append($query, $total-columns);
+ }
+
+ @if not belongs-to($query, $visual-grid-breakpoints) {
+ $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma);
+ }
+
+ @return $query;
+}
View
0  app/assets/stylesheets/functions/_line-height.scss
No changes.
View
1  app/assets/stylesheets/grid/_global-variables.scss
@@ -0,0 +1 @@
+$parent-columns: $grid-columns !default;
View
66 app/assets/stylesheets/grid/_visual-grid.scss
@@ -0,0 +1,66 @@
+@mixin grid-column-gradient($values...) {
+ background-image: deprecated-webkit-gradient(linear, left top, left bottom, $values);
+ background-image: -webkit-linear-gradient(left, $values);
+ background-image: -moz-linear-gradient(left, $values);
+ background-image: -ms-linear-gradient(left, $values);
+ background-image: -o-linear-gradient(left, $values);
+ background-image: unquote("linear-gradient(left, #{$values})");
+}
+
+@function gradient-stops($grid-columns, $color: $visual-grid-color) {
+ $transparent: rgba(0,0,0,0);
+
+ $column-width: flex-grid(1, $grid-columns);
+ $gutter-width: flex-gutter($grid-columns);
+ $column-offset: $column-width;
+
+ $values: ($transparent 0, $color 0);
+
+ @for $i from 1 to $grid-columns*2 {
+ @if is-even($i) {
+ $values: append($values, $transparent $column-offset);
+ $values: append($values, $color $column-offset);
+ $column-offset: $column-offset + $column-width;
+ }
+
+ @else {
+ $values: append($values, $color $column-offset);
+ $values: append($values, $transparent $column-offset);
+ $column-offset: $column-offset + $gutter-width;
+ }
+ }
+
+ @return $values;
+}
+
+@if $visual-grid == true {
+ body:before {
+ content: '';
+ display: inline-block;
+ @include grid-column-gradient(gradient-stops($grid-columns));
+ height: 100%;
+ left: 0;
+ margin: 0 auto;
+ max-width: $max-width;
+ opacity: $visual-grid-opacity;
+ position: fixed;
+ right: 0;
+ width: 100%;
+
+ @if $visual-grid-index == back {
+ z-index: -1;
+ }
+
+ @else if $visual-grid-index == front {
+ z-index: 9999;
+ }
+
+ @each $breakpoint in $visual-grid-breakpoints {
+ @if $breakpoint != nil {
+ @include breakpoint($breakpoint) {
+ @include grid-column-gradient(gradient-stops($grid-columns));
+ }
+ }
+ }
+ }
+}
View
5 app/assets/stylesheets/settings/_visual-grid.scss
@@ -0,0 +1,5 @@
+$visual-grid: false !default; // Display the base grid
+$visual-grid-color: #EEE !default;
+$visual-grid-index: back !default; // Show grid behind content (back) or overlay it over the content (front)
+$visual-grid-opacity: 0.4 !default;
+$visual-grid-breakpoints: nil !default;
View
2  lib/neat/version.rb
@@ -1,3 +1,3 @@
module Neat
- VERSION = '0.4.2'
+ VERSION = '1.0.0.pre'
end
View
2  neat.gemspec
@@ -11,7 +11,7 @@ Gem::Specification.new do |s|
s.homepage = "https://github.com/thoughtbot/neat"
s.summary = "A fluid grid framework on top of Bourbon"
s.description = <<-DESC
-Neat is an open source fluid grid framework built on top of Bourbon with the aim of being easy enough to use out of the box and flexible enough to customize down the road.
+Neat is an open source grid framework built on top of Bourbon with the aim of being easy enough to use out of the box and flexible enough to customize down the road.
DESC
s.rubyforge_project = "neat"
Please sign in to comment.
Something went wrong with that request. Please try again.