prelude-framework 0.7 → 0.8

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,3 +1,3 @@
1
1
  module Prelude
2
- VERSION = "0.7"
2
+ VERSION = "0.8"
3
3
  end
data/scss/prelude.scss CHANGED
@@ -13,6 +13,7 @@
13
13
  // prelude/mixins/rem
14
14
  // prelude/mixins/set-font-size
15
15
  // prelude/mixins/button-style
16
+ // prelude/mixins/grid
16
17
  //
17
18
  // prelude/abstractions
18
19
  // prelude/abstractions/media
@@ -5,10 +5,11 @@
5
5
  // 1. Base
6
6
  // 2. Colors
7
7
  // 3. Typography
8
- // 4. Forms
9
- // 5. Tables
10
- // 6. Buttons
11
- // 7. Debug mode
8
+ // 4. Grid system
9
+ // 5. Forms
10
+ // 6. Tables
11
+ // 7. Buttons
12
+ // 8. Debug mode
12
13
  //
13
14
  // =============================================================================
14
15
 
@@ -19,6 +20,7 @@
19
20
  //Border radius
20
21
  $default-border-radius: 4px !default; // default: 4px
21
22
 
23
+
22
24
  // =============================================================================
23
25
  // 2. Colors
24
26
  // =============================================================================
@@ -55,6 +57,7 @@ $blockquote-color: $gray-lighter !default; // default: $gray-lighter
55
57
  // Line & Border colors
56
58
  $line-color: #e6e6e6 !default; // default: #e6e6e6
57
59
 
60
+
58
61
  // =============================================================================
59
62
  // 3. Typography
60
63
  // =============================================================================
@@ -93,8 +96,21 @@ $brand-color: $black !default; // default: $black
93
96
  // Colors
94
97
  $subheader-color: $gray-light !default; // default: $gray-light
95
98
 
99
+
100
+ // =============================================================================
101
+ // 4. Grid system
102
+ // =============================================================================
103
+
104
+ $grid-gutter: $base-spacing-unit !default; // default: $base-spacing-unit
105
+ $grid-use-placeholder: false !default; // default: false
106
+ $grid-breakpoints: 's' '(min-width: 320px)', 'm' '(min-width: 700px)', 'l' '(min-width: 980px)'; // default: 's' '(min-width: 320px)', 'm' '(min-width: 700px)', 'l' '(min-width: 980px)'
107
+ $generate-default-grid: false !default; // default: false
108
+ $use-grid-breakpoints: false !default; // default: false
109
+ $use-markup-fix: true !default; // default true
110
+
111
+
96
112
  // =============================================================================
97
- // 4. Forms
113
+ // 5. Forms
98
114
  // =============================================================================
99
115
 
100
116
  $input-background: $white !default; // default: $white
@@ -123,7 +139,7 @@ $info-background: #d9edf7 !default; // default: #d9edf7
123
139
  $info-border: darken(adjust-hue($info-background, -10), 7%) !default; // default: darken(adjust-hue($info-background, -10), 7%)
124
140
 
125
141
  // =============================================================================
126
- // 5. Tables
142
+ // 6. Tables
127
143
  // =============================================================================
128
144
 
129
145
  $table-background: transparent !default; // default: transparent
@@ -131,8 +147,9 @@ $table-background-stripe: #f1f1f1 !default; // default: #f1f1f1
131
147
  $table-background-hover: #f1f1f1 !default; // default: #f1f1f1
132
148
  $table-border: $line-color !default; // default: $line-color
133
149
 
150
+
134
151
  // =============================================================================
135
- // 6. Buttons
152
+ // 7. Buttons
136
153
  // =============================================================================
137
154
 
138
155
  $btn-font-weight: normal !default; // default: normal
@@ -152,8 +169,9 @@ $btn-warning-background: lighten($orange, 15%) !default; // default: lighten(
152
169
  $btn-danger-background: #ee5f5b !default; // default: #ee5f5b
153
170
  $btn-inverse-background: $gray !default; // default: $gray
154
171
 
172
+
155
173
  // =============================================================================
156
- // 7. Debug mode
174
+ // 8. Debug mode
157
175
  // =============================================================================
158
176
 
159
177
  $debug-mode: false !default; // default: false
@@ -6,4 +6,5 @@
6
6
  @import "mixins/gradients",
