prelude-framework 0.8 → 0.8.1

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml ADDED
@@ -0,0 +1,15 @@
1
+ ---
2
+ !binary "U0hBMQ==":
3
+ metadata.gz: !binary |-
4
+ YzM2YjY0YTBiZjI1Yjg0N2ZjYTJhN2FjMDBiNTI3NDZkNjlmYzUxNQ==
5
+ data.tar.gz: !binary |-
6
+ ZDFiZWQ4MWZkMWFlYTgxZGMzMzg3ZTlhNmMxMDFhZGNlMTk3YzgzZQ==
7
+ SHA512:
8
+ metadata.gz: !binary |-
9
+ ZGMxM2EzOTNlMzQ5N2NiYzJhZGE2NWY1NGE5ZmFhYTBmNzQyZWVlYmViOTg1
10
+ NWIyOTI5NTM0MzQ0ZmVmNjg2MWIxZWYyYmRjNTM5ZDE2OGM0NGFiNzJkNmRj
11
+ MWU4YjViZjdkNDFmODIxMDA5NjBkOWQ2ZGYwZjRjNjU5ZjI5OWM=
12
+ data.tar.gz: !binary |-
13
+ MmI3M2RiZDE4NGM2M2Q2NjJlMmM3YTU5MzUyNzE2NjM0NmRmMWY0MmYyNDRk
14
+ NDdiM2Q5MjEwY2QwM2EyZjg2ZjMwZjQwOWZjNjVkNmMyOWUzNjc2NmQ3NDhh
15
+ ZDQyNDE3NDM0NTZmM2FiOGM4NWVjZWIxZDE1MTAzZmNlOTVlOTM=
@@ -1,3 +1,3 @@
1
1
  module Prelude
2
- VERSION = "0.8"
2
+ VERSION = "0.8.1"
3
3
  end
data/scss/prelude.scss CHANGED
@@ -5,35 +5,43 @@
5
5
  //
6
6
  // prelude/all
7
7
  //
8
- // prelude/base
9
- // prelude/base/helpers
8
+ // prelude/helpers
9
+ // prelude/helpers/floats
10
+ // prelude/helpers/clears
11
+ // prelude/helpers/margins
12
+ // prelude/helpers/paddings
13
+ // prelude/helpers/clearfix
14
+ // prelude/helpers/hidden-text
15
+ // prelude/helpers/text-utilities
16
+ // prelude/helpers/text-alignment
17
+ // prelude/helpers/display-utilities
10
18
  //
11
19
  // prelude/mixins
12
- // prelude/mixins/gradients
13
20
  // prelude/mixins/rem
14
- // prelude/mixins/set-font-size
15
- // prelude/mixins/button-style
16
21
  // prelude/mixins/grid
22
+ // prelude/mixins/gradients
23
+ // prelude/mixins/button-style
24
+ // prelude/mixins/set-font-size
17
25
  //
18
26
  // prelude/abstractions
19
- // prelude/abstractions/media
20
27
  // prelude/abstractions/nav
21
- // prelude/abstractions/island
28
+ // prelude/abstractions/flag
22
29
  // prelude/abstractions/split
30
+ // prelude/abstractions/media
31
+ // prelude/abstractions/island
23
32
  // prelude/abstractions/flexbox
24
- // prelude/abstractions/flag
25
33
  //
26
34
  // prelude/images
27
- // prelude/images/cover-image
28
35
  // prelude/images/thumbnails
36
+ // prelude/images/cover-image
29
37
  //
30
38
  // prelude/typography
31
39
  // prelude/typography/base
32
40
  // prelude/typography/sizes
33
- // prelude/typography/paragraphs
34
- // prelude/typography/quotes
35
41
  // prelude/typography/links
36
42
  // prelude/typography/brand
43
+ // prelude/typography/quotes
44
+ // prelude/typography/paragraphs
37
45
  //
38
46
  // prelude/modules
39
47
  // prelude/modules/forms
@@ -1,4 +1,4 @@
1
- @import "prelude/base",
1
+ @import "prelude/helpers",
2
2
  "prelude/mixins",
3
3
  "prelude/abstractions",
