spuit 0.0.10 → 0.0.11

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.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 7eb17f63e541ad825753d1e20d86f7acbde2385d
4
- data.tar.gz: 6d1dddd52987672e160f283d2b3e6629f0c614f1
3
+ metadata.gz: 229683c0ee9edf86e361b37bab21e451b458c3a6
4
+ data.tar.gz: cdcfc244b9e34301afb64cdbb6628f104cb5f779
5
5
  SHA512:
6
- metadata.gz: 2c056da21477409e3d3593c77d84263f2dcea6349d3024bd2bb0475ed6d2bd0eb6f53f5c54241ae9338c36a6314925d9e0b5b109e3960d3bb84fced9b517e180
7
- data.tar.gz: 0ddf75a69038f3359aa3fc4a7109f9c6590e5363ac23c364a67527eb94ac13ba43d4875bdc7ef3d09f262bf7b36eca760914abb6aef660e0cca03cdb0e408b04
6
+ metadata.gz: ddbd4e7bfb205cda2c96ee42fd2bc44be7813f2424da57f410a78a7e66d518745619c57eefc2ffd3b2a971be6e435db039e5a03214ae3321f5885629dcffb50c
7
+ data.tar.gz: 67cc6726bb352048b3d67dad000fc5536a33862db210497631a1c18b1d2679ab9222c516d8cc5d740a490de153bf3098207202c196b2d41e7d7849efe3558520
data/lib/spuit/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module Spuit
2
- VERSION = "0.0.10"
2
+ VERSION = "0.0.11"
3
3
  end
data/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "spuit",
3
- "version": "0.0.10",
3
+ "version": "0.0.11",
4
4
  "description": "JS + Sass Mixin Library",
5
5
  "main": "spuit.scss",
