groundworkcss-rails 0.2.4 → 0.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. data/app/helpers/breadcrumbs_helper.rb~ +5 -0
  2. data/app/helpers/flash_block_helper.rb~ +18 -0
  3. data/app/helpers/flash_helper.rb~ +21 -0
  4. data/app/helpers/groundwork_flash_helper.rb~ +21 -0
  5. data/app/helpers/modal_helper.rb~ +42 -0
  6. data/app/helpers/social_glyph_helper.rb~ +12 -0
  7. data/lib/generators/groundworkcss/install/install_generator.rb~ +44 -0
  8. data/lib/generators/groundworkcss/install/templates/application.css.scss~ +8 -0
  9. data/lib/generators/groundworkcss/install/templates/application.css~ +7 -0
  10. data/lib/generators/groundworkcss/install/templates/application.js~ +10 -0
  11. data/lib/generators/groundworkcss/install/templates/groundwork-and-overrides.scss~ +12 -0
  12. data/lib/generators/groundworkcss/install/templates/groundwork-overrides.scss~ +7 -0
  13. data/lib/generators/groundworkcss/install/templates/groundwork.coffee~ +0 -0
  14. data/lib/generators/groundworkcss/install/templates/groundwork.js~ +1 -0
  15. data/lib/generators/groundworkcss/layout/layout_generator.rb~ +21 -0
  16. data/lib/generators/groundworkcss/layout/templates/_header.html.erb~ +24 -0
  17. data/lib/generators/groundworkcss/layout/templates/_sidebar.html.erb~ +18 -0
  18. data/lib/generators/groundworkcss/layout/templates/layout.html.erb~ +44 -0
  19. data/lib/groundworkcss/rails/bootstrap.rb~ +2 -0
  20. data/lib/groundworkcss/rails/engine.rb~ +30 -0
  21. data/lib/groundworkcss/rails/version.rb +1 -1
  22. data/lib/groundworkcss/rails/version.rb~ +1 -1
  23. data/lib/twitter-bootstrap-rails.rb~ +10 -0
  24. data/vendor/assets/javascripts/groundwork-hook.js +2 -0
  25. data/vendor/assets/javascripts/groundwork-hook.js~ +3 -0
  26. data/vendor/assets/javascripts/groundwork.js~ +8 -0
  27. data/vendor/assets/javascripts/groundworkcss/groundwork.js~ +7 -0
  28. data/vendor/assets/stylesheets/groundworkcss-scss/_font-awesome.scss~ +534 -0
  29. data/vendor/assets/stylesheets/groundworkcss-scss/_grid.scss +101 -21
  30. data/vendor/assets/stylesheets/groundworkcss-scss/_helpers.scss +62 -27
  31. data/vendor/assets/stylesheets/groundworkcss-scss/_mixins.scss +0 -9
  32. data/vendor/assets/stylesheets/groundworkcss-scss/_modals.scss +3 -3
  33. data/vendor/assets/stylesheets/groundworkcss-scss/_reset.scss +3 -2
  34. data/vendor/assets/stylesheets/groundworkcss-scss/_responsive.scss +2 -6
  35. data/vendor/assets/stylesheets/groundworkcss-scss/_social-icons.scss~ +92 -0
  36. data/vendor/assets/stylesheets/groundworkcss-scss/groundwork.scss +3 -9
  37. metadata +324 -307
  38. data/vendor/assets/javascripts/groundworkcss/plugins/coffee/jquery.modals.coffee +0 -161
  39. data/vendor/assets/javascripts/groundworkcss/plugins/coffee/jquery.popover.coffee +0 -198
  40. data/vendor/assets/javascripts/groundworkcss/plugins/coffee/jquery.popover.js +0 -10
  41. data/vendor/assets/javascripts/groundworkcss/plugins/coffee/jquery.responsiveTables.coffee +0 -56
  42. data/vendor/assets/javascripts/groundworkcss/plugins/coffee/jquery.responsiveTables.js +0 -10
  43. data/vendor/assets/javascripts/groundworkcss/plugins/coffee/jquery.responsiveText.coffee +0 -32
  44. data/vendor/assets/javascripts/groundworkcss/plugins/coffee/jquery.responsiveText.js +0 -10
  45. data/vendor/assets/javascripts/groundworkcss/plugins/coffee/jquery.tooltip.coffee +0 -121
  46. data/vendor/assets/javascripts/groundworkcss/plugins/coffee/jquery.tooltip.js +0 -10