4
4
  "prelude/typography",
@@ -5,9 +5,24 @@
5
5
 
6
6
  // Border box FTW!
7
7
  // =============================================================================
8
- * { @include box-sizing(border-box) }
8
+
9
+ * {
10
+ &,
11
+ &:before,
12
+ &:after {
13
+ @include box-sizing(border-box);
14
+
15
+ }
16
+ }
9
17
 
10
18
 
11
19
  // Clearfix placeholder
12
20
  // =============================================================================
13
- %prelude-clearfix { @include pie-clearfix; }
21
+
22
+ %prelude-clearfix {
23
+ &:after {
24
+ content:"";
25
+ display:table;
26
+ clear:both;
27
+ }
28
+ }
@@ -0,0 +1,14 @@
1
+ // =============================================================================
2
+ // Helpers
3
+ // =============================================================================
4
+
5
+
6
+ @import 'helpers/floats',
7
+ 'helpers/clears',
8
+ 'helpers/margins',
9
+ 'helpers/paddings',
10
+ 'helpers/clearfix',
11
+ 'helpers/hidden-text',
12
+ 'helpers/text-alignment',
13
+ 'helpers/text-utilities',
14
+ 'helpers/display-utilities';
@@ -1,7 +1,7 @@
1
1
  // =============================================================================
2
- // Border-box FTW
2
+ // Clearfix
3
3
  // =============================================================================
4
4
 
