neat 1.9.1 → 2.0.0.alpha.1

data/core/neat/functions/_neat-parse-columns.scss

@@ -0,0 +1,22 @@
+@charset "UTF-8";
+/// Parse a column count like `3 of 5` and retur the total coloumn count.
+/// This is to allow a shorthand for custom grids without using a settings map.
+///
+///
+/// @argument {list} $span
+///
+/// @return {number}
+///
+/// @example scss
+///   _neat-parse-columns(3 of 5)
+///
+/// @access private
+
+@function _neat-parse-columns($span) {
+  @if length($span) == 3 {
+    $_total-columns: nth($span, 3);
+    @return $_total-columns;
+  } @else if length($span) == 2 or if length($span) >= 3 {
+    @error "`$column` should contain 2 values, seperated by an `of`";
+  }
+}

data/core/neat/functions/_neat-parse-media.scss

@@ -0,0 +1,20 @@
+@charset "UTF-8";
+/// Parse media types. If the property is a string then return it, otherwise
+/// assume screen and min-width.
+///
+/// @argument {string | number (with unit)} $media
+///
+/// @return {number}
+///
+/// @example scss
+///   _neat-parse-media($grid, 1000px)
+///
+/// @access private
+
+@function _neat-parse-media($media) {
+  @if type-of($media) == number {
+    @return "only screen and (min-width: #{$media})";
+  } @else if type-of($media) == string {
+    @return "#{$media}";
+  }
+}

data/core/neat/functions/_retrieve-neat-settings.scss

@@ -0,0 +1,18 @@
+@charset "UTF-8";
+/// Return a Neat setting.
+///
+/// @argument {map} $grid
+///
+/// @argument {string} $setting
+///
+/// @return {boolean | color | list | number | string}
+///
+/// @example scss
+///   _retrieve-neat-setting($neat-grid, columns)
+///
+/// @access private
+
+@function _retrieve-neat-setting($grid, $setting) {
+  $_grid-settings: map-merge($_neat-grid-defaults, $grid);
+  @return map-get($_grid-settings, $setting);
+}

data/core/neat/mixins/_grid-column.scss