7
7
  "mixins/rem",
8
8
  "mixins/set-font-size",
9
- "mixins/button-style";
9
+ "mixins/button-style",
10
+ "mixins/grid";
@@ -0,0 +1,183 @@
1
+ // =============================================================================
2
+ // Grid system
3
+ //
4
+ // Table of contents:
5
+ // 1. Grid setup
6
+ // 2. Widths
7
+ // 3. Pushes
8
+ // 4. Pulls
9
+ // 5. Generator
10
+ // 6. Helper functions
11
+ // 7. Generate default grid
12
+ //
13
+ // Based on (and borrowed from) the amazing work of Harry Roberts
14
+ // (https://github.com/csswizardry/inuit.css)
15
+ //
16
+ // =============================================================================
17
+
18
+ $number-names: one two three four five six seven eight nine ten eleven twelve;
19
+ $division-names: whole half third quarter fifth sixth seventh eighth nineth tenth eleventh twelfth;
20
+
21
+ $class-type: unquote(".");
22
+
23
+ @if $grid-use-placeholder == true {
24
+ $class-type: unquote("%");
25
+ }
26
+
27
+ // =============================================================================
28
+ // 1. Grid setup
29
+ // =============================================================================
30
+
31
+ // 1. Allow the grid system to be used on lists.
32
+ // 2. Remove any margins and paddings that might affect the grid system.
33
+ // 3. Apply a negative `margin-left` to negate the columns’ gutters.
34
+ // 4. If not using a markup fix, use the letter-spacing hack.
35
+
36
+ #{$class-type}grid {
37
+ list-style: none; // [1]
38
+ margin: 0; // [2]
39
+ padding: 0; // [2]
40
+ margin-left: -$grid-gutter; // [3]
41
+ @if $use-markup-fix != true {
42
+ letter-spacing:-0.31em;
43
+ }
44
+ }
45
+
46
+ // 1. Cause columns to stack side-by-side.
47
+ // 2. Full width by default.
48
+ // 3. Space columns apart.
49
+ // 4. Align columns to the tops of each other.
50
+ // 5. Reinstate removed whitespace.
51
+ // 6. Required to combine fluid widths and fixed gutters.
52
+
53
+ #{$class-type}grid__item {
54
+ display: inline-block; // [1]
55
+ width: 100%; // [2]
56
+ padding-left: $grid-gutter; // [3]
57
+ vertical-align: top; // [4]
58
+ letter-spacing: normal; // [5]
59
+ word-spacing: normal; // [5]
60
+ -webkit-box-sizing: border-box; // [6]
61
+ -moz-box-sizing: border-box; // [6]
62
+ box-sizing: border-box; // [6]
63
+ }
64
+
65
+ // =============================================================================
66
+ // 2. Widths
67
+ // =============================================================================
68
+
69
+ @mixin grid-widths($divisions: 'all', $responsive-classes: false) {
70
+ @include generate-grid($divisions, $responsive-classes, $move-class: '', $property: 'width');
71
+ }
72
+
73
+ // =============================================================================
74
+ // 3. Pushes
75
+ // =============================================================================
76
+
77
+ @mixin grid-pushes($divisions: 'all', $responsive-classes: false) {
78
+ [class*="push--"]{ position:relative; }
79
+ @include generate-grid($divisions, $responsive-classes, $move-class: 'push--', $property: 'left');
80
+ }
81
+
82
+ // =============================================================================
83
+ // 4. Pulls
84
+ // =============================================================================
85
+
86
+ @mixin grid-pulls($divisions: 'all', $responsive-classes: false) {
87
+ [class*="pull--"]{ position:relative; }
88
+ @include generate-grid($divisions, $responsive-classes, $move-class: 'pull--', $property: 'right');
89
+ }
90
+
91
+
92
+ // =============================================================================
93
+ // 5. Generator
94
+ // =============================================================================
95
+
96
+ @mixin generate-grid($divisions, $responsive-classes, $move-class, $property) {
97
+ $namespace: "";
98
+
99
+ @if $divisions == 'all' {
100
+ $divisions: 1 2 3 4 5 6 7 8 9 10 11 12;
101
+ }
102
+
103
+ // Generate base classes (one-half, two-thirds, …)
104
+ @include generate-classes($divisions, $move-class, $property, $namespace);
105
+
106
+ @if $responsive-classes {
107
+ @each $breakpoint in $grid-breakpoints {
108
+ @media only screen and #{nth($breakpoint, 2)} {
109
+ // Generate responsive classes (s-one-half, m-two-thirds, …)
110
+ @include generate-classes($divisions, $move-class, $property, $namespace: #{nth($breakpoint, 1)}unquote("-"));
111
+ }
112
+ }
113
+ }
114
+ }
115
+
116
+ @mixin generate-classes($divisions, $move-class, $property , $namespace) {
117
+
118
+ // A list to store generated classes and size values
119
+ $generated: ();
120
+
121
+ @each $division in $divisions {
122
+ @for $number from 1 to if($division == 1, $division + 1, $division) {
123
+
124
+ // Calculate size based on divisions and number
125
+ $size: (100% / $division) * $number;
126
+
127
+ // Class name
128
+ $class: #{$class-type}#{$move-class}#{$namespace}#{number-name($number)}-#{division-name($division)}#{pluralize($number)};
129
+
130
+ #{$class} {
131
+ // Check if we can use @extend from a previously generated class
132
+ $extended-class: extends($generated, $size);
133
+ @if $extended-class != false {
134
+ @extend #{$extended-class};
135
+ } @else {
136
+ #{$property}: $size;
137
+ $generated: append($generated, $class $size);
138
+ }
139
+ }
140
+ }
141
+ }
142
+ }
143
+
144
+ // =============================================================================
145
+ // 6. Helper functions
146
+ // =============================================================================
147
+
148
+ // Returns the name of a given number: number-name(2) // returns 'two'
149
+ @function number-name($number) {
150
+ @return nth($number-names, $number);
151
+ }
152
+
153
+ // Returns the name of a given division: division-name(2) // returns 'half'
154
+ @function division-name($number) {
155
+ @return nth($division-names, $number);
156
+ }
157
+
158
+ // Returns `s` to pluralize a number if needed: pluralize(2) // returns 's'
159
+ @function pluralize($number) {
160
+ @if $number > 1 { @return 's'; }
161
+ @return null;
162
+ }
163
+
164
+ // Returns a previously generated class if it can be used as an extend: one-half extends two-quarters
165
+ @function extends($generated, $size) {
166
+ @each $item in $generated {
167
+ @if index(nth($item, 2), $size) {
168
+ @return nth($item, 1);
169
+ }
170
+ }
171
+ @return false;
172
+ }
173
+
174
+
175
+ // =============================================================================
176
+ // 7. Generate default grid
177
+ // =============================================================================
178
+
179
+ @if $generate-default-grid {
180
+ @include grid-widths(all, $use-grid-breakpoints);
181
+ @include grid-pushes(all, $use-grid-breakpoints);
182
+ @include grid-pulls(all, $use-grid-breakpoints);
183
+ }
data/test/scss/style.scss CHANGED
@@ -1,55 +1,55 @@
1
- // =============================================================================
2
- // Prelude Test Bed
3
- // =============================================================================
4
-
5
- // Prelude framework import
6
- @import "compass",
7
- "prelude-settings",
8
- "prelude",
9
- "prelude/all";
10
-
11
-
12
- // =============================================================================
13
- // Main wrapper
14
- // =============================================================================
15
-
16
- .wrapper {
17
- margin: 0 auto;
18
- padding: 0 2em;
19
- max-width: 990px;
20
- }
21
-
22
-
23
- // =============================================================================
24
- // Responsive font styles
25
- // =============================================================================
26
-
27
- @media screen and (max-width: pixels-to-ems(400px)) {
28
- @include set-font-size(14px, 14px * 1.35);
29
- }
30
-
31
-
32
- // =============================================================================
33
- // Test blocks
34
- // =============================================================================
35
-
36
- .test {
37
- padding: $base-spacing-unit;
38
- background-color: $gray-lighter;
39
- border-radius: $default-border-radius;
40
- }
41
-
42
-
43
- // =============================================================================
44
- // Buttons
45
- // =============================================================================
46
-
47
- .buttons-with-gradient {
48
- .btn { @include btn-style($btn-background, true); }
49
- .btn--primary { @include btn-style($btn-primary-background, true); }
50
- .btn--info { @include btn-style($btn-info-background, true); }
51
- .btn--success { @include btn-style($btn-success-background, true); }
52
- .btn--warning { @include btn-style($btn-warning-background, true); }
53
- .btn--danger { @include btn-style($btn-danger-background, true); }
54
- .btn--inverse { @include btn-style($btn-inverse-background, true); }
55
- }
1
+ // =============================================================================
2
+ // Prelude Test Bed
3
+ // =============================================================================
4
+
5
+ // Prelude framework import
6
+ @import "compass",
7
+ "prelude-settings",
8
+ "prelude",
9
+ "prelude/all";
10
+
11
+
12
+ // =============================================================================
13
+ // Main wrapper
14
+ // =============================================================================
15
+
16
+ .wrapper {
17
+ margin: 0 auto;
18
+ padding: 0 2em;
19
+ max-width: 990px;
20
+ }
21
+
22
+
23
+ // =============================================================================
24
+ // Responsive font styles
25
+ // =============================================================================
26
+
27
+ @media screen and (max-width: pixels-to-ems(400px)) {
28
+ @include set-font-size(14px, 14px * 1.35);
29
+ }
30
+
31
+
32
+ // =============================================================================
33
+ // Test blocks
34
+ // =============================================================================
35
+
36
+ .test {
37
+ padding: $base-spacing-unit;
38
+ background-color: $gray-lighter;
39
+ border-radius: $default-border-radius;
40
+ }
41
+
42
+
43
+ // =============================================================================
44
+ // Buttons
45
+ // =============================================================================
46
+
47
+ .buttons-with-gradient {
48
+ .btn { @include btn-style($btn-background, true); }
49
+ .btn--primary { @include btn-style($btn-primary-background, true); }
50
+ .btn--info { @include btn-style($btn-info-background, true); }
51
+ .btn--success { @include btn-style($btn-success-background, true); }
52
+ .btn--warning { @include btn-style($btn-warning-background, true); }
53
+ .btn--danger { @include btn-style($btn-danger-background, true); }
54
+ .btn--inverse { @include btn-style($btn-inverse-background, true); }
55
+ }
metadata CHANGED
@@ -1,77 +1,72 @@
1
- --- !ruby/object:Gem::Specification
1
+ --- !ruby/object:Gem::Specification
2
2
  name: prelude-framework