5
- * {
6
- @include box-sizing(border-box);
5
+ .clear-fix {
6
+ @extend %prelude-clearfix;
7
7
  }
@@ -1,6 +1,9 @@
1
1
  // =============================================================================
2
- // Base
2
+ // Clears
3
3
  // =============================================================================
4
4
 
5
+ .clear-left { clear: left; }
5
6
 
6
- @import "base/helpers";
7
+ .clear-right { clear: right; }
8
+
9
+ .clear-both { clear: both; }
@@ -0,0 +1,36 @@
1
+ // =============================================================================
2
+ // Display state utilities
3
+ // =============================================================================
4
+
5
+ // Hide for both screenreaders and browsers:
6
+ // css-discuss.incutio.com/wiki/Screenreader_Visibility
7
+ .is-hidden {
8
+ display: none !important;
9
+ visibility: hidden !important;
10
+ }
11
+
12
+ .is-displayed {
13
+ display: block !important;
14
+ visibility: visible !important;
15
+ }
16
+
17
+ // Hide visually and from screenreaders, but maintain layout
18
+ .is-invisible {
19
+ visibility: hidden !important;
20
+ }
21
+
22
+ .is-visible {
23
+ visibility: visible !important;
24
+ }
25
+
26
+ // Hide only visually, but have it available for screenreaders: h5bp.com/v
27
+ .is-visually-hidden {
28
+ position: absolute;
29
+ overflow: hidden;
30
+ clip: rect(0 0 0 0);
31
+ height: 1px;
32
+ width: 1px;
33
+ margin: -1px;
34
+ padding: 0;
35
+ border: 0;
36
+ }
@@ -0,0 +1,9 @@
1
+ // =============================================================================
2
+ // Floats
3
+ // =============================================================================
4
+
5
+ .float-left { float: left; }
6
+
7
+ .float-right { float: right }
8
+
9
+ .float-none { float: none; }
@@ -0,0 +1,11 @@
1
+ // =============================================================================
2
+ // Hidden text
3
+ // =============================================================================
4
+
5
+ // Hides text using the Kellum method
6
+ // http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
7
+ .hidden-text {
8
+ text-indent: 100%;
9
+ white-space: nowrap;
10
+ overflow: hidden;
11
+ }
@@ -0,0 +1,27 @@
1
+ // =============================================================================
2
+ // Margins
3
+ // =============================================================================
4
+
5
+ .push { margin: $base-spacing-unit !important; }
6
+ .push--top { margin-top: $base-spacing-unit !important; }
7
+ .push--right { margin-right: $base-spacing-unit !important; }
8
+ .push--bottom { margin-bottom: $base-spacing-unit !important; }
9
+ .push--left { margin-left: $base-spacing-unit !important; }
10
+ .push--ends { margin-top: $base-spacing-unit !important; margin-bottom: $base-spacing-unit !important; }
11
+ .push--sides { margin-right: $base-spacing-unit !important; margin-left: $base-spacing-unit !important; }
12
+
13
+ .push-half { margin: $half-spacing-unit !important; }
14
+ .push-half--top { margin-top: $half-spacing-unit !important; }
15
+ .push-half--right { margin-right: $half-spacing-unit !important; }
16
+ .push-half--bottom { margin-bottom:$half-spacing-unit !important; }
17
+ .push-half--left { margin-left: $half-spacing-unit !important; }
18
+ .push-half--ends { margin-top: $half-spacing-unit !important; margin-bottom:$half-spacing-unit !important; }
19
+ .push-half--sides { margin-right: $half-spacing-unit !important; margin-left: $half-spacing-unit !important; }
20
+
21
+ .flush { margin: 0 !important; }
22
+ .flush--top { margin-top: 0 !important; }
23
+ .flush--right { margin-right: 0 !important; }
24
+ .flush--bottom { margin-bottom:0 !important; }
25
+ .flush--left { margin-left: 0 !important; }
26
+ .flush--ends { margin-top: 0 !important; margin-bottom:0 !important; }
27
+ .flush--sides { margin-right: 0 !important; margin-left: 0 !important; }
@@ -0,0 +1,27 @@
1
+ // =============================================================================
2
+ // Paddings
3
+ // =============================================================================
4
+
5
+ .soft { padding: $base-spacing-unit !important; }
6
+ .soft--top { padding-top: $base-spacing-unit !important; }
7
+ .soft--right { padding-right: $base-spacing-unit !important; }
8
+ .soft--bottom { padding-bottom:$base-spacing-unit !important; }
9
+ .soft--left { padding-left: $base-spacing-unit !important; }
10
+ .soft--ends { padding-top: $base-spacing-unit !important; padding-bottom:$base-spacing-unit !important; }
11
+ .soft--sides { padding-right: $base-spacing-unit !important; padding-left: $base-spacing-unit !important; }
12
+
13
+ .soft-half { padding: $half-spacing-unit !important; }
14
+ .soft-half--top { padding-top: $half-spacing-unit !important; }
15
+ .soft-half--right { padding-right: $half-spacing-unit !important; }
16
+ .soft-half--bottom { padding-bottom:$half-spacing-unit !important; }
17
+ .soft-half--left { padding-left: $half-spacing-unit !important; }
18
+ .soft-half--ends { padding-top: $half-spacing-unit !important; padding-bottom:$half-spacing-unit !important; }
19
+ .soft-half--sides { padding-right: $half-spacing-unit !important; padding-left: $half-spacing-unit !important; }
20
+
21
+ .hard { padding: 0 !important; }
22
+ .hard--top { padding-top: 0 !important; }
23
+ .hard--right { padding-right: 0 !important; }
24
+ .hard--bottom { padding-bottom:0 !important; }
25
+ .hard--left { padding-left: 0 !important; }
26
+ .hard--ends { padding-top: 0 !important; padding-bottom:0 !important; }
27
+ .hard--sides { padding-right: 0 !important; padding-left: 0 !important; }
@@ -0,0 +1,7 @@
1
+ // =============================================================================
2
+ // Text alignment
3
+ // =============================================================================
4
+
5
+ .text--left { text-align: left; }
6
+ .text--center { text-align: center; }
7
+ .text--right { text-align: right; }
@@ -0,0 +1,9 @@
1
+ // =============================================================================
2
+ // Text utilities
3
+ // =============================================================================
4
+
5
+ // Ellipsis clips text that does not fit into its box
6
+ .ellipsis { @include ellipsis; }
7
+
8
+ // Uppercase text
9
+ .caps { text-transform: uppercase; }
data/test/index.html CHANGED
@@ -63,6 +63,95 @@
63
63
 
64
64
  <hr>
65
65
 
66
+ <!--
67
+ ==========================================================================
68
+ Grid system
69
+ ===========================================================================
70
+ -->
71
+
72
+
73
+ <section id="grid-system" class="push--top">
74
+ <h2>Grid system</h2>
75
+
76
+ <!--
77
+ Grid widths
78
+ ===========================================================================
79
+ -->
80
+
81
+ <article id="grid-widths" class="push--top">
82
+ <h3>Widths</h3>
83
+
84
+ <div class="grid push--bottom">
85
+ <div class="grid__item one-whole test test--grid">.one-whole</div>
86
+ </div>
87
+ <div class="grid push--bottom">
88
+ <div class="grid__item one-half test test--grid">.one-half</div><!--
89
+ --><div class="grid__item one-half test test--grid">.one-half</div>
90
+ </div>
91
+ <div class="grid push--bottom">
92
+ <div class="grid__item one-third test test--grid">.one-third</div><!--
93
+ --><div class="grid__item one-third test test--grid">.one-third</div><!--
94
+ --><div class="grid__item one-third test test--grid">.one-third</div>
95
+ </div>
96
+ <div class="grid push--bottom">
97
+ <div class="grid__item one-quarter test test--grid">.one-quarter</div><!--
98
+ --><div class="grid__item one-quarter test test--grid">.one-quarter</div><!--
99
+ --><div class="grid__item one-quarter test test--grid">.one-quarter</div><!--
100
+ --><div class="grid__item one-quarter test test--grid">.one-quarter</div>
101
+ </div>
102
+ <div class="grid push--bottom">
103
+ <div class="grid__item two-sixths test test--grid">.two-sixths</div><!--
104
+ --><div class="grid__item three-sixths test test--grid">.three-sixths</div><!--
105
+ --><div class="grid__item one-sixth test test--grid">.one-sixth</div>
106
+ </div>
107
+ </article>
108
+
109
+ <!--
110
+ Grid pushes
111
+ ===========================================================================
112
+ -->
113
+
114
+ <article id="grid-pushes" class="push--top">
115
+ <h3>Push</h3>
116
+
117
+ <div class="grid push--bottom">
118
+ <div class="grid__item one-quarter push--one-quarter test test--grid">.one-quarter.push-one-quarter</div>
119
+ </div>
120
+ <div class="grid push--bottom">
121
+ <div class="grid__item one-quarter push--two-quarters test test--grid">.one-quarter.push-two-quarters</div>
122
+ </div>
123
+ <div class="grid push--bottom">
124
+ <div class="grid__item one-quarter push--three-quarters test test--grid">.one-quarter.push-three-quarters</div>
125
+ </div>
126
+
127
+ </article>
128
+
129
+ <!--
130
+ Grid pulls
131
+ ===========================================================================
132
+ -->
133
+
134
+ <article id="grid-pulls" class="push--top">
135
+ <h3>Pull</h3>
136
+
137
+ <div class="grid">
138
+ <div class="grid__item one-whole push--one-whole">
139
+ <div class="grid push--bottom">
140
+ <div class="grid__item one-quarter pull--one-quarter test test--grid">.one-quarter.pull-one-quarter</div>
141
+ </div>
142
+ <div class="grid pull--bottom">
143
+ <div class="grid__item one-quarter pull--two-quarters test test--grid">.one-quarter.pull-two-quarters</div>
144
+ </div>
145
+ <div class="grid pull--bottom">
146
+ <div class="grid__item one-quarter pull--three-quarters test test--grid">.one-quarter.pull-three-quarters</div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+
151
+ </article>
152
+
153
+ <hr>
154
+
66
155
  <!--
67
156
  ==========================================================================
68
157
  Buttons
data/test/scss/style.scss CHANGED
@@ -28,6 +28,13 @@
28
28
  @include set-font-size(14px, 14px * 1.35);
29
29
  }