@@ -7,9 +7,9 @@
7
7
  // =============================================
8
8
 
9
9
 
10
- /////////////////////////////////////
11
- // grid system - placeholders //
12
- /////////////////////////////////////
10
+ ///////////////////////////////////////////////
11
+ // grid system - placeholders & classes //
12
+ ///////////////////////////////////////////////
13
13
 
14
14
  %container {
15
15
  max-width: $max-width;
@@ -33,32 +33,112 @@
33
33
  margin-right: auto !important;
34
34
  }
35
35
 
36
+ @if $classes {
37
+ .container { @extend %container; }
38
+ .row { @extend %row; }
39
+ .column { @extend %column; }
40
+ .centered { @extend %centered; }
41
+ }
42
+
43
+ $selectors: if($classes, "%" ".", "%");
44
+
36
45
  $numbers: one two three four five six seven eight nine ten eleven twelve;
37
46
  $fractions: whole half third fourth fifth sixth seventh eighth ninth tenth eleventh twelfth;
38
47
  $fractions-plural: wholes halves thirds fourths fifths sixths sevenths eighths ninths tenths elevenths twelfths;
39
48
 
40
- // function to generate the grid code
41
- @for $i from 1 through length($numbers) {
42
- %#{nth($fractions, $i)},
43
- %#{nth($fractions-plural, $i)} {
44
- width: percentage(1 / $i);
45
- @extend %column;
46
- @for $width from 1 through $i {
47
- &%#{nth($numbers, $width)} {
48
- width: percentage($width / $i);
49
- @extend %column;
49
+ // function to generate the grid code (placeholders and optionally, classes)
50
+ @for $i from 1 through length($selectors) {
51
+ @for $j from 1 through length($numbers) {
52
+ #{nth($selectors, $i) + nth($fractions, $j)},
53
+ #{nth($selectors, $i) + nth($fractions-plural, $j)} {
54
+ width: percentage(1 / $j);
55
+ @extend %column;
56
+ @for $width from 1 through $j {
57
+ &#{nth($selectors, $i) + nth($numbers, $width)} {
58
+ width: percentage($width / $j);
59
+ @extend %column;
60
+ }
50
61
  }
51
- }
52
- @for $right-left-skip from 1 through $i - 1 {
53
- &%right-#{nth($numbers, $right-left-skip)} {
54
- left: percentage($right-left-skip / $i);
62
+ @for $right-left-skip from 1 through $j - 1 {
63
+ &#{nth($selectors, $i) + "right-" + nth($numbers, $right-left-skip)} {
64
+ left: percentage($right-left-skip / $j);
65
+ }
66
+ &#{nth($selectors, $i) + "left-" + nth($numbers, $right-left-skip)} {
67
+ right: percentage($right-left-skip / $j);
68
+ }
69
+ &#{nth($selectors, $i) + "skip-" + nth($numbers, $right-left-skip)} {
70
+ margin-left: percentage($right-left-skip / $j);
71
+ }
55
72
  }
56
- &%left-#{nth($numbers, $right-left-skip)} {
57
- right: percentage($right-left-skip / $i);
73
+ }
74
+ }
75
+ }
76
+
77
+ // grid classes responsive
78
+ @mixin grid-responsive($both: true) {
79
+ // responsive grid
80
+ %half, %halves,
81
+ %third, %thirds,
82
+ %fourth, %fourths,
83
+ %fifth, %fifths,
84
+ %sixth, %sixths,
85
+ %seventh, %sevenths,
86
+ %eighth, %eighths,
87
+ %ninth, %ninths,
88
+ %tenth, %tenths,
89
+ %eleventh, %elevenths,
90
+ %twelfth, %twelfths#{if($classes, ", .half, .halves, .third, .thirds, .fourth, .fourths, .fifth, .fifths, .sixth, .sixths, .seventh, .sevenths, .eighth, .eighths, .ninth, .ninths, .tenth, .tenths, .eleventh, .elevenths, .twelfth, .twelfths", "")} {
91
+ @if $both {
92
+ &:not(.small-tablet):not(.mobile) {
93
+ @include grid-collapse();
58
94
  }
59
- &%skip-#{nth($numbers, $right-left-skip)} {
60
- margin-left: percentage($right-left-skip / $i);
95
+ }
96
+ @else {
97
+ &:not(.mobile) {
98
+ @include grid-collapse();
61
99
  }
62
100
  }
63
101
  }