3
- version: !ruby/object:Gem::Version
4
- hash: 5
3
+ version: !ruby/object:Gem::Version
4
+ version: '0.8'
5
5
  prerelease:
6
- segments:
7
- - 0
8
- - 7
9
- version: "0.7"
10
6
  platform: ruby
11
- authors:
7
+ authors:
12
8
  - Daniel Guillan
13
9
  autorequire:
14
10
  bindir: bin
15
11
  cert_chain: []
16
-
17
- date: 2013-08-21 00:00:00 Z
18
- dependencies:
19
- - !ruby/object:Gem::Dependency
12
+ date: 2013-08-23 00:00:00.000000000 Z
13
+ dependencies:
14
+ - !ruby/object:Gem::Dependency
20
15
  name: sass
21
- prerelease: false
22
- requirement: &id001 !ruby/object:Gem::Requirement
16
+ requirement: !ruby/object:Gem::Requirement
23
17
  none: false
24
- requirements:
25
- - - ">="
26
- - !ruby/object:Gem::Version
27
- hash: 9
28
- segments:
29
- - 3
30
- - 2
31
- - 3
18
+ requirements:
19
+ - - ! '>='
20
+ - !ruby/object:Gem::Version
32
21
  version: 3.2.3
33
22
  type: :runtime