30
30
 
31
+ // =============================================================================
32
+ // Grid System
33
+ // =============================================================================
34
+
35
+ @include grid-widths(all);
36
+ @include grid-pushes(all);
37
+ @include grid-pulls(all);
31
38
 
32
39
  // =============================================================================
33
40
  // Test blocks
@@ -39,6 +46,11 @@
39
46
  border-radius: $default-border-radius;
40
47
  }
41
48
 
49
+ .test--grid {
50
+ text-align: center;
51
+ border: solid 1px #000;
52
+ }
53
+
42
54
 
43
55
  // =============================================================================
44
56
  // Buttons
metadata CHANGED
@@ -1,20 +1,18 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: prelude-framework
3
3
  version: !ruby/object:Gem::Version
4
- version: '0.8'
5
- prerelease:
4
+ version: 0.8.1
6
5
  platform: ruby
7
6
  authors:
8
7
  - Daniel Guillan
9
8
  autorequire:
10
9
  bindir: bin
11
10
  cert_chain: []
12
- date: 2013-08-23 00:00:00.000000000 Z
11
+ date: 2013-11-12 00:00:00.000000000 Z
13
12
  dependencies:
14
13
  - !ruby/object:Gem::Dependency
15
14
  name: sass
16
15
  requirement: !ruby/object:Gem::Requirement