64
102
  }
103
+
104
+ @mixin grid-collapse() {
105
+ width:100% !important;
106
+ float:none;
107
+ clear:both;
108
+ // reset push
109
+ &%right-one,
110
+ &%right-two,
111
+ &%right-three,
112
+ &%right-four,
113
+ &%right-five,
114
+ &%right-six,
115
+ &%right-seven,
116
+ &%right-eight,
117
+ &%right-nine,
118
+ &%right-ten,
119
+ &%right-eleven#{if($classes, ", &.right-one, &.right-two, &.right-three, &.right-four, &.right-five, &.right-six, &.right-seven, &.right-eight, &.right-nine, &.right-ten, &.right-eleven", "")} { left:0; }
120
+ // reset pull
121
+ &%left-one,
122
+ &%left-two,
123
+ &%left-three,
124
+ &%left-four,
125
+ &%left-five,
126
+ &%left-six,
127
+ &%left-seven,
128
+ &%left-eight,
129
+ &%left-nine,
130
+ &%left-ten,
131
+ &%left-eleven#{if($classes, ", &.left-one, &.left-two, &.left-three, &.left-four, &.left-five, &.left-six, &.left-seven, &.left-eight, &.left-nine, &.left-ten, &.left-eleven", "")} { right:0; }
132
+ // reset offset
133
+ &%skip-one,
134
+ &%skip-two,
135
+ &%skip-three,
136
+ &%skip-four,
137
+ &%skip-five,
138
+ &%skip-six,
139
+ &%skip-seven,
140
+ &%skip-eight,
141
+ &%skip-nine,
142
+ &%skip-ten,
143
+ &%skip-eleven#{if($classes, ", &.skip-one, &.skip-two, &.skip-three, &.skip-four, &.skip-five, &.skip-six, &.skip-seven, &.skip-eight, &.skip-nine, &.skip-ten, &.skip-eleven", "")} { margin-left:0; }
144
+ }
@@ -1,11 +1,10 @@
1
1
  // ====================
2
2
  // layout helpers
3
3
  // ====================
4
- %inline { display:inline-block; width:auto; }
5
- %block { display:block; }
6
- %zero { margin:0; padding:0; }
7
- %pull-right { float:right; }
8
- %pull-left { float:left; }
4
+
5
+ %clear, %clearfix { clear:both;
6
+ &:after { content:''; display:block; clear:both; }
7
+ }
9
8
  %padded { padding:$gutter;
10
9
  &%double { padding:$gutter*2; }
11
10
  &%triple { padding:$gutter*3; }
@@ -46,33 +45,69 @@
46
45
  &%double { margin-left:$gutter*2; }
47
46
  &%triple { margin-left:$gutter*3; }
48
47
  }
49
- %border-right { border-right:1px solid $border-color; }
50
- %border-left { border-left:1px solid $border-color; }
48
+ %stick { position:fixed; z-index:1;
49
+ &%top { top:0; }
50
+ &%right { right:0; }
51
+ &%bottom { bottom:0; }
52
+ &%left { left:0; }
53
+ &%middle { top:50%; }
54
+ &%center { left:50%; }
55
+ }
56
+ %inline { display:inline-block; width:auto; }
57
+ %block { display:block; }
58
+ %zero { margin:0; padding:0; }
59
+ %pull-right { float:right; }
60
+ %pull-left { float:left; }
61
+ %bordered { border: 1px solid $border-color; }
51
62
  %border-top { border-top:1px solid $border-color; }