34
- version_requirements: *id001
35
- - !ruby/object:Gem::Dependency
36
- name: compass
37
23
  prerelease: false
38
- requirement: &id002 !ruby/object:Gem::Requirement
24
+ version_requirements: !ruby/object:Gem::Requirement
25
+ none: false
26
+ requirements:
27
+ - - ! '>='
28
+ - !ruby/object:Gem::Version
29
+ version: 3.2.3
30
+ - !ruby/object:Gem::Dependency
31
+ name: compass
32
+ requirement: !ruby/object:Gem::Requirement
39
33
  none: false
40
- requirements:
41
- - - ">="
42
- - !ruby/object:Gem::Version
43
- hash: 43
44
- segments:
45
- - 0
46
- - 12
47
- - 2
34
+ requirements:
35
+ - - ! '>='
36
+ - !ruby/object:Gem::Version
48
37
  version: 0.12.2
49
38
  type: :runtime
50
- version_requirements: *id002
51
- - !ruby/object:Gem::Dependency
52
- name: rake
53
39
  prerelease: false
54
- requirement: &id003 !ruby/object:Gem::Requirement
40
+ version_requirements: !ruby/object:Gem::Requirement
55
41
  none: false
56
- requirements:
57
- - - ">="
58
- - !ruby/object:Gem::Version
59
- hash: 3
60
- segments:
61
- - 0
62
- version: "0"
42
+ requirements:
43
+ - - ! '>='
44
+ - !ruby/object:Gem::Version
45
+ version: 0.12.2
46
+ - !ruby/object:Gem::Dependency
47
+ name: rake
48
+ requirement: !ruby/object:Gem::Requirement
49
+ none: false
50
+ requirements:
51
+ - - ! '>='
52
+ - !ruby/object:Gem::Version
53
+ version: '0'
63
54
  type: :runtime
