neat-class-generator 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: dfb818615c4a623e3436e01672ea2d3a05c87621
+  data.tar.gz: 966a776f6b1db782d161737dad6798fae96ffaff
+SHA512:
+  metadata.gz: 8ea8393b34daac17cc46d95b33e0dcb5a3ea7393c5840f07d044b7b2980bfb6704b8f1176a97955fa1503c46e8199515446b557cb99d25b21e053ad8306d7e7e
+  data.tar.gz: 79e6c459508dafc26d4820569c78156e6f5609744053d14817a8a795380492f632dc5a607da481bfb6e316b59f889dd4c47a2d32412b1d5e9a9155b7e8d545f5

data/README.md

@@ -0,0 +1,99 @@
+# Neat class generator
+
+Generates css classes from Neat grids.
+
+# Installation
+
+## NPM
+
+- `npm install --save neat-class-generator`
+
+## Bower
+- `bower install neat-class-generator`
+
+# Documentation
+
+`@include grid-generate-classes()` will generate classes for a grid map that is
+passed in to it.
+
+Classes will be generated using the `class:` property of the grid map.
+**This property is required** and will be appended to the generated classes for
+that grid. As an example defining the property as `class: my-grid`, this would
+result in a class name of `.my-grid-column-2-of-12`, etc. This property must be
+defined prior to the `grid-generate-classes` mixin being called.
+
+<strong>example SCSS</strong>
+```SCSS
+@include grid-generate-classes($neat-grid);
+```
+<strong>example CSS</strong>
+```CSS
+
+.grid-column-1-of-12 {
+  width: calc(8.33333% - 21.66667px);
+  float: left;
+  margin-left: 20px; }
+
+.grid-column-2-of-12 {
+  width: calc(16.66667% - 23.33333px);
+  float: left;
+  margin-left: 20px; }
+
+.grid-column-3-of-12 {
+  width: calc(25% - 25px);
+  float: left;
+  margin-left: 20px; }
+
+// etc…
+```
+
+<strong>example SCSS</strong>
+```SCSS
+$custom-neat-grid: (
+  class: custom,
+  columns: 12,
+  gutter: 50px,
+  media: 1000px,
+);
+
+@include grid-generate-classes($custom-neat-grid);
+```
+<strong>example CSS</strong>
+```CSS
+
+@media only screen and (min-width: 1000px) {
+  .custom-column-1-of-12 {
+    width: calc(8.33333% - 54.16667px);
+    float: left;
+    margin-left: 50px; }
+  .custom-column-2-of-12 {
+    width: calc(16.66667% - 58.33333px);
+    float: left;
+    margin-left: 50px; }
+  .custom-column-3-of-12 {
+    width: calc(25% - 62.5px);
+    float: left;
+    margin-left: 50px; }
+
+  // etc…
+}
+```
+
+## Generated classes
+
+Neat class generator will create classes for each of Neat's mixin properties
+in the order in which they are generated. Since `grid-container` does not change
+it is only generated once, under the name `.grid-container`.
+
+The following is a manifest of all generated classes, with `{class}` standing in
+for the grid map's `class:` property and `{column}` standing in
+for the grid map's `column:` property. If the grid contains a `media:` property,
+the generated classes will automatically be wrapped in the appropriate
+media query.
+
+1. `.{class}-column-1-of-{column}` to `.{class}-column-{column}-of-{column}`
+2. `.{class}-push-neg-{column}-of-{column}` (negative) to `.{class}-push-{column}-of-{column}`
+3. `.{class}-shift-neg-{column}-of-{column}` (negative) to `.{class}-shift-{column}-of-{column}`
+4. `.{class}-visual`
+5. `.{class}-collapse`
+6. `.grid-container`

data/bower.json

@@ -0,0 +1,33 @@
+{
+  "name": "neat-class-generator",
+  "description": "A generator for dynamically creating classes from Neat",
+  "version": "1.0.0",
+  "main": "core/_grid-generate-classes.scss",
+  "authors": [
+    "Will H McMahan (http://mcmahan.me)"
+  ],
+  "license": "MIT",
+  "keywords": [
+    "columns",
+    "grid",
+    "layout",
+    "media",
+    "media-queries",
+    "neat",
+    "omega",
+    "sass",
+    "scss",
+    "semantic"
+  ],
+  "homepage": "https://github.com/whmii/neat-class-generator",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "neat": "^2"
+  }
+}

data/core/_grid-classes-loop.scss

@@ -0,0 +1,45 @@
+@charset "UTF-8";
+/// Loops through the `grid-column`, `grid-push`, and `grid-shift` mixins for
+/// the grid passed in. It then generates classes for each number of columns
+/// (i.e. `1-of-12`, `2-of-12`, etc).
+///
+/// @group features
+///
+/// @name Grid classes loop
+///
+/// @argument {map} $grids
+///   A Neat grid map.
+///
+/// @example scss
+///   @include _grid-classes-loop($example);
+///
+/// @access private
+
+@mixin _grid-classes-loop($grid) {
+  @if map-has-key($grid, columns) != true {
+    $grid: map-merge($grid, (columns: 12));
+  }
+
+  $_columns: map-get($grid, columns);
+  $_class: map-get($grid, class);
+
+  @include _grid-media-optional($grid) {
+    @for $_column from 1 to ($_columns + 1) {
+      .#{$_class}-column-#{$_column}-of-#{$_columns} {
+        @include grid-column($_column);
+      }
+    }
+
+    @for $_column from -($_columns + 1) to ($_columns + 1) {
+      $_column-class: if($_column < 0, "neg#{$_column}", $_column);
+
+      .#{$_class}-push-#{$_column-class}-of-#{$_columns} {
+        @include grid-push($_column);
+      }
+
+      .#{$_class}-push-#{$_column-class}-of-#{$_columns} {
+        @include grid-shift($_column);
+      }
+    }
+  }
+}