63
+ %border-right { border-right:1px solid $border-color; }
52
64
  %border-bottom { border-bottom:1px solid $border-color; }
53
- %align-top { display:table-cell; vertical-align:top; } // must have height
65
+ %border-left { border-left:1px solid $border-color; }
66
+ %align-top { display:table-cell; vertical-align:top; } // must have height (experimental)
54
67
  %align-right { text-align:right; }
55
- %align-bottom { display:table-cell; vertical-align:bottom; } // must have height
68
+ %align-bottom { display:table-cell; vertical-align:bottom; } // must have height (experimental)
56
69
  %align-left { text-align:left; }
57
70
  %align-center { text-align:center; }
58
71
  %justify { text-align:justify; }
59
- %center { display:block; margin:0 auto; }
60
- %clear, %clearfix { display:block; clear:both;
61
- &:after { content:''; display:block; clear:both; }
62
- }
72
+ %center { @extend %block; margin:0 auto; }
63
73
  %space { height:$gutter; }
64
- %stick { position:fixed; z-index:1;
65
- &%middle { top:50%; }
66
- &%center { left:50%; }
67
- &%right { right:0; }
68
- &%left { left:0; }
69
- &%top { top:0; }
70
- &%bottom { bottom:0; }
71
- }
72
74
  %round { @include rounded(9999px); }
73
- %rotate-90 { @include rotate(90deg); }
74
- %rotate-180 { @include rotate(180deg); }
75
- %rotate-270 { @include rotate(270deg); }
76
- %rotate-90-ctr { @include rotate(-90deg); }
77
- %rotate-180-ctr { @include rotate(-180deg); }
78
- %rotate-270-ctr { @include rotate(-270deg); }
75
+ %rotate-90 { @extend %inline; @include rotate(90deg); }
76
+ %rotate-180 { @extend %inline; @include rotate(180deg); }
77
+ %rotate-270 { @extend %inline; @include rotate(270deg); }
78
+ %rotate-90-ctr { @extend %inline; @include rotate(-90deg); }
79
+ %rotate-180-ctr { @extend %inline; @include rotate(-180deg); }
80
+ %rotate-270-ctr { @extend %inline; @include rotate(-270deg); }
81
+
82
+ @if $classes {
83
+
84
+ $helpers: inline block zero pull-right pull-left border-right border-left border-top border-bottom align-top align-right align-bottom align-left align-center justify center space round rotate-90 rotate-180 rotate-270 rotate-90-ctr rotate-180-ctr rotate-270-ctr;
85
+ // function to generate the helpers
86
+ @for $i from 1 through length($helpers) {
87
+ .#{nth($helpers, $i)} { @extend %#{nth($helpers, $i)}; }
88
+ }
89
+
90
+ $spacers: padded pad-top pad-right pad-bottom pad-left gapped gap-top gap-right gap-bottom gap-left;
91
+ $modifiers: double triple;
92
+ // function to generate the spacers
93
+ @for $i from 1 through length($spacers) {
94
+ .#{nth($spacers, $i)} { @extend %#{nth($spacers, $i)};
95
+ &.double { @extend %double; }
96
+ &.triple { @extend %triple; }
97
+ }
98
+ }
99
+
100
+ .clear, .clearfix { @extend %clear;
101
+ &:after { content:''; display:block; clear:both; }
102
+ }
103
+
104
+ .stick { @extend %stick;
105
+ &.top { @extend %top; }
106
+ &.right { @extend %right; }
107
+ &.bottom { @extend %bottom; }
108
+ &.left { @extend %left; }
109
+ &.middle { @extend %middle; }
110
+ &.center { @extend %center; }
111
+ }
112
+
113
+ }
@@ -235,12 +235,3 @@
235
235
  }
236
236
  }
237
237
  }
238
-
239
-
240
-
241
-
242
- // ====================
243
- // classes
244
- // ====================
245
-
246
- @import "classes";
@@ -32,7 +32,7 @@
32
32
  div.modal.active {
33
33
  visibility:visible;
34
34
  opacity:1;
35
- z-index:99;
35
+ z-index:999;
36
36
  }
