Skip to content

Commit 5deabf8

Browse files
author
Cory Simmons
committed
Remove $output
Not doing a major bump because this feature was broken anyway.
1 parent 7158217 commit 5deabf8

File tree

3 files changed

+169
-282
lines changed

3 files changed

+169
-282
lines changed

‎README.md‎

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -246,33 +246,6 @@ section
246246
edit(green)
247247
```
248248

249-
Lost even lets you create your own custom CSS grids in just a few lines of code with the `$output` parameter which accepts `normal` (compiles all `column` styles), `init` (only initial styles), and `bare` (just the `width` or `height`).
250-
251-
<h6 align="right">SCSS</h6>
252-
```scss
253-
[class*="col-"] {
254-
@include block($output: init);
255-
}
256-
257-
@for $i from 1 through 12 {
258-
.col-#{$i} {
259-
@include block(#{$i}/12, $output: bare);
260-
}
261-
}
262-
```
263-
264-
<h6 align="right">Stylus</h6>
265-
```stylus
266-
[class*="col-"]
267-
block($output: init)
268-
269-
for $i in 1..12
270-
.col-{$i}
271-
block(s('%s/12', $i), $output: bare)
272-
```
273-
274-
> **Note** We're aware these don't produce the cleanest CSS classes or work very well with media queries and are currently working on a solution. Please [help](https://github.com/corysimmons/lost/issues/46) if you can.
275-
276249
Once you've mastered the basic horizontal grid system (it shouldn't take long), you can start to make vertical grids that have the same vertical gutters as your horizontal grids. Just pass `$dir: column` to your `block()` mixin. The blocks will stretch to fill their container's height, so if you'd like to see them take up the full height of the page, set `height: 100%` on your container.
277250

278251
No other grid system in the world supports vertical grids.

‎scss/lost.scss‎

Lines changed: 106 additions & 159 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Lost Grid v4.0.2 - https://github.com/corysimmons/lost
1+
// Lost Grid v4.1.0 - https://github.com/corysimmons/lost
22

33
$gutter: 30px !default;
44
$rtl: false !default;
@@ -46,24 +46,19 @@ $rtl: false !default;
4646
///
4747
/// @param {unit} $max-size [980px] - A max-width to assign. Can be any unit.
4848
/// @param {unit} $pad [0] - Padding on the left and right of the element. Can be any unit.
49-
/// @param {string} $output [normal] - Determines what type of code to output. Accepts normal (outputs all code), init (only the code to initialize), and bare (just the max-width and padding). Useful for making classes like .center-large, .center-medium, .center-small.
5049
///
5150
/// @example
5251
/// section {
5352
/// @include center(900px);
5453
/// }
5554

56-
@mixin center($max-size: 980px, $pad: 0, $output: normal) {
57-
@if ($output == normal) or ($output == init) {
58-
@include cf;
59-
margin-left: auto;
60-
margin-right: auto;
61-
}
62-
@if ($output == normal) or ($output == bare) {
63-
max-width: $max-size;
64-
padding-left: $pad;
65-
padding-right: $pad;
66-
}
55+
@mixin center($max-size: 980px, $pad: 0) {
56+
@include cf;
57+
max-width: $max-size;
58+
padding-left: $pad;
59+
padding-right: $pad;
60+
margin-left: auto;
61+
margin-right: auto;
6762
}
6863

6964

@@ -245,187 +240,144 @@ $rtl: false !default;
245240
/// @param {string} $dir [row] - The direction of the grid. Can be row (horizontal grid), column (vertical grid), or both (waffle grid).
246241
/// @param {number} $cycle [1] - Lost works by assigning a margin-right to all elements except the last in the row. It does this by default by using the denominator of the fraction you pick. To override this default use this param. e.g. block('2/4', $cycle: 2)
247242
/// @param {number} $gut [$gutter] - The margin on the side of the element used to create a gutter. Typically this is left alone and the global $gutter will be used, but you can override it here if you want certain elements to have a particularly large or small gutter (pass 0 for no gutter at all).
248-
/// @param {string} $output [normal] - Determines what type of code to output. Accepts normal (all styles for a block), init (the initial styles of any block), or bare (just the essentials of the block). Useful for creating CSS grid classes like .col-x with Lost.
249243
/// @param {boolean} $masonry-friendly [false] - Dictates whether this particular group of elements will work well with JS masonry plugins. This will assign a margin on each side of the element and you will need to wrap this group of elements in a masonry-row().
250244
///
251245
/// @example
252246
/// figure {
253247
/// @include block('1/3');
254248
/// }
255249

256-
@mixin block($fraction: '1/1', $dir: row, $cycle: nth(sl-explode($fraction, '/'), 2), $gut: $gutter, $masonry-friendly: false, $output: normal) {
250+
@mixin block($fraction: '1/1', $dir: row, $cycle: nth(sl-explode($fraction, '/'), 2), $gut: $gutter, $masonry-friendly: false) {
257251
@if ($dir == row) {
258-
@if ($output == normal) or ($output == init) {
259-
float: left;
260-
}
261252
@if $masonry-friendly {
262-
@if ($output == normal) or ($output == init) {
263-
margin-left: ($gut / 2);
264-
margin-right: ($gut / 2);
265-
&:nth-child(#{$cycle}n) {
266-
clear: none;
267-
}
268-
&:nth-child(#{$cycle}n + 1) {
269-
@if $rtl {
270-
clear: right;
271-
} @else {
272-
clear: left;
273-
}
274-
}
275-
}
276-
@if ($output == normal) or ($output == bare) {
277-
@if ($gut == 0) {
278-
width: calc(99.999999% * #{$fraction});
279-
} @else {
280-
@if $masonry-friendly {
281-
width: calc(99.99% * #{$fraction} - #{$gut});
282-
} @else {
283-
width: calc(99.99% * #{$fraction} - (#{$gut} - #{$gut} * #{$fraction}));
284-
}
285-
}
253+
margin-left: ($gut / 2);
254+
margin-right: ($gut / 2);
255+
&:nth-child(#{$cycle}n) {
256+
clear: none;
286257
}
287-
} @else {
288-
@if $rtl {
289-
@if ($output == normal) or ($output == init) {
290-
margin-left: $gut;
291-
}
292-
} @else {
293-
@if ($output == normal) or ($output == init) {
294-
float: left;
295-
margin-right: $gut;
296-
}
297-
}
298-
@if ($output == normal) or ($output == bare) {
299-
@if ($gut == 0) {
300-
width: calc(99.999999% * #{$fraction});
258+
&:nth-child(#{$cycle}n + 1) {
259+
@if $rtl {
260+
clear: right;
301261
} @else {
302-
@if $masonry-friendly {
303-
width: calc(99.99% * #{$fraction} - #{$gut});
304-
} @else {
305-
width: calc(99.99% * #{$fraction} - (#{$gut} - #{$gut} * #{$fraction}));
306-
}
307-
}
308-
}
309-
@if $rtl {
310-
@if ($output == normal) or ($output == init) {
311-
&:nth-child(n) {
312-
margin-left: $gut;
313-
float: right;
314-
clear: none;
315-
}
316-
&:last-child {
317-
margin-left: 0;
318-
}
319-
}
320-
@if ($output == normal) or ($output == bare) {
321-
&:nth-child(#{$cycle}n) {
322-
margin-left: 0;
323-
float: left;
324-
}
325-
&:nth-child(#{$cycle}n + 1) {
326-
clear: right;
327-
}
328-
}
329-
} @else {
330-
@if ($output == normal) or ($output == init) {
331-
&:nth-child(n) {
332-
margin-right: $gut;
333-
float: left;
334-
clear: none;
335-
}
336-
&:last-child {
337-
margin-right: 0;
338-
}
339-
}
340-
@if ($output == normal) or ($output == bare) {
341-
&:nth-child(#{$cycle}n) {
342-
margin-right: 0;
343-
float: right;
344-
}
345-
&:nth-child(#{$cycle}n + 1) {
346-
clear: left;
347-
}
262+
clear: left;
348263
}
349264
}
350-
}
351-
} @else if ($dir == column) {
352-
@if ($output == normal) or ($output == bare) {
353265
@if ($gut == 0) {
354-
height: calc(99.999999% * #{$fraction});
266+
width: calc(99.999999% * #{$fraction});
355267
} @else {
356268
@if $masonry-friendly {
357-
height: calc(99.99% * #{$fraction} - #{$gut});
269+
width: calc(99.99% * #{$fraction} - #{$gut});
358270
} @else {
359-
height: calc(99.99% * #{$fraction} - (#{$gut} - #{$gut} * #{$fraction}));
271+
width: calc(99.99% * #{$fraction} - (#{$gut} - #{$gut} * #{$fraction}));
360272
}
361273
}
362-
}
363-
@if ($output == normal) or ($output == init) {
364-
margin-bottom: $gut;
365-
&:last-child {
366-
margin-bottom: 0;
274+
} @else {
275+
@if $rtl {
276+
margin-left: $gut;
277+
} @else {
278+
margin-right: $gut;
367279
}
368-
}
369-
} @else {
370-
@if ($output == normal) or ($output == init) {
371-
float: left;
372-
margin-right: $gut;
373-
}
374-
@if ($output == normal) or ($output == bare) {
375280
@if ($gut == 0) {
376281
width: calc(99.999999% * #{$fraction});
377-
height: calc(99.999999% * #{$fraction});
378282
} @else {
379283
@if $masonry-friendly {
380284
width: calc(99.99% * #{$fraction} - #{$gut});
381-
height: calc(99.99% * #{$fraction} - #{$gut});
382285
} @else {
383286
width: calc(99.99% * #{$fraction} - (#{$gut} - #{$gut} * #{$fraction}));
384-
height: calc(99.99% * #{$fraction} - (#{$gut} - #{$gut} * #{$fraction}));
385287
}
386288
}
387-
}
388-
@if $rtl {
389-
@if ($output == normal) or ($output == init) {
289+
@if $rtl {
390290
&:nth-child(n) {
391291
margin-left: $gut;
292+
float: right;
392293
clear: none;
393294
}
394-
}
395-
@if ($output == normal) or ($output == bare) {
396-
&:nth-child(#{$cycle}n), &:last-child {
295+
&:last-child {
296+
margin-left: 0;
297+
}
298+
&:nth-child(#{$cycle}n) {
397299
margin-left: 0;
300+
float: left;
398301
}
399302
&:nth-child(#{$cycle}n + 1) {
400303
clear: right;
401304
}
402-
}
403-
} @else {
404-
@if ($output == normal) or ($output == init) {
305+
} @else {
405306
&:nth-child(n) {
406307
margin-right: $gut;
308+
float: left;
407309
clear: none;
408310
}
409-
}
410-
@if ($output == normal) or ($output == bare) {
411-
&:nth-child(#{$cycle}n), &:last-child {
311+
&:last-child {
412312
margin-right: 0;
413313
}
314+
&:nth-child(#{$cycle}n) {
315+
margin-right: 0;
316+
float: right;
317+
}
414318
&:nth-child(#{$cycle}n + 1) {
415319
clear: left;
416320
}
417321
}
418322
}
419-
@if ($output == normal) or ($output == init) {
420-
margin-bottom: $gut;
421-
&:last-child {
422-
margin-bottom: 0;
323+
} @else if ($dir == column) {
324+
@if ($gut == 0) {
325+
height: calc(99.999999% * #{$fraction});
326+
} @else {
327+
@if $masonry-friendly {
328+
height: calc(99.99% * #{$fraction} - #{$gut});
329+
} @else {
330+
height: calc(99.99% * #{$fraction} - (#{$gut} - #{$gut} * #{$fraction}));
331+
}
332+
}
333+
margin-bottom: $gut;
334+
&:last-child {
335+
margin-bottom: 0;
336+
}
337+
} @else {
338+
float: left;
339+
margin-right: $gut;
340+
@if ($gut == 0) {
341+
width: calc(99.999999% * #{$fraction});
342+
height: calc(99.999999% * #{$fraction});
343+
} @else {
344+
@if $masonry-friendly {
345+
width: calc(99.99% * #{$fraction} - #{$gut});
346+
height: calc(99.99% * #{$fraction} - #{$gut});
347+
} @else {
348+
width: calc(99.99% * #{$fraction} - (#{$gut} - #{$gut} * #{$fraction}));
349+
height: calc(99.99% * #{$fraction} - (#{$gut} - #{$gut} * #{$fraction}));
423350
}
424351
}
425-
@if ($output == normal) or ($output == bare) {
426-
&:nth-last-child(-n + #{$cycle}) {
427-
margin-bottom: 0;
352+
@if $rtl {
353+
&:nth-child(n) {
354+
margin-left: $gut;
355+
clear: none;
356+
}
357+
&:nth-child(#{$cycle}n), &:last-child {
358+
margin-left: 0;
359+
}
360+
&:nth-child(#{$cycle}n + 1) {
361+
clear: right;
362+
}
363+
} @else {
364+
&:nth-child(n) {
365+
margin-right: $gut;
366+
clear: none;
428367
}
368+
&:nth-child(#{$cycle}n), &:last-child {
369+
margin-right: 0;
370+
}
371+
&:nth-child(#{$cycle}n + 1) {
372+
clear: left;
373+
}
374+
}
375+
margin-bottom: $gut;
376+
&:last-child {
377+
margin-bottom: 0;
378+
}
379+
&:nth-last-child(-n + #{$cycle}) {
380+
margin-bottom: 0;
429381
}
430382
}
431383
}
@@ -543,7 +495,6 @@ $rtl: false !default;
543495
/// @param {string} $fraction ['1/1'] - Fraction of the container to be shifted. Must be a string.
544496
/// @param {string} $dir [row] - Direction the grid is going. Should match the block() it's being used on.
545497
/// @param {number} $gut [$gutter] - Adjust the size of the gutter for this movement. Should match the block's $gut.
546-
/// @param {string} $output [normal] - Determines the type of output to produce. Accepts 3 options, normal (all the code), init (just the initialization code), and bare (just the offset).
547498
///
548499
/// @example
549500
/// figure {
@@ -556,23 +507,19 @@ $rtl: false !default;
556507
/// }
557508
/// }
558509

559-
@mixin move($fraction: '1/1', $dir: row, $gut: $gutter, $output: normal) {
560-
@if ($output == normal) or ($output == init) {
561-
position: relative;
562-
}
563-
@if ($output == normal) or ($output == bare) {
564-
@if ($dir == row) {
565-
@if ($gut == 0) {
566-
left: calc(99.999999% * #{$fraction});
567-
} @else {
568-
left: calc(99.99% * #{$fraction} - (#{$gut} - #{$gut} * #{$fraction}) + #{$gut});
569-
}
510+
@mixin move($fraction: '1/1', $dir: row, $gut: $gutter) {
511+
position: relative;
512+
@if ($dir == row) {
513+
@if ($gut == 0) {
514+
left: calc(99.999999% * #{$fraction});
570515
} @else {
571-
@if ($gut == 0) {
572-
top: calc(99.999999% * #{$fraction});
573-
} @else {
574-
top: calc(99.99% * #{$fraction} - (#{$gut} - #{$gut} * #{$fraction}) + #{$gut});
575-
}
516+
left: calc(99.99% * #{$fraction} - (#{$gut} - #{$gut} * #{$fraction}) + #{$gut});
517+
}
518+
} @else {
519+
@if ($gut == 0) {
520+
top: calc(99.999999% * #{$fraction});
521+
} @else {
522+
top: calc(99.99% * #{$fraction} - (#{$gut} - #{$gut} * #{$fraction}) + #{$gut});
576523
}
577524
}
578525
}

0 commit comments

Comments
 (0)