6
6
  "scripts": {
data/spuit.scss CHANGED
@@ -28,7 +28,6 @@
28
28
  @import 'scss/includes/stickey-footer';
29
29
  @import 'scss/includes/spuit-utils';
30
30
  @import 'scss/includes/normalize';
31
- @import 'scss/includes/grid';
32
31
 
33
32
  // shortcut mixins
34
33
  @import 'scss/shortcuts/absolute';
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: spuit
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.10
4
+ version: 0.0.11
5
5
  platform: ruby
6
6
  authors:
7
7
  - is8r
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2018-02-11 00:00:00.000000000 Z
11
+ date: 2018-04-06 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: thor
@@ -94,7 +94,6 @@ files:
94
94
  - scss/elements/_select.scss
95
95
  - scss/elements/_table.sass
96
96
  - scss/includes/_animations.scss
97
- - scss/includes/_grid.scss
98
97
  - scss/includes/_hiddens.scss
99
98
  - scss/includes/_normalize.scss
100
99
  - scss/includes/_spacers.scss
@@ -1,345 +0,0 @@
1
- /*
2
- from: https://github.com/twbs/bootstrap/blob/v4-dev/
3
- */
4
-
5
- // @include include-grid
6
- @mixin include-grid {
7
- @at-root {
8
- $enable-grid-classes: true !default;
9
- $grid-columns: 12 !default;
10
- $grid-gutter-width-base: 30px !default;
11
- $grid-gutter-widths: (
12
- xs: $grid-gutter-width-base,
13
- sm: $grid-gutter-width-base,
14
- md: $grid-gutter-width-base,
15
- lg: $grid-gutter-width-base,
16
- xl: $grid-gutter-width-base
17
- ) !default;
18
- $grid-breakpoints: (
19
- xs: 0,
20
- sm: 576px,
21
- md: 768px,
22
- lg: 992px,
23
- xl: 1200px
24
- ) !default;
25
- $container-max-widths: (
26
- sm: 540px,
27
- md: 720px,
28
- lg: 960px,
29
- xl: 1140px
30
- ) !default;
31
-
32
- // Breakpoint viewport sizes and media queries.
33
- //
34
- // Breakpoints are defined as a map of (name: minimum width), order from small to large:
35
- //
36
- // (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
37
- //
38
- // The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
39
-
40
- // Name of the next breakpoint, or null for the last breakpoint.
41
- //
42
- // >> breakpoint-next(sm)
43
- // md
44
- // >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
45
- // md
46
- // >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
47
- // md
48
- @function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
49
- $n: index($breakpoint-names, $name);
50
- @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
51
- }
52
-
53
- // Minimum breakpoint width. Null for the smallest (first) breakpoint.
54
- //
55
- // >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
56
- // 576px
57
- @function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
58
- $min: map-get($breakpoints, $name);
59
- @return if($min != 0, $min, null);
60
- }
61
-
62
- // Maximum breakpoint width. Null for the largest (last) breakpoint.
63
- // The maximum value is calculated as the minimum of the next one less 0.1.
64
- //
65
- // >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
66
- // 767px
67
- @function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
68
- $next: breakpoint-next($name, $breakpoints);
69
- @return if($next, breakpoint-min($next, $breakpoints) - 1px, null);
70
- }
71
-
72
- // Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
73
- // Useful for making responsive utilities.
74
- //
75
- // >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
76
- // "" (Returns a blank string)
77
- // >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
78
- // "-sm"
79
- @function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
80
- @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
81
- }
82
-
83
-
84
- // Framework grid generation
85
- //
86
- // Used only by Bootstrap to generate the correct number of grid classes given
87
- // any value of `$grid-columns`.
88
-
89
- @mixin make-grid-columns($columns: $grid-columns, $gutters: $grid-gutter-widths, $breakpoints: $grid-breakpoints) {
90
- // Common properties for all breakpoints
91
- %grid-column {
92
- position: relative;
93
- width: 100%;
94
- min-height: 1px; // Prevent columns from collapsing when empty
95
-
96
- @include make-gutters($gutters);
97
- }
98
-
99
- @each $breakpoint in map-keys($breakpoints) {
100
- $infix: breakpoint-infix($breakpoint, $breakpoints);
101
-
102
- // Allow columns to stretch full width below their breakpoints
103
- @for $i from 1 through $columns {
104
- .col#{$infix}-#{$i} {
105
- @extend %grid-column;
106
- }
107
- }
108
- .col#{$infix} {
109
- @extend %grid-column;
110
- }
111
-
112
- @include media-breakpoint-up($breakpoint, $breakpoints) {
113
- // Provide basic `.col-{bp}` classes for equal-width flexbox columns
114
- .col#{$infix} {
115
- flex-basis: 0;
116
- flex-grow: 1;
117
- max-width: 100%;
118
- }
119
- .col#{$infix}-auto {
120
- flex: 0 0 auto;
121
- width: auto;
122
- }
123
-
124
- @for $i from 1 through $columns {
125
- .col#{$infix}-#{$i} {
126
- @include make-col($i, $columns);
127
- }
128
- }
129
-
130
- @each $modifier in (pull, push) {
131
- @for $i from 0 through $columns {
132
- .#{$modifier}#{$infix}-#{$i} {
133
- @include make-col-modifier($modifier, $i, $columns)
134
- }
135
- }
136
- }
137
-
138
- // `$columns - 1` because offsetting by the width of an entire row isn't possible
139
- @for $i from 0 through ($columns - 1) {
140
- @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-xs-0
141
- .offset#{$infix}-#{$i} {
142
- @include make-col-modifier(offset, $i, $columns)
143
- }
144
- }
145
- }
146
- }
147
- }
148
- }
149
-
150
- // Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
151
- // Makes the @content apply to the given breakpoint and wider.
152
- @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
153
- $min: breakpoint-min($name, $breakpoints);
154
- @if $min {
155
- @media (min-width: $min) {
156
- @content;
157
- }
158
- } @else {
159
- @content;
160
- }
161
- }
162
-
163
- // Media of at most the maximum breakpoint width. No query for the largest breakpoint.
164
- // Makes the @content apply to the given breakpoint and narrower.
165
- @mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
166
- $max: breakpoint-max($name, $breakpoints);
167
- @if $max {
168
- @media (max-width: $max) {
169
- @content;
170
- }
171
- } @else {
172
- @content;
173
- }
174
- }
175
-
176
- // Media that spans multiple breakpoint widths.
177
- // Makes the @content apply between the min and max breakpoints
178
- @mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
179
- @include media-breakpoint-up($lower, $breakpoints) {
180
- @include media-breakpoint-down($upper, $breakpoints) {
181
- @content;
182
- }
183
- }
184
- }
185
-
186
- /// Grid system
187
- //
188
- // Generate semantic grid columns with these mixins.
189
-
190
- @mixin make-container($gutters: $grid-gutter-widths) {
191
- position: relative;
192
- margin-right: auto;
193
- margin-left: auto;
194
- box-sizing: border-box;
195
-
196
- @each $breakpoint in map-keys($gutters) {
197
- @include media-breakpoint-up($breakpoint) {
198
- $gutter: map-get($gutters, $breakpoint);
199
- padding-right: ($gutter / 2);
200
- padding-left: ($gutter / 2);
201
- }
202
- }
203
- }
204
-
205
-
206
- // For each breakpoint, define the maximum width of the container in a media query
207
- @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
208
- @each $breakpoint, $container-max-width in $max-widths {
209
- @include media-breakpoint-up($breakpoint, $breakpoints) {
210
- width: $container-max-width;
211
- max-width: 100%;
212
- box-sizing: border-box;
213
- }
214
- }
215
- }
216
-
217
- @mixin make-gutters($gutters: $grid-gutter-widths) {
218
- @each $breakpoint in map-keys($gutters) {
219
- @include media-breakpoint-up($breakpoint) {
220
- $gutter: map-get($gutters, $breakpoint);
221
- padding-right: ($gutter / 2);
222
- padding-left: ($gutter / 2);
223
- box-sizing: border-box;
224
- }
225
- }
226
- }
227
-
228
- @mixin make-row($gutters: $grid-gutter-widths) {
229
- display: flex;
230
- flex-wrap: wrap;
231
- box-sizing: border-box;
232
-
233
- @each $breakpoint in map-keys($gutters) {
234
- @include media-breakpoint-up($breakpoint) {
235
- $gutter: map-get($gutters, $breakpoint);
236
- margin-right: ($gutter / -2);
237
- margin-left: ($gutter / -2);
238
- }
239
- }
240
- }
241
-
242
- @mixin make-col-ready($gutters: $grid-gutter-widths) {
243
- position: relative;
244
- // Prevent columns from becoming too narrow when at smaller grid tiers by
245
- // always setting `width: 100%;`. This works because we use `flex` values
246
- // later on to override this initial width.
247
- width: 100%;
248
- min-height: 1px; // Prevent collapsing
249
-
250
- @each $breakpoint in map-keys($gutters) {
251
- @include media-breakpoint-up($breakpoint) {
252
- $gutter: map-get($gutters, $breakpoint);
253
- padding-right: ($gutter / 2);
254
- padding-left: ($gutter / 2);
255
- }
256
- }
257
- }
258
-
259
- @mixin make-col($size, $columns: $grid-columns) {
260
- flex: 0 0 percentage($size / $columns);
261
- // width: percentage($size / $columns);
262
- // Add a `max-width` to ensure content within each column does not blow out
263
- // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
264
- // do not appear to require this.
265
- max-width: percentage($size / $columns);
266
- }
267
-
268
- @mixin make-col-offset($size, $columns: $grid-columns) {
269
- margin-left: percentage($size / $columns);
270
- }
271
-
272
- @mixin make-col-push($size, $columns: $grid-columns) {
273
- left: if($size > 0, percentage($size / $columns), auto);
274
- }
275
-
276
- @mixin make-col-pull($size, $columns: $grid-columns) {
277
- right: if($size > 0, percentage($size / $columns), auto);
278
- }
279
-
280
- @mixin make-col-modifier($type, $size, $columns) {
281
- // Work around the lack of dynamic mixin @include support (https://github.com/sass/sass/issues/626)
282
- @if $type == push {
283
- @include make-col-push($size, $columns);
284
- } @else if $type == pull {
285
- @include make-col-pull($size, $columns);
286
- } @else if $type == offset {
287
- @include make-col-offset($size, $columns);
288
- }
289
- }
290
-
291
-
292
- // Container widths
293
- //
294
- // Set the container width, and override it for fixed navbars in media queries.
295
-
296
- @if $enable-grid-classes {
297
- .container {
298
- @include make-container();
299
- @include make-container-max-widths();
300
- }
301
- }
302
-
303
- // Fluid container
304
- //
305
- // Utilizes the mixin meant for fixed width containers, but without any defined
306
- // width for fluid, full width layouts.
307
-
308
- @if $enable-grid-classes {
309
- .container-fluid {
310
- @include make-container();
311
- }
312
- }
313
-
314
- // Row
315
- //
316
- // Rows contain and clear the floats of your columns.
317
-
318
- @if $enable-grid-classes {
319
- .row {
320
- @include make-row();
321
- }
322
-
323
- // Remove the negative margin from default .row, then the horizontal padding
324
- // from all immediate children columns (to prevent runaway style inheritance).
325
- .no-gutters {
326
- margin-right: 0;
327
- margin-left: 0;
328
-
329
- > .col,
330
- > [class*="col-"] {
331
- padding-right: 0;
332
- padding-left: 0;
333
- }
334
- }
335
- }
336
-
337
- // Columns
338
- //
339
- // Common styles for small and large grid columns
340
-
341
- @if $enable-grid-classes {
342
- @include make-grid-columns();
343
- }
344
- }
345
- }