64
- version_requirements: *id003
65
- description: A robust, extensible and opinionated OOCSS front-end framework built with SASS and Compass framework
66
- email:
55
+ prerelease: false
56
+ version_requirements: !ruby/object:Gem::Requirement
57
+ none: false
58
+ requirements:
59
+ - - ! '>='
60
+ - !ruby/object:Gem::Version
61
+ version: '0'
62
+ description: A robust, extensible and opinionated OOCSS front-end framework built
63
+ with SASS and Compass framework
64
+ email:
67
65
  - hello@danielguillan.com
68
66
  executables: []
69
-
70
67
  extensions: []
71
-
72
68
  extra_rdoc_files: []
73
-
74
- files:
69
+ files:
75
70
  - .gitignore
76
71
  - Gemfile
77
72
  - LICENCE
@@ -109,6 +104,7 @@ files:
109
104
  - scss/prelude/mixins/_button-style.scss
110
105
  - scss/prelude/mixins/_each-grid-breakpoint.scss
111
106
  - scss/prelude/mixins/_gradients.scss
107
+ - scss/prelude/mixins/_grid.scss
112
108
  - scss/prelude/mixins/_rem.scss
113
109
  - scss/prelude/mixins/_set-font-size.scss
114
110
  - scss/prelude/modules/_buttons.scss
@@ -126,38 +122,36 @@ files:
126
122
  - test/scss/style.scss
127
123
  homepage: https://github.com/danielguillan/prelude
128
124
  licenses: []
129
-
130
125
  post_install_message:
131
126
  rdoc_options: []
132
-
133
- require_paths:
127
+ require_paths:
134
128
  - lib
135
- required_ruby_version: !ruby/object:Gem::Requirement
129
+ required_ruby_version: !ruby/object:Gem::Requirement
136
130
  none: false
137
- requirements:
138
- - - ">="
139
- - !ruby/object:Gem::Version
140
- hash: 3
141
- segments:
131
+ requirements:
132
+ - - ! '>='
133
+ - !ruby/object:Gem::Version
134
+ version: '0'
135
+ segments:
142
136
  - 0
143
- version: "0"
144
- required_rubygems_version: !ruby/object:Gem::Requirement
137
+ hash: -4549275720819963838
138
+ required_rubygems_version: !ruby/object:Gem::Requirement
145
139
  none: false
146
- requirements:
147
- - - ">="
148
- - !ruby/object:Gem::Version
149
- hash: 3
150
- segments:
140
+ requirements:
141
+ - - ! '>='
142
+ - !ruby/object:Gem::Version
143
+ version: '0'
144
+ segments:
151
145
  - 0
152
- version: "0"
146
+ hash: -4549275720819963838
153
147
  requirements: []
154
-
155
148
  rubyforge_project:
156
149
  rubygems_version: 1.8.24
157
150
  signing_key:
158
151
  specification_version: 3
159
- summary: A robust, extensible and opinionated OOCSS front-end framework built with SASS and Compass framework
160
- test_files:
152
+ summary: A robust, extensible and opinionated OOCSS front-end framework built with
153
+ SASS and Compass framework
154
+ test_files:
161
155
  - test/config.rb
162
156
  - test/index.html
163
157
  - test/scss/_prelude-settings.scss