37
37
  }
38
38
 
@@ -44,7 +44,7 @@
44
44
  left:0;
45
45
  bottom:0;
46
46
  right:0;
47
- z-index:98;
47
+ z-index:998;
48
48
  width:100%;
49
49
  height:100%;
50
50
  @include inner-shadow(#000000, 200px, 0, 0);
@@ -81,7 +81,7 @@ div.modal {
81
81
  }
82
82
  .close, .fullscreen {
83
83
  position:absolute;
84
- z-index:100;
84
+ z-index:1000;
85
85
  font-size:1.25em;
86
86
  top:10px;
87
87
  right:10px;
@@ -61,7 +61,8 @@ form, fieldset, legend, label, input, textarea, select, button,
61
61
  table, caption, tbody, tfoot, thead, tr, th, td,
62
62
  header, footer, aside, menu, nav, section, article, details,
63
63
  pre, code, iframe, object, canvas, audio, video {
64
- @extend %zero;
64
+ margin:0;
65
+ padding:0;
65
66
  border: 0;
66
67
  }
67
68
 
@@ -72,5 +73,5 @@ pre, code, iframe, object, canvas, audio, video {
72
73
  // HTML5 display fix //
73
74
  ///////////////////////
74
75
  header, footer, aside, menu, nav, section, article, details {
75
- @extend %block;
76
+ display:block;
76
77
  }
@@ -32,9 +32,7 @@
32
32
  // small tablets //
33
33
  ///////////////////////
34
34
  @include small-tablet {
35
- @if $classes {
36
- @include grid-responsive();
37
- }
35
+ @include grid-responsive();
38
36
  nav:not(.pagination), nav.inline {
39
37
  width:100%;
40
38
  ul, ul.row {
@@ -168,9 +166,7 @@
168
166
  // handhelds //
169
167
  ///////////////////////
170
168
  @include mobile {
171
- @if $classes {
172
- @include grid-responsive(false);
173
- }
169
+ @include grid-responsive(false);
174
170
  .tabs:not(.mobile) {
175
171
  > ul {
176
172
  li {
@@ -0,0 +1,92 @@
1
+ // =============================================
2
+ // Social icons by Gary Hepting
3
+ // Last Updated:2013-1-18
4
+ // =============================================
5
+
6
+
7
+
8
+
9
+ .social-icon {
10
+ display: inline-block;
11
+ background-size: 100%;
12
+ width:1em;
13
+ height:1em;
14
+ text-indent: -999em;
15
+ text-align: left;
16
+ @include rounded(2px);
17
+ margin-bottom: 3px;
18
+ vertical-align: bottom;
19
+ @include drop-shadow(rgba(0,0,0,0.2), 5px, 0, 0); // color, alpha, blur, x, y
20
+ &.small {
21
+ width: 20px;
22
+ height: 20px;
23
+ @include rounded(3px);
24
+ }
25
+ &.medium {
26
+ width: 30px;
27
+ height: 30px;
28
+ @include rounded(5px);
29
+ }
30
+ &.large {
31
+ width: 48px;
32
+ height: 48px;
33
+ @include rounded(6px);
34
+ }
35
+ &.round {
36
+ @include rounded(50% 50%);
37
+ }
38
+ &.aboutme { @include data-image("social-icons/aboutme.svg"); }
39
+ &.adn { @include data-image("social-icons/adn.svg"); }
40
+ &.android { @include data-image("social-icons/android.svg"); }
41
+ &.apple { @include data-image("social-icons/apple.svg"); }
42
+ &.behance { @include data-image("social-icons/behance.svg"); }
43
+ &.bitbucket { @include data-image("social-icons/bitbucket.svg"); }
44
+ &.coderwall { @include data-image("social-icons/coderwall.svg"); }
45
+ &.creativecloud { @include data-image("social-icons/creativecloud.svg"); }
46
+ &.dribbble { @include data-image("social-icons/dribbble.svg"); }
47
+ &.dropbox { @include data-image("social-icons/dropbox.svg"); }
48
+ &.evernote { @include data-image("social-icons/evernote.svg"); }
49
+ &.facebook { @include data-image("social-icons/facebook.svg"); }
50
+ &.flickr { @include data-image("social-icons/flickr.svg"); }
51
+ &.foursquare { @include data-image("social-icons/foursquare.svg"); }
52
+ &.git { @include data-image("social-icons/git.svg"); }
53
+ &.github { @include data-image("social-icons/github.svg"); }
54
+ &.googleplay { @include data-image("social-icons/googleplay.svg"); }
55
+ &.googleplus { @include data-image("social-icons/googleplus.svg"); }
56
+ &.html5 { @include data-image("social-icons/html5.svg"); }
57
+ &.icloud { @include data-image("social-icons/icloud.svg"); }
58
+ &.instagram { @include data-image("social-icons/instagram.svg"); }
59
+ &.lastfm { @include data-image("social-icons/lastfm.svg"); }
60
+ &.linkedin { @include data-image("social-icons/linkedin.svg"); }
61
+ &.mail { @include data-image("social-icons/mail.svg"); }
62
+ &.mixi { @include data-image("social-icons/mixi.svg"); }
63
+ &.msn { @include data-image("social-icons/msn.svg"); }
64
+ &.pinterest { @include data-image("social-icons/pinterest.svg"); }
65
+ &.pocket { @include data-image("social-icons/pocketapp.svg"); }
66
+ &.quora { @include data-image("social-icons/quora.svg"); }
67
+ &.orkut { @include data-image("social-icons/orkut.svg"); }
68
+ &.mercurial { @include data-image("social-icons/mercurial.svg"); }
69
+ &.rdio { @include data-image("social-icons/rdio.svg"); }
70
+ &.renren { @include data-image("social-icons/renren.svg"); }
71
+ &.rss { @include data-image("social-icons/rss.svg"); }
72
+ &.skitch { @include data-image("social-icons/skitch.svg"); }
73
+ &.skype { @include data-image("social-icons/skype.svg"); }
74
+ &.soundcloud { @include data-image("social-icons/soundcloud.svg"); }
75
+ &.spotify { @include data-image("social-icons/spotify.svg"); }
76
+ &.stackoverflow { @include data-image("social-icons/stackoverflow.svg"); }
77
+ &.stumbleupon { @include data-image("social-icons/stumbleupon.svg"); }
78
+ &.svn { @include data-image("social-icons/svn.svg"); }
79
+ &.tent { @include data-image("social-icons/tent.svg"); }
80
+ &.tripadvisor { @include data-image("social-icons/tripadvisor.svg"); }
81
+ &.tumblr { @include data-image("social-icons/tumblr.svg"); }
82
+ &.twitter { @include data-image("social-icons/twitter.svg"); }
83
+ &.vimeo { @include data-image("social-icons/vimeo.svg"); }
84
+ &.weibo { @include data-image("social-icons/weibo.svg"); }
85
+ &.windows { @include data-image("social-icons/windows.svg"); }
86
+ &.wordpress { @include data-image("social-icons/wordpress.svg"); }
87
+ &.xing { @include data-image("social-icons/xing.svg"); }
88
+ &.yelp { @include data-image("social-icons/yelp.svg"); }
89
+ &.youtube { @include data-image("social-icons/youtube.svg"); }
90
+ &.youversion { @include data-image("social-icons/youversion.svg"); }
91
+ &.zerply { @include data-image("social-icons/zerply.svg"); }
92
+ }
@@ -16,15 +16,6 @@
16
16
 
17
17
  // grid
18
18
  @import "grid";
19
- @if $classes {
20
- @include grid-classes();
21
- }
22
-
23
- // helper classes
24
- @import "helpers";
25
- @if $classes {
26
- @include helper-classes();
27
- }
28
19
 
29
20
  // components
30
21
  @import "typography";
@@ -41,5 +32,8 @@
41
32
  // @import "popovers";
42
33
  @import "modals";
43
34
 
35
+ // helper classes
36
+ @import "helpers";
37
+
44
38
  // responsive adjustments
45
39
  @import "responsive";