data/core/_grid-classes-simple.scss

@@ -0,0 +1,30 @@
+@charset "UTF-8";
+/// Loops through the `grid-visual` and `grid-collapse` mixins for each grid
+/// passed in. It then generates classes for each visual grid and collapsed
+/// objects, prefixed with the `class` property of the grid.
+///
+/// @group features
+///
+/// @name Grid classes simple
+///
+/// @argument {map} $grid
+///   A Neat grid map.
+///
+/// @example scss
+///   @include _grid-classes-simple($example);
+///
+/// @access private
+
+@mixin _grid-classes-simple($grid) {
+  @include _grid-media-optional($grid) {
+    $_class: map-get($grid, class);
+
+    .#{$_class}-visual {
+      @include grid-visual(rgba(#00d4ff, 0.25),$grid);
+    }
+
+    .#{$_class}-collapse {
+      @include grid-collapse($grid);
+    }
+  }
+}

data/core/_grid-generate-classes.scss

@@ -0,0 +1,26 @@
+/// `@include grid-generate-classes($grids:())` will generate classes for each
+/// of the grid maps passed in to it. `$neat-grid` is automatically included.
+///
+/// @group features
+///
+/// @name Grid generate classes
+///
+/// @argument {map} $grid
+///   A Neat grid map.
+///
+/// @example scss
+///   @include grid-generate-classes($example);
+///
+
+@mixin grid-generate-classes() {
+  @if map-has-key($grid, class) != true {
+    @error "⚠️  Your grid map must contain a defined `class:` property."
+  }
+
+  @include _grid-classes-loop($grid);
+  @include _grid-classes-simple($grid);
+
+  .grid-container {
+    @include grid-container();
+  }
+}

data/core/_grid-media-optional.scss

@@ -0,0 +1,29 @@
+@charset "UTF-8";
+/// Wraps Neat's [`grid-media`](http://neat.bourbon.io/docs/2.0.0/#grid-media)
+/// mixin, causing the `media` property to be optional. If there is no `media`
+/// property present, the content will not be wrapped in a media query.
+///
+/// @group features
+///
+/// @name Grid media optional
+///
+/// @argument {map} $grid
+///   A map that contains a neat grid as outlined in
+///   [`custom-grids`](http://neat.bourbon.io/docs/2.0.0/#custom-grids)
+///
+/// @example scss
+///   @include _grid-media-optional($grid) {
+///     …
+///   }
+///
+/// @access private
+
+@mixin _grid-media-optional($grid) {
+  @if map-has-key($grid, media) {
+    @include grid-media($grid) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}

data/core/_neat-class-generator.scss

@@ -0,0 +1,4 @@
+@import "grid-classes-loop";
+@import "grid-classes-simple";
+@import "grid-media-optional";
+@import "grid-generate-classes";

data/lib/neat-class-generator.rb

@@ -0,0 +1,5 @@
+neat_class_generator_path = File.expand_path("../../core", __FILE__)
+ENV["SASS_PATH"] = [
+  ENV["SASS_PATH"],
+  neat_class_generator_path,
+].compact.join(File::PATH_SEPARATOR)

data/license.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright © 2017 [Kevin Garcia](github.com/kgcreative)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the “Software”), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/neat-class-generator.gemspec

@@ -0,0 +1,16 @@
+Gem::Specification.new do |s|
+  s.add_runtime_dependency "sass", "~> 3.4"
+  s.authors = [
+    "Will McMahan"
+  ]
+  s.email         = "will@mcmahan.me"
+  s.executables   = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
+  s.files         = `git ls-files`.split("\n")
+  s.homepage      = "http://neat.bourbon.io"
+  s.license       = "MIT"
+  s.name          = "neat-class-generator"
+  s.platform      = Gem::Platform::RUBY
+  s.require_paths = ["lib"]
+  s.summary       = "A lightweight Sass grid framework"
+  s.version       = "1.0.0"
+end

data/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "neat-class-generator",
+  "version": "1.0.0",
+  "description": "A generator for dynamically creating classes from Neat 2.0",
+  "keywords": [
+    "columns",
+    "grid",
+    "layout",
+    "media",
+    "media-queries",
+    "neat",
+    "sass",
+    "scss",
+    "semantic"
+  ],
+  "homepage": "https://github.com/whmii/neat-class-generator",
+  "bugs": {
+    "url": "git+https://github.com/whmii/neat-class-generator/issues"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Will H McMahan",
+    "url": "http://mcmahan.me"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/whmii/neat-class-generator.git"
+  },
+  "dependencies": {
+    "bourbon-neat": "^2"
+  }
+}

metadata

@@ -0,0 +1,68 @@
+--- !ruby/object:Gem::Specification
+name: neat-class-generator
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+platform: ruby
+authors:
+- Will McMahan
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2017-04-21 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.4'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.4'
+description: 
+email: will@mcmahan.me
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- README.md
+- bower.json
+- core/_grid-classes-loop.scss
+- core/_grid-classes-simple.scss
+- core/_grid-generate-classes.scss
+- core/_grid-media-optional.scss
+- core/_neat-class-generator.scss
+- lib/neat-class-generator.rb
+- license.md
+- neat-class-generator.gemspec
+- package.json
+homepage: http://neat.bourbon.io
+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: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.6.8
+signing_key: 
+specification_version: 4
+summary: A lightweight Sass grid framework
+test_files: []