neat-class-generator 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/README.md +99 -0
- data/bower.json +33 -0
- data/core/_grid-classes-loop.scss +45 -0
- data/core/_grid-classes-simple.scss +30 -0
- data/core/_grid-generate-classes.scss +26 -0
- data/core/_grid-media-optional.scss +29 -0
- data/core/_neat-class-generator.scss +4 -0
- data/lib/neat-class-generator.rb +5 -0
- data/license.md +21 -0
- data/neat-class-generator.gemspec +16 -0
- data/package.json +32 -0
- metadata +68 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: dfb818615c4a623e3436e01672ea2d3a05c87621
|
4
|
+
data.tar.gz: 966a776f6b1db782d161737dad6798fae96ffaff
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 8ea8393b34daac17cc46d95b33e0dcb5a3ea7393c5840f07d044b7b2980bfb6704b8f1176a97955fa1503c46e8199515446b557cb99d25b21e053ad8306d7e7e
|
7
|
+
data.tar.gz: 79e6c459508dafc26d4820569c78156e6f5609744053d14817a8a795380492f632dc5a607da481bfb6e316b59f889dd4c47a2d32412b1d5e9a9155b7e8d545f5
|
data/README.md
ADDED
@@ -0,0 +1,99 @@
|
|
1
|
+
# Neat class generator
|
2
|
+
|
3
|
+
Generates css classes from Neat grids.
|
4
|
+
|
5
|
+
# Installation
|
6
|
+
|
7
|
+
## NPM
|
8
|
+
|
9
|
+
- `npm install --save neat-class-generator`
|
10
|
+
|
11
|
+
## Bower
|
12
|
+
- `bower install neat-class-generator`
|
13
|
+
|
14
|
+
# Documentation
|
15
|
+
|
16
|
+
`@include grid-generate-classes()` will generate classes for a grid map that is
|
17
|
+
passed in to it.
|
18
|
+
|
19
|
+
Classes will be generated using the `class:` property of the grid map.
|
20
|
+
**This property is required** and will be appended to the generated classes for
|
21
|
+
that grid. As an example defining the property as `class: my-grid`, this would
|
22
|
+
result in a class name of `.my-grid-column-2-of-12`, etc. This property must be
|
23
|
+
defined prior to the `grid-generate-classes` mixin being called.
|
24
|
+
|
25
|
+
<strong>example SCSS</strong>
|
26
|
+
```SCSS
|
27
|
+
@include grid-generate-classes($neat-grid);
|
28
|
+
```
|
29
|
+
<strong>example CSS</strong>
|
30
|
+
```CSS
|
31
|
+
|
32
|
+
.grid-column-1-of-12 {
|
33
|
+
width: calc(8.33333% - 21.66667px);
|
34
|
+
float: left;
|
35
|
+
margin-left: 20px; }
|
36
|
+
|
37
|
+
.grid-column-2-of-12 {
|
38
|
+
width: calc(16.66667% - 23.33333px);
|
39
|
+
float: left;
|
40
|
+
margin-left: 20px; }
|
41
|
+
|
42
|
+
.grid-column-3-of-12 {
|
43
|
+
width: calc(25% - 25px);
|
44
|
+
float: left;
|
45
|
+
margin-left: 20px; }
|
46
|
+
|
47
|
+
// etc…
|
48
|
+
```
|
49
|
+
|
50
|
+
<strong>example SCSS</strong>
|
51
|
+
```SCSS
|
52
|
+
$custom-neat-grid: (
|
53
|
+
class: custom,
|
54
|
+
columns: 12,
|
55
|
+
gutter: 50px,
|
56
|
+
media: 1000px,
|
57
|
+
);
|
58
|
+
|
59
|
+
@include grid-generate-classes($custom-neat-grid);
|
60
|
+
```
|
61
|
+
<strong>example CSS</strong>
|
62
|
+
```CSS
|
63
|
+
|
64
|
+
@media only screen and (min-width: 1000px) {
|
65
|
+
.custom-column-1-of-12 {
|
66
|
+
width: calc(8.33333% - 54.16667px);
|
67
|
+
float: left;
|
68
|
+
margin-left: 50px; }
|
69
|
+
.custom-column-2-of-12 {
|
70
|
+
width: calc(16.66667% - 58.33333px);
|
71
|
+
float: left;
|
72
|
+
margin-left: 50px; }
|
73
|
+
.custom-column-3-of-12 {
|
74
|
+
width: calc(25% - 62.5px);
|
75
|
+
float: left;
|
76
|
+
margin-left: 50px; }
|
77
|
+
|
78
|
+
// etc…
|
79
|
+
}
|
80
|
+
```
|
81
|
+
|
82
|
+
## Generated classes
|
83
|
+
|
84
|
+
Neat class generator will create classes for each of Neat's mixin properties
|
85
|
+
in the order in which they are generated. Since `grid-container` does not change
|
86
|
+
it is only generated once, under the name `.grid-container`.
|
87
|
+
|
88
|
+
The following is a manifest of all generated classes, with `{class}` standing in
|
89
|
+
for the grid map's `class:` property and `{column}` standing in
|
90
|
+
for the grid map's `column:` property. If the grid contains a `media:` property,
|
91
|
+
the generated classes will automatically be wrapped in the appropriate
|
92
|
+
media query.
|
93
|
+
|
94
|
+
1. `.{class}-column-1-of-{column}` to `.{class}-column-{column}-of-{column}`
|
95
|
+
2. `.{class}-push-neg-{column}-of-{column}` (negative) to `.{class}-push-{column}-of-{column}`
|
96
|
+
3. `.{class}-shift-neg-{column}-of-{column}` (negative) to `.{class}-shift-{column}-of-{column}`
|
97
|
+
4. `.{class}-visual`
|
98
|
+
5. `.{class}-collapse`
|
99
|
+
6. `.grid-container`
|
data/bower.json
ADDED
@@ -0,0 +1,33 @@
|
|
1
|
+
{
|
2
|
+
"name": "neat-class-generator",
|
3
|
+
"description": "A generator for dynamically creating classes from Neat",
|
4
|
+
"version": "1.0.0",
|
5
|
+
"main": "core/_grid-generate-classes.scss",
|
6
|
+
"authors": [
|
7
|
+
"Will H McMahan (http://mcmahan.me)"
|
8
|
+
],
|
9
|
+
"license": "MIT",
|
10
|
+
"keywords": [
|
11
|
+
"columns",
|
12
|
+
"grid",
|
13
|
+
"layout",
|
14
|
+
"media",
|
15
|
+
"media-queries",
|
16
|
+
"neat",
|
17
|
+
"omega",
|
18
|
+
"sass",
|
19
|
+
"scss",
|
20
|
+
"semantic"
|
21
|
+
],
|
22
|
+
"homepage": "https://github.com/whmii/neat-class-generator",
|
23
|
+
"ignore": [
|
24
|
+
"**/.*",
|
25
|
+
"node_modules",
|
26
|
+
"bower_components",
|
27
|
+
"test",
|
28
|
+
"tests"
|
29
|
+
],
|
30
|
+
"dependencies": {
|
31
|
+
"neat": "^2"
|
32
|
+
}
|
33
|
+
}
|
@@ -0,0 +1,45 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
/// Loops through the `grid-column`, `grid-push`, and `grid-shift` mixins for
|
3
|
+
/// the grid passed in. It then generates classes for each number of columns
|
4
|
+
/// (i.e. `1-of-12`, `2-of-12`, etc).
|
5
|
+
///
|
6
|
+
/// @group features
|
7
|
+
///
|
8
|
+
/// @name Grid classes loop
|
9
|
+
///
|
10
|
+
/// @argument {map} $grids
|
11
|
+
/// A Neat grid map.
|
12
|
+
///
|
13
|
+
/// @example scss
|
14
|
+
/// @include _grid-classes-loop($example);
|
15
|
+
///
|
16
|
+
/// @access private
|
17
|
+
|
18
|
+
@mixin _grid-classes-loop($grid) {
|
19
|
+
@if map-has-key($grid, columns) != true {
|
20
|
+
$grid: map-merge($grid, (columns: 12));
|
21
|
+
}
|
22
|
+
|
23
|
+
$_columns: map-get($grid, columns);
|
24
|
+
$_class: map-get($grid, class);
|
25
|
+
|
26
|
+
@include _grid-media-optional($grid) {
|
27
|
+
@for $_column from 1 to ($_columns + 1) {
|
28
|
+
.#{$_class}-column-#{$_column}-of-#{$_columns} {
|
29
|
+
@include grid-column($_column);
|
30
|
+
}
|
31
|
+
}
|
32
|
+
|
33
|
+
@for $_column from -($_columns + 1) to ($_columns + 1) {
|
34
|
+
$_column-class: if($_column < 0, "neg#{$_column}", $_column);
|
35
|
+
|
36
|
+
.#{$_class}-push-#{$_column-class}-of-#{$_columns} {
|
37
|
+
@include grid-push($_column);
|
38
|
+
}
|
39
|
+
|
40
|
+
.#{$_class}-push-#{$_column-class}-of-#{$_columns} {
|
41
|
+
@include grid-shift($_column);
|
42
|
+
}
|
43
|
+
}
|
44
|
+
}
|
45
|
+
}
|
@@ -0,0 +1,30 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
/// Loops through the `grid-visual` and `grid-collapse` mixins for each grid
|
3
|
+
/// passed in. It then generates classes for each visual grid and collapsed
|
4
|
+
/// objects, prefixed with the `class` property of the grid.
|
5
|
+
///
|
6
|
+
/// @group features
|
7
|
+
///
|
8
|
+
/// @name Grid classes simple
|
9
|
+
///
|
10
|
+
/// @argument {map} $grid
|
11
|
+
/// A Neat grid map.
|
12
|
+
///
|
13
|
+
/// @example scss
|
14
|
+
/// @include _grid-classes-simple($example);
|
15
|
+
///
|
16
|
+
/// @access private
|
17
|
+
|
18
|
+
@mixin _grid-classes-simple($grid) {
|
19
|
+
@include _grid-media-optional($grid) {
|
20
|
+
$_class: map-get($grid, class);
|
21
|
+
|
22
|
+
.#{$_class}-visual {
|
23
|
+
@include grid-visual(rgba(#00d4ff, 0.25),$grid);
|
24
|
+
}
|
25
|
+
|
26
|
+
.#{$_class}-collapse {
|
27
|
+
@include grid-collapse($grid);
|
28
|
+
}
|
29
|
+
}
|
30
|
+
}
|
@@ -0,0 +1,26 @@
|
|
1
|
+
/// `@include grid-generate-classes($grids:())` will generate classes for each
|
2
|
+
/// of the grid maps passed in to it. `$neat-grid` is automatically included.
|
3
|
+
///
|
4
|
+
/// @group features
|
5
|
+
///
|
6
|
+
/// @name Grid generate classes
|
7
|
+
///
|
8
|
+
/// @argument {map} $grid
|
9
|
+
/// A Neat grid map.
|
10
|
+
///
|
11
|
+
/// @example scss
|
12
|
+
/// @include grid-generate-classes($example);
|
13
|
+
///
|
14
|
+
|
15
|
+
@mixin grid-generate-classes() {
|
16
|
+
@if map-has-key($grid, class) != true {
|
17
|
+
@error "⚠️ Your grid map must contain a defined `class:` property."
|
18
|
+
}
|
19
|
+
|
20
|
+
@include _grid-classes-loop($grid);
|
21
|
+
@include _grid-classes-simple($grid);
|
22
|
+
|
23
|
+
.grid-container {
|
24
|
+
@include grid-container();
|
25
|
+
}
|
26
|
+
}
|
@@ -0,0 +1,29 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
/// Wraps Neat's [`grid-media`](http://neat.bourbon.io/docs/2.0.0/#grid-media)
|
3
|
+
/// mixin, causing the `media` property to be optional. If there is no `media`
|
4
|
+
/// property present, the content will not be wrapped in a media query.
|
5
|
+
///
|
6
|
+
/// @group features
|
7
|
+
///
|
8
|
+
/// @name Grid media optional
|
9
|
+
///
|
10
|
+
/// @argument {map} $grid
|
11
|
+
/// A map that contains a neat grid as outlined in
|
12
|
+
/// [`custom-grids`](http://neat.bourbon.io/docs/2.0.0/#custom-grids)
|
13
|
+
///
|
14
|
+
/// @example scss
|
15
|
+
/// @include _grid-media-optional($grid) {
|
16
|
+
/// …
|
17
|
+
/// }
|
18
|
+
///
|
19
|
+
/// @access private
|
20
|
+
|
21
|
+
@mixin _grid-media-optional($grid) {
|
22
|
+
@if map-has-key($grid, media) {
|
23
|
+
@include grid-media($grid) {
|
24
|
+
@content;
|
25
|
+
}
|
26
|
+
} @else {
|
27
|
+
@content;
|
28
|
+
}
|
29
|
+
}
|
data/license.md
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
The MIT License (MIT)
|
2
|
+
|
3
|
+
Copyright © 2017 [Kevin Garcia](github.com/kgcreative)
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
6
|
+
of this software and associated documentation files (the “Software”), to deal
|
7
|
+
in the Software without restriction, including without limitation the rights
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
10
|
+
furnished to do so, subject to the following conditions:
|
11
|
+
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
13
|
+
copies or substantial portions of the Software.
|
14
|
+
|
15
|
+
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
21
|
+
SOFTWARE.
|
@@ -0,0 +1,16 @@
|
|
1
|
+
Gem::Specification.new do |s|
|
2
|
+
s.add_runtime_dependency "sass", "~> 3.4"
|
3
|
+
s.authors = [
|
4
|
+
"Will McMahan"
|
5
|
+
]
|
6
|
+
s.email = "will@mcmahan.me"
|
7
|
+
s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
8
|
+
s.files = `git ls-files`.split("\n")
|
9
|
+
s.homepage = "http://neat.bourbon.io"
|
10
|
+
s.license = "MIT"
|
11
|
+
s.name = "neat-class-generator"
|
12
|
+
s.platform = Gem::Platform::RUBY
|
13
|
+
s.require_paths = ["lib"]
|
14
|
+
s.summary = "A lightweight Sass grid framework"
|
15
|
+
s.version = "1.0.0"
|
16
|
+
end
|
data/package.json
ADDED
@@ -0,0 +1,32 @@
|
|
1
|
+
{
|
2
|
+
"name": "neat-class-generator",
|
3
|
+
"version": "1.0.0",
|
4
|
+
"description": "A generator for dynamically creating classes from Neat 2.0",
|
5
|
+
"keywords": [
|
6
|
+
"columns",
|
7
|
+
"grid",
|
8
|
+
"layout",
|
9
|
+
"media",
|
10
|
+
"media-queries",
|
11
|
+
"neat",
|
12
|
+
"sass",
|
13
|
+
"scss",
|
14
|
+
"semantic"
|
15
|
+
],
|
16
|
+
"homepage": "https://github.com/whmii/neat-class-generator",
|
17
|
+
"bugs": {
|
18
|
+
"url": "git+https://github.com/whmii/neat-class-generator/issues"
|
19
|
+
},
|
20
|
+
"license": "MIT",
|
21
|
+
"author": {
|
22
|
+
"name": "Will H McMahan",
|
23
|
+
"url": "http://mcmahan.me"
|
24
|
+
},
|
25
|
+
"repository": {
|
26
|
+
"type": "git",
|
27
|
+
"url": "https://github.com/whmii/neat-class-generator.git"
|
28
|
+
},
|
29
|
+
"dependencies": {
|
30
|
+
"bourbon-neat": "^2"
|
31
|
+
}
|
32
|
+
}
|
metadata
ADDED
@@ -0,0 +1,68 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: neat-class-generator
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 1.0.0
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Will McMahan
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2017-04-21 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: sass
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - "~>"
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '3.4'
|
20
|
+
type: :runtime
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - "~>"
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '3.4'
|
27
|
+
description:
|
28
|
+
email: will@mcmahan.me
|
29
|
+
executables: []
|
30
|
+
extensions: []
|
31
|
+
extra_rdoc_files: []
|
32
|
+
files:
|
33
|
+
- README.md
|
34
|
+
- bower.json
|
35
|
+
- core/_grid-classes-loop.scss
|
36
|
+
- core/_grid-classes-simple.scss
|
37
|
+
- core/_grid-generate-classes.scss
|
38
|
+
- core/_grid-media-optional.scss
|
39
|
+
- core/_neat-class-generator.scss
|
40
|
+
- lib/neat-class-generator.rb
|
41
|
+
- license.md
|
42
|
+
- neat-class-generator.gemspec
|
43
|
+
- package.json
|
44
|
+
homepage: http://neat.bourbon.io
|
45
|
+
licenses:
|
46
|
+
- MIT
|
47
|
+
metadata: {}
|
48
|
+
post_install_message:
|
49
|
+
rdoc_options: []
|
50
|
+
require_paths:
|
51
|
+
- lib
|
52
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
53
|
+
requirements:
|
54
|
+
- - ">="
|
55
|
+
- !ruby/object:Gem::Version
|
56
|
+
version: '0'
|
57
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
58
|
+
requirements:
|
59
|
+
- - ">="
|
60
|
+
- !ruby/object:Gem::Version
|
61
|
+
version: '0'
|
62
|
+
requirements: []
|
63
|
+
rubyforge_project:
|
64
|
+
rubygems_version: 2.6.8
|
65
|
+
signing_key:
|
66
|
+
specification_version: 4
|
67
|
+
summary: A lightweight Sass grid framework
|
68
|
+
test_files: []
|