17
- none: false
18
16
  requirements:
19
17
  - - ! '>='
20
18
  - !ruby/object:Gem::Version
@@ -22,7 +20,6 @@ dependencies:
22
20
  type: :runtime
23
21
  prerelease: false
24
22
  version_requirements: !ruby/object:Gem::Requirement
25
- none: false
26
23
  requirements:
27
24
  - - ! '>='
28
25
  - !ruby/object:Gem::Version
@@ -30,7 +27,6 @@ dependencies:
30
27
  - !ruby/object:Gem::Dependency
31
28
  name: compass
32
29
  requirement: !ruby/object:Gem::Requirement
33
- none: false
34
30
  requirements:
35
31
  - - ! '>='
36
32
  - !ruby/object:Gem::Version
@@ -38,7 +34,6 @@ dependencies:
38
34
  type: :runtime
39
35
  prerelease: false
40
36
  version_requirements: !ruby/object:Gem::Requirement
41
- none: false
42
37
  requirements:
43
38
  - - ! '>='
44
39
  - !ruby/object:Gem::Version
@@ -46,7 +41,6 @@ dependencies:
46
41
  - !ruby/object:Gem::Dependency
47
42
  name: rake
48
43
  requirement: !ruby/object:Gem::Requirement
49
- none: false
50
44
  requirements:
51
45
  - - ! '>='
52
46
  - !ruby/object:Gem::Version
@@ -54,7 +48,6 @@ dependencies:
54
48
  type: :runtime
55
49
  prerelease: false
56
50
  version_requirements: !ruby/object:Gem::Requirement
57
- none: false
58
51
  requirements:
59
52
  - - ! '>='
60
53
  - !ruby/object:Gem::Version
@@ -78,11 +71,11 @@ files:
78
71
  - scss/prelude.scss
79
72
  - scss/prelude/_abstractions.scss
80
73
  - scss/prelude/_all.scss
81
- - scss/prelude/_base.scss
82
74
  - scss/prelude/_core.scss
83
75
  - scss/prelude/_debug-mode.scss
84
76
  - scss/prelude/_defaults.scss
85
77
  - scss/prelude/_functions.scss
78
+ - scss/prelude/_helpers.scss
86
79
  - scss/prelude/_images.scss
87
80
  - scss/prelude/_mixins.scss
88
81
  - scss/prelude/_modules.scss
@@ -93,11 +86,18 @@ files:
93
86
  - scss/prelude/abstractions/_media.scss
94
87
  - scss/prelude/abstractions/_nav.scss
95
88
  - scss/prelude/abstractions/_split.scss
96
- - scss/prelude/base/_border-box.scss
97
- - scss/prelude/base/_helpers.scss
98
89
  - scss/prelude/functions/_contrasty.scss
99
90
  - scss/prelude/functions/_is-saturated.scss
100
91
  - scss/prelude/functions/_pixels-to-ems.scss
92
+ - scss/prelude/helpers/_clearfix.scss
93
+ - scss/prelude/helpers/_clears.scss
94
+ - scss/prelude/helpers/_display-utilities.scss
95
+ - scss/prelude/helpers/_floats.scss
96
+ - scss/prelude/helpers/_hidden-text.scss
97
+ - scss/prelude/helpers/_margins.scss
98
+ - scss/prelude/helpers/_paddings.scss
99
+ - scss/prelude/helpers/_text-alignment.scss
100
+ - scss/prelude/helpers/_text-utilities.scss
101
101
  - scss/prelude/images/_base.scss