@@ -0,0 +1,29 @@
+@charset "UTF-8";
+/// Creates Neat a grid column of requested size.
+///
+/// @argument {number (unitless)} $columns [null]
+///
+/// @argument {map} $grid [$neat-grid]
+///   The grid used to generate the column.
+///
+/// @example scss
+///   .element {
+///     @include grid-column(3);
+///   }
+///
+/// @example css
+///   .element {
+///     width: calc(25% - 25px);
+///     float: left;
+///     margin-left: 20px;
+///   }
+
+@mixin grid-column($columns: null, $grid: $neat-grid) {
+  $columns: _neat-column-default($grid, $columns);
+  $_grid-columns: _retrieve-neat-setting($grid, columns);
+  $_grid-gutter: _retrieve-neat-setting($grid, gutter);
+
+  width: calc(#{_neat-column-width($grid, $columns)});
+  float: left;
+  margin-left: $_grid-gutter;
+}

data/{app/assets/stylesheets/mixins/_clearfix.scss → core/neat/mixins/_grid-container.scss}

@@ -1,12 +1,12 @@
 @charset "UTF-8";
-
-/// Provides an easy way to include a clearfix for containing floats.
+/// Creates a Neat grid container with clearfix.
 ///
-/// @link http://goo.gl/yP5hiZ
+/// @argument {map} $grid [$neat-grid]
+///   The type of grid for this column.
 ///
 /// @example scss
 ///   .element {
-///     @include clearfix;
+///     @include grid-container;
 ///   }
 ///
 /// @example css
@@ -16,7 +16,7 @@
 ///     display: block;
 ///   }
 
-@mixin clearfix {
+@mixin grid-container($grid: $neat-grid) {
   &::after {
     clear: both;
     content: "";

data/core/neat/mixins/_grid-media.scss

@@ -0,0 +1,50 @@
+@charset "UTF-8";
+/// Creates a media query in which custom grid properties can be defined.
+/// Add the `media` property to your custom grid settings map and add the media
+/// you would like to scope to. If  only a number is defined, it is assumed this
+/// is a `min-with` value. Your custom grid can then be passed to the mixin.
+///
+/// @argument {map} $grid
+///   The grid used to generate the column.
+///
+/// @example scss
+///   $custom-neat-grid: (
+///     columns: 12,
+///     gutter: 50px,
+///     media: 1000px,
+///   );
+///
+///   .element {
+///     @include grid-column(3);
+///
+///     @include grid-media($custom-neat-grid){
+///       @include grid-column(6);
+///     }
+///   }
+///
+/// @example css
+///   .element {
+///     width: calc(25% - 25px);
+///     float: left;
+///     margin-left: 20px;
+///   }
+///
+///   @media only screen and (min-width: 1000px) {
+///     .element {
+///       width: calc(50% - 75px);
+///       float: left;
+///       margin-left: 50px;
+///     }
+///   }
+
+@mixin grid-media($grid) {
+  $_media: _retrieve-neat-setting($grid, media);
+  $_query: _neat-parse-media($_media);
+
+  @media #{$_query} {
+    $_default-neat-grid: $neat-grid;
+    $neat-grid: $grid !global;
+    @content;
+    $neat-grid: $_default-neat-grid !global;
+  }
+}

data/core/neat/mixins/_grid-push.scss

@@ -0,0 +1,32 @@
+@charset "UTF-8";
+/// Push or pull a Neat grid column by manipulating its left margin.
+///
+/// @argument {number (unitless)} $push [false]
+///
+/// @argument {map} $grid [$neat-grid]
+///   The grid to be used to generate the column.
+///   By default, the global `$neat-grid` will be used.
+///
+/// @example scss
+///   .element {
+///     @include grid-push(3);
+///   }
+///
+/// @example css
+///   .element {
+///     margin-left: calc(25% - 25px + 40px);
+///   }
+
+@mixin grid-push($push: false, $grid: $neat-grid) {
+  $_grid-columns: _retrieve-neat-setting($grid, columns);
+  $_grid-gutter: _retrieve-neat-setting($grid, gutter);
+
+  @if $push {
+    $_gutter-affordance: $_grid-gutter * 2;
+    $_margin-value: calc(#{_neat-column-width($grid, $push)} + #{$_gutter-affordance});
+    margin-left: $_margin-value;
+  } @else {
+    $_margin-value: _retrieve-neat-setting($grid, gutter);
+    margin-left: $_margin-value;
+  }
+}

data/core/neat/mixins/_grid-shift.scss

@@ -0,0 +1,31 @@
+@charset "UTF-8";
+/// Shift columns and reorder them within their container using relative
+/// positioning.
+///
+/// @argument {number (unitless)} $shift [false]
+///
+/// @argument {map} $grid [$neat-grid]
+///   The grid to be used to generate the column.
+///   By default, the global `$neat-grid` will be used.
+///
+/// @example scss
+///   .element {
+///     @include grid-shift(3);
+///   }
+///
+/// @example css
+///   .element {
+///     left: calc(25% - 25px + 20px);
+///     position: relative;
+///   }
+
+@mixin grid-shift($shift: false, $grid: $neat-grid) {
+  @if $shift {
+    $_shift-value: calc(#{_neat-column-width($grid, $shift)} + #{_retrieve-neat-setting($grid, gutter)});
+    left: $_shift-value;
+  } @else {
+    left: auto;
+  }
+
+  position: relative;
+}

data/core/neat/settings/_settings.scss

@@ -0,0 +1,41 @@
+@charset "UTF-8";
+/// Neat’s default grid.
+///
+/// @type map
+///
+/// @property {number (unitless)} columns [12]
+///   Deefault number of grid columns.
+///
+/// @property {number (with unit)} gutter [20px]
+///   Default grid gutter width.
+///
+/// @property {string | number (with unit)} gutter [null]
+///   Grid media query.
+///
+/// @access private
+
+$_neat-grid-defaults: (
+  columns: 12,
+  gutter: 20px,
+  media: null,
+);
+
+/// This variable is a sass map that overrides Neat's default grid settings.
+/// Use this to define your project's grid properties incluting gutters, and
+/// total column count.
+///
+/// @type map
+///
+/// @property {number (unitless)} columns [12]
+///   Number of grid columns.
+///
+/// @property {number (with unit)} gutter [20px]
+///   Grid gutter width.
+///
+/// @example scss
+///   $neat-grid: (
+///     columns: 12,
+///     gutter: 20px,
+///   );
+
+$neat-grid: () !default;

data/index.js

@@ -2,6 +2,6 @@ var path = require("path");
 
 module.exports = {
   includePaths: [
-    path.join(__dirname, "app/assets/stylesheets"),
+    path.join(__dirname, "core")
   ]
 };

data/lib/neat.rb

@@ -1,20 +1,7 @@
-require "sass"
 require "neat/generator"
 
-module Neat
-  if defined?(Rails) && defined?(Rails::Engine)
-    class Engine < ::Rails::Engine
-      require 'neat/engine'
-    end
-
-    module Rails
-      class Railtie < ::Rails::Railtie
-        rake_tasks do
-          load "tasks/install.rake"
-        end
-      end
-    end
-  else
-    Sass.load_paths << File.expand_path("../../app/assets/stylesheets", __FILE__)
-  end
-end
+neat_path = File.expand_path("../../core", __FILE__)
+ENV["SASS_PATH"] = [
+  ENV["SASS_PATH"],
+  neat_path,
+].compact.join(File::PATH_SEPARATOR)

data/lib/neat/generator.rb

@@ -27,7 +27,7 @@ module Neat
       end
     end
 
-    desc "remove", "Remove Neat"
+    desc "update", "Remove Neat"
     def remove
       if neat_files_already_exist?
         remove_neat_directory

data/lib/neat/version.rb

@@ -1,3 +1,3 @@
 module Neat
-  VERSION = "1.9.1".freeze
+  VERSION = "2.0.0.alpha.1"
 end

data/neat.gemspec

@@ -1,37 +1,31 @@
-# coding: utf-8
-$:.push File.expand_path('../lib', __FILE__)
-require 'neat/version'
+$:.push File.expand_path("../lib", __FILE__)
+require "neat/version"
 
 Gem::Specification.new do |s|
-  s.name        = 'neat'
-  s.version     = Neat::VERSION
-  s.platform    = Gem::Platform::RUBY
-  s.authors     = ['Joel Oliveira', 'Kyle Fiedler', 'Reda Lemeden']
-  s.email       = 'design+bourbon@thoughtbot.com'
-  s.homepage    = 'http://neat.bourbon.io'
-  s.summary     = 'A lightweight, semantic grid framework'
-  s.license     = 'MIT'
-  s.description = <<-DESC
-Neat is a fluid grid framework built 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'
-
-  s.files         = `git ls-files`.split("\n")
-  s.test_files    = `git ls-files -- {test,spec,features}/*`.split("\n")
+  s.add_development_dependency "aruba", "~> 0.5.0"
+  s.add_development_dependency "css_parser"
+  s.add_development_dependency "rake"
+  s.add_development_dependency "rspec"
+  s.add_development_dependency "scss_lint", "~> 0.44"
+  s.add_runtime_dependency "sass", "~> 3.4"
+  s.add_runtime_dependency "thor", "~> 0.19"
+  s.authors = [
+    "Joel Oliveira",
+    "Joshua Ogle",
+    "Kyle Fiedler",
+    "Reda Lemeden",
+    "Tyson Gach",
+    "Ward Penney",
+    "Will McMahan"
+  ]
+  s.email         = "design+neat@thoughtbot.com"
   s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
-  s.require_paths = ['lib']
-
-  s.add_dependency('sass', '>= 3.3')
-  s.add_dependency("thor", "~> 0.19")
-
-  s.add_development_dependency("scss_lint", "~> 0.43")
-  s.add_development_dependency('aruba', '~> 0.5.0')
-  s.add_development_dependency('bundler')
-  s.add_development_dependency('css_parser')
-  s.add_development_dependency('rake')
-  s.add_development_dependency('rb-fsevent', '~> 0.9.1')
-  s.add_development_dependency('rdoc')
-  s.add_development_dependency('rspec')
+  s.files         = `git ls-files`.split("\n")
+  s.homepage      = "http://neat.bourbon.io"
+  s.license       = "MIT"
+  s.name          = "neat"
+  s.platform      = Gem::Platform::RUBY
+  s.require_paths = ["lib"]
+  s.summary       = "A lightweight Sass grid framework"
+  s.version       = Neat::VERSION
 end

data/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bourbon-neat",
-  "version": "1.9.1",
-  "description": "A lightweight, semantic grid framework",
+  "version": "2.0.0-alpha.1",
+  "description": "A lightweight, semantic grid framework built with Bourbon",
   "keywords": [
     "columns",
     "grid",
@@ -30,10 +30,11 @@
     "url": "https://github.com/thoughtbot/neat.git"
   },
   "scripts": {
-    "test": "echo \"No test specified\""
+    "contrib": "gulp",
+    "test": "bundle exec rake"
   },
   "dependencies": {
-    "node-sass": "^4.1.1"
+    "node-sass": "^3.8"
   },
   "devDependencies": {
     "gulp": "^3.9",

data/spec/fixtures/_setup.scss

@@ -0,0 +1 @@
+@import "core/neat";

data/spec/fixtures/functions/neat-column-default.scss

@@ -0,0 +1,22 @@
+@import "setup";
+
+$eighteen-grid: (
+  columns: 18,
+  gutter: 33px,
+);
+
+.neat-column-default-grid {
+  content: _neat-column-default($neat-grid, null);
+}
+
+.neat-column-default-grid-custom-col {
+  content: _neat-column-default($neat-grid, 10);
+}
+
+.neat-column-custom-grid {
+  content: _neat-column-default($eighteen-grid, null);
+}
+
+.neat-column-custom-grid-custom-col {
+  content: _neat-column-default($eighteen-grid, 10);
+}