102
102
  - scss/prelude/images/_cover-image.scss
103
103
  - scss/prelude/images/_thumbnails.scss
@@ -122,33 +122,26 @@ files:
122
122
  - test/scss/style.scss
123
123
  homepage: https://github.com/danielguillan/prelude
124
124
  licenses: []
125
+ metadata: {}
125
126
  post_install_message:
126
127
  rdoc_options: []
127
128
  require_paths:
128
129
  - lib
129
130
  required_ruby_version: !ruby/object:Gem::Requirement
130
- none: false
131
131
  requirements:
132
132
  - - ! '>='
133
133
  - !ruby/object:Gem::Version
134
134
  version: '0'
135
- segments:
136
- - 0
137
- hash: -4549275720819963838
138
135
  required_rubygems_version: !ruby/object:Gem::Requirement
139
- none: false
140
136
  requirements:
141
137
  - - ! '>='
142
138
  - !ruby/object:Gem::Version
143
139
  version: '0'
144
- segments:
145
- - 0
146
- hash: -4549275720819963838
147
140
  requirements: []
148
141
  rubyforge_project:
149
- rubygems_version: 1.8.24
142
+ rubygems_version: 2.1.6
150
143
  signing_key:
151
- specification_version: 3
144
+ specification_version: 4
152
145
  summary: A robust, extensible and opinionated OOCSS front-end framework built with
153
146
  SASS and Compass framework
154
147
  test_files:
@@ -1,167 +0,0 @@
1
- // =============================================================================
2
- // Helpers
3
- // A collection of helper classes
4
- //
5
- // Table of contents:
6
- // 1. Clearfix
7
- // 2. Floats
8
- // 3. Text utilities
9
- // 4. Display utilities
10
- // 5. Hidden text
11
- // 6. Add/remove margins
12
- // 7. Add/remove paddings
13
- //
14
- // =============================================================================
15
-
16
- // =============================================================================
17
- // 1. Clearfix
18
- // =============================================================================
19
-
20
- .cf { @extend %prelude-clearfix; }
21
-
22
- // =============================================================================
23
- // 2. Floats
24
- // =============================================================================
25
-
26
- // Float left
27
- .fl { float: left; }
28
-
29
- // Float right
30
- .fr { float: right }
31
-
32
- // Float none
33
- .fn { float: none; }
34
-
35
- // Clear left
36
- .cl { clear: left; }
37
-
38
- // Clear right
39
- .cr { clear: right; }
40
-
41
- // Clear both
42
- .cb { clear: both; }
43
-
44
- // =============================================================================
45
- // 3. Text utilities
46
- // =============================================================================
47
-
48
- // Ellipsis clips text that does not fit into its box
49
- .ellipsis { @include ellipsis; }
50
-
51
- // Uppercase text
52
- .caps { text-transform: uppercase; }
53
-
54
-
55
- // Text alignment
56
- // =============================================================================
57
-
58
- .text--left { text-align: left; }
59
- .text--center { text-align: center; }
60
- .text--right { text-align: right; }
61
-
62
-
63
- // =============================================================================
64
- // 4. Display state utilities
65
- // =============================================================================
66
-
67
- // Hide for both screenreaders and browsers:
68
- // css-discuss.incutio.com/wiki/Screenreader_Visibility
69
- .is-hidden {
70
- display: none !important;
71
- visibility: hidden !important;
72
- }
73
-
74
- .is-displayed {
75
- display: block !important;
76
- visibility: visible !important;
77
- }
78
-
79
- // Hide visually and from screenreaders, but maintain layout
80
- .is-invisible {
81
- visibility: hidden !important;
82
- }
83
-
84
- .is-visible {
85
- visibility: visible !important;
86
- }
87
-
88
- // Hide only visually, but have it available for screenreaders: h5bp.com/v
89
- .is-visually-hidden {
90
- position: absolute;
91
- overflow: hidden;
92
- clip: rect(0 0 0 0);
93
- height: 1px;
94
- width: 1px;
95
- margin: -1px;
96
- padding: 0;
97
- border: 0;
98
- }
99
-
100
- // =============================================================================
101
- // 5. Hidden text
102
- // =============================================================================
103
-
104
- // Hides text using the Kellum method
105
- // http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
106
- .ht {
107
- text-indent: 100%;
108
- white-space: nowrap;
109
- overflow: hidden;
110
- }
111
-
112
- // =============================================================================
113
- // 6. Add/remove margins
114
- // =============================================================================
115
-
116
- .push { margin: $base-spacing-unit !important; }
117
- .push--top { margin-top: $base-spacing-unit !important; }
118
- .push--right { margin-right: $base-spacing-unit !important; }
119
- .push--bottom { margin-bottom: $base-spacing-unit !important; }
120
- .push--left { margin-left: $base-spacing-unit !important; }
121
- .push--ends { margin-top: $base-spacing-unit !important; margin-bottom: $base-spacing-unit !important; }
122
- .push--sides { margin-right: $base-spacing-unit !important; margin-left: $base-spacing-unit !important; }
123
-
124
- .push-half { margin: $half-spacing-unit !important; }
125
- .push-half--top { margin-top: $half-spacing-unit !important; }
126
- .push-half--right { margin-right: $half-spacing-unit !important; }
127
- .push-half--bottom { margin-bottom:$half-spacing-unit !important; }
128
- .push-half--left { margin-left: $half-spacing-unit !important; }
129
- .push-half--ends { margin-top: $half-spacing-unit !important; margin-bottom:$half-spacing-unit !important; }
130
- .push-half--sides { margin-right: $half-spacing-unit !important; margin-left: $half-spacing-unit !important; }
131
-
132
- .flush { margin: 0 !important; }
133
- .flush--top { margin-top: 0 !important; }
134
- .flush--right { margin-right: 0 !important; }
135
- .flush--bottom { margin-bottom:0 !important; }
136
- .flush--left { margin-left: 0 !important; }
137
- .flush--ends { margin-top: 0 !important; margin-bottom:0 !important; }
138
- .flush--sides { margin-right: 0 !important; margin-left: 0 !important; }
139
-
140
-
141
- // =============================================================================
142
- // 7. Add/remove paddings
143
- // =============================================================================
144
-
145
- .soft { padding: $base-spacing-unit !important; }
146
- .soft--top { padding-top: $base-spacing-unit !important; }
147
- .soft--right { padding-right: $base-spacing-unit !important; }
148
- .soft--bottom { padding-bottom:$base-spacing-unit !important; }
149
- .soft--left { padding-left: $base-spacing-unit !important; }
150
- .soft--ends { padding-top: $base-spacing-unit !important; padding-bottom:$base-spacing-unit !important; }
151
- .soft--sides { padding-right: $base-spacing-unit !important; padding-left: $base-spacing-unit !important; }
152
-
153
- .soft-half { padding: $half-spacing-unit !important; }
154
- .soft-half--top { padding-top: $half-spacing-unit !important; }
155
- .soft-half--right { padding-right: $half-spacing-unit !important; }
156
- .soft-half--bottom { padding-bottom:$half-spacing-unit !important; }
157
- .soft-half--left { padding-left: $half-spacing-unit !important; }
158
- .soft-half--ends { padding-top: $half-spacing-unit !important; padding-bottom:$half-spacing-unit !important; }
159
- .soft-half--sides { padding-right: $half-spacing-unit !important; padding-left: $half-spacing-unit !important; }
160
-
161
- .hard { padding: 0 !important; }
162
- .hard--top { padding-top: 0 !important; }
163
- .hard--right { padding-right: 0 !important; }
164
- .hard--bottom { padding-bottom:0 !important; }
165
- .hard--left { padding-left: 0 !important; }
166
- .hard--ends { padding-top: 0 !important; padding-bottom:0 !important; }
167
- .hard--sides { padding-right: 0 !important; padding-left: 0 !important; }