diff --git a/_column-setter.scss b/_column-setter.scss index 2e8d2e9..086cc81 100644 --- a/_column-setter.scss +++ b/_column-setter.scss @@ -32,22 +32,22 @@ @function wrong-type($type, $arg2:null, $arg3:null) { @if $arg2 and $arg3 { - @return "'#{$arg2}' and '#{$arg3}' are not #{$type}s" + @return "'#{$arg2}' and '#{$arg3}' are not #{$type}s"; } @if not $arg3 { - @return "'#{$arg2}' is not a #{$type}" + @return "'#{$arg2}' is not a #{$type}"; } } @function missing($number) { @if $number < 2 { - @return "an argument is missing. " + @return "an argument is missing. "; } @if $number >= 2 { - @return "arguments are missing. " + @return "arguments are missing. "; } } @function optional($number,$current,$correct) { - @return "the optional #{$number} argument (currently '#{$current}') will only accept a value of '#{$correct}'. " + @return "the optional #{$number} argument (currently '#{$current}') will only accept a value of '#{$correct}'. "; } // ---------------------------------------- @@ -67,7 +67,7 @@ // 40em @function bp-attribute($bp-name, $bp-attribute) { - @return map-get(map-get($breakpoints, $bp-name), $bp-attribute) + @return map-get(map-get($breakpoints, $bp-name), $bp-attribute); } // ---------------------------------------- @@ -78,16 +78,16 @@ @function bp-validator() { @if type-of($mar) != number or unitless($mar) == false { - @warn "Here is the bp-validator $mar warning." + @warn "Here is the bp-validator $mar warning."; } @if type-of($col) != number or unitless($col) == false { - @warn "Here is the bp-validator $col warning." + @warn "Here is the bp-validator $col warning."; } @if type-of($gut) != number or unitless($gut) == false { - @warn "Here is the bp-validator $gut warning." + @warn "Here is the bp-validator $gut warning."; } @if type-of($pad) != number or unitless($pad) == false { - @warn "Here is the bp-validator $pad warning." + @warn "Here is the bp-validator $pad warning."; } @for $i from 1 through length($breakpoints) { @if type-of(map-get(map-get($breakpoints, (nth(map-keys($breakpoints), $i))), cols)) != number or unitless(map-get(map-get($breakpoints, (nth(map-keys($breakpoints), $i))), cols)) == false { @@ -112,8 +112,8 @@ // // 538 -@function width($width) { - @return (($col * $width) + ($gut * ($width - 1))) +@function fluidWidth($width) { + @return (($col * $width) + ($gut * ($width - 1))); } // ---------------------------------------- @@ -134,60 +134,160 @@ $colspan-lesson: "A 'colspan' function call must include the unitless numeric column widths of both the target and its container, e.g. 'colspan(4,8)'. The target width can also be specified as 'p' (for $pad width) or 'g' (for $gut width)."; -@function colspan($target:null,$container:null) { - @if $target - and $container { - @if $target == "m" - and (type-of($container) == "number" and unitless($container) == true) { - @return percentage($mar / (width($container) + ($mar * 2))) - } - @if $target == "p" - and (type-of($container) == "number" and unitless($container) == true) { - @return percentage($pad / width($container)) - } - @if $target == "g" - and (type-of($container) == "number" and unitless($container) == true) { - @return percentage($gut / width($container)) - } - @if (type-of($target) != "number" or unitless($target) == false) - and (type-of($container) != "number" or unitless($container) == false) - and $target != "m" - and $target != "p" - and $target != "g" { - @warn invalid("colspan",$target,$container) + wrong-type("unitless number",$target,$container) + ". " + $colspan-lesson; - @return false; - } - @if (type-of($target) != "number" or unitless($target) == false) - and (type-of($container) == "number" and unitless($container) == true) { - @warn invalid("colspan",$target,$container) + wrong-type("unitless number",$target) + ". " + $colspan-lesson; - @return false; - } - @if ((type-of($target) == "number" and unitless($target) == true) and (type-of($container) != "number" or unitless($container) == false)) - or ($target == "m" and (type-of($container) != "number" or unitless($container) == false)) - or ($target == "p" and (type-of($container) != "number" or unitless($container) == false)) - or ($target == "g" and (type-of($container) != "number" or unitless($container) == false)) { - @warn invalid("colspan",$target,$container) + wrong-type("unitless number",$container) + ". " + $colspan-lesson; - @return false; - } - } - @if $target - and not $container { - @if (type-of($target) == "number" and unitless($target) == true) { - @warn invalid(colspan,$target) + missing(1) + $colspan-lesson; - @return false; - } @else { - @warn invalid(colspan,$target) + wrong-type("unitless number",$target) + ", and " + missing(1) + $colspan-lesson; +@function colspan($target:null, $container:null, $addgut:false, $neg:false) { + @if $target and $container { // If a target and container have been specified + @if $target == $container { // If the target and container are the same + @return 100%; + } @else if type-of($container) == "number" and unitless($container) == true { // If the container is a unitless number + + $fluidMar: true; + $fluidCol: true; + $fluidGut: true; + $fluidPad: true; + $addgutAmount: 0; + $negAmount: 1; + $negOpen: ""; + $negClose: ""; + + @if unitless($mar) == false { // If margins are fixed width + $fluidMar: false; + } + @if unitless($col) == false { // If columns are fixed width + $fluidCol: false; + } + @if unitless($gut) == false { // If gutters are fixed width + $fluidGut: false; + @if $addgut == true { // If a gutter is added to the desired width + $addgutAmount: $gut; + } + } @else if $addgut == true { // If gutters are fluid width and a gutter is added to the desired width + @if $fluidCol == true { // If columns are fluid width + $addgutAmount: percentage($gut / fluidWidth($container)); + } @else { // If columns are fixed width + $addgutAmount: 1; + } + } + @if unitless($pad) == false { // If padding is fixed width + $fluidPad: false; + } + @if $neg == true { // If the desired width is negative + $negAmount: -1; + $negOpen: "("; + $negClose: ") * " + $negAmount; + } + + @if $target == "p" { // If the target is "p" (padding) + @if $addgut == true { // If a gutter is added to the desired width + @warn "$addgut can't be used with p or g."; + @return false; + } @else if $fluidPad == false { // If padding is fixed width + @return $pad * $negAmount; + } @else if $fluidCol == true and $fluidGut == true { // If padding, columns, and gutters are fluid width + @return percentage($pad / fluidWidth($container)) * $negAmount; + } @else if $fluidCol == true { // If padding and columns are fluid width and gutters are fixed width + @return calc(#{$negOpen}((100% - #{$gut * ($container - 1)}) / #{$container}) * #{$pad / $col}#{$negClose}); + } @else if $fluidGut == true { // If padding and gutters are fluid width and columns are fixed width + @return calc(#{$negOpen}((100% - #{$col * $container}) / #{$container - 1}) * #{$pad / $gut}#{$negClose}); + } @else { // If padding is fluid width and columns and gutters are fixed width + @warn "For padding to be fluid width, columns and/or gutters must also be fluid width."; + @return false; + } + } @else if $target == "g" { // If the target is "g" (gutter) + @if $addgut == true { // If a gutter is added to the desired width + @warn "$addgut can't be used with p or g."; + @return false; + } @else if $fluidGut == false { // If gutters are fixed width + @return $gut * $negAmount; + } @else if $fluidCol == true { // If gutters and columns are fluid width + @return (percentage($gut / fluidWidth($container)) + $addgutAmount) * $negAmount; + } @else { // If gutters are fluid width and columns are fixed width + @return calc(#{$negOpen}(100% - #{$col * $container}) / #{$container - 1}#{$negClose}); + } + } @else if type-of($target) == "number" and unitless($target) == true { // If the target is a unitless number + @if $fluidCol == false { // If columns are fixed width + @if $fluidGut == true { // If gutters are fluid width + @return calc(#{$negOpen}(((100% - #{$col * $container}) / #{$container - 1}) * #{$target - 1 + $addgutAmount}) + #{$col * $target}#{$negClose}); + } @else if unit($col) == unit($gut) { // If columns and gutters are fixed width and use the same units + @return (($col * $target) + ($gut * ($target - 1)) + $addgutAmount) * $negAmount; + } @else { // If columns and gutters are fixed width and use different units + @return calc(#{$negOpen}#{($col * $target)} + #{($gut * ($target - 1)) + $addgutAmount}#{$negClose}); + } + } @else if $fluidGut == true { // If columns are fluid width and gutters are fluid width + @return (percentage(fluidWidth($target) / fluidWidth($container)) + $addgutAmount) * $negAmount; + } @else { // If columns are fluid width and gutters are fixed width + @return calc(#{$negOpen}(((100% - #{$gut * ($container - 1)}) / #{$container}) * #{$target}) + #{($gut * ($target - 1)) + $addgutAmount}#{$negClose}); + } + } @else { // If the specified target is not "m", "p", "g", or a unitless number + @warn "A colspan() target must be either 'p' (padding), 'g' (gutter), or a unitless number."; + @return false; + } + } @else { // If the specified container is not a unitless number + @warn "A colspan() container must be a unitless number."; @return false; } - } - @if not $target { - @warn invalid(colspan) + missing(2) + $colspan-lesson; + } @else if $target and not $container { // If a target is specified but not a container + @warn "colspan() requires a container to be specified."; + @return false; + } @else if not $target { // If neither target nor container are specified + @warn "colspan() requires a target and container to be specified."; @return false; - } @else { - @return percentage(width($target) / width($container)) } } +// @function colspan($target:null,$container:null) { +// @if $target +// and $container { +// @if $target == "m" +// and (type-of($container) == "number" and unitless($container) == true) { +// @return percentage($mar / (width($container) + ($mar * 2))); +// } +// @if $target == "p" +// and (type-of($container) == "number" and unitless($container) == true) { +// @return percentage($pad / width($container)); +// } +// @if $target == "g" +// and (type-of($container) == "number" and unitless($container) == true) { +// @return percentage($gut / width($container)); +// } +// @if (type-of($target) != "number" or unitless($target) == false) +// and (type-of($container) != "number" or unitless($container) == false) +// and $target != "m" +// and $target != "p" +// and $target != "g" { +// @warn invalid("colspan",$target,$container) + wrong-type("unitless number",$target,$container) + ". " + $colspan-lesson; +// @return false; +// } +// @if (type-of($target) != "number" or unitless($target) == false) +// and (type-of($container) == "number" and unitless($container) == true) { +// @warn invalid("colspan",$target,$container) + wrong-type("unitless number",$target) + ". " + $colspan-lesson; +// @return false; +// } +// @if ((type-of($target) == "number" and unitless($target) == true) and (type-of($container) != "number" or unitless($container) == false)) +// or ($target == "m" and (type-of($container) != "number" or unitless($container) == false)) +// or ($target == "p" and (type-of($container) != "number" or unitless($container) == false)) +// or ($target == "g" and (type-of($container) != "number" or unitless($container) == false)) { +// @warn invalid("colspan",$target,$container) + wrong-type("unitless number",$container) + ". " + $colspan-lesson; +// @return false; +// } +// } +// @if $target +// and not $container { +// @if (type-of($target) == "number" and unitless($target) == true) { +// @warn invalid(colspan,$target) + missing(1) + $colspan-lesson; +// @return false; +// } @else { +// @warn invalid(colspan,$target) + wrong-type("unitless number",$target) + ", and " + missing(1) + $colspan-lesson; +// @return false; +// } +// } +// @if not $target { +// @warn invalid(colspan) + missing(2) + $colspan-lesson; +// @return false; +// } @else { +// @return percentage(width($target) / width($container)); +// } +// } + // ------------------------------------------------------------ // MIXINS // ------------------------------------------------------------ @@ -356,7 +456,7 @@ $grid-lesson: "A 'grid' mixin call must include a valid class name, e.g. 'grid(c @each $bp, $value in $breakpoints { @include breakpoint-min($bp) { @if map-has-key(map-get($breakpoints, $bp), margin) { - margin: 0 colspan(bp-attribute($bp, margin), width(bp-attribute($bp, cols)) + (bp-attribute($bp, margin) * 2)); + margin: 0 colspan(bp-attribute($bp, margin), fluidWidth(bp-attribute($bp, cols)) + (bp-attribute($bp, margin) * 2)); } @else { margin: 0 colspan(m, bp-attribute($bp, cols)); } @@ -371,11 +471,11 @@ $grid-lesson: "A 'grid' mixin call must include a valid class name, e.g. 'grid(c max-width: $max-width; $bp-final: nth(map-keys($breakpoints), -1); // Name of the widest breakpoint @if map-has-key(map-get($breakpoints, $bp-final), margin) { - @media screen and (min-width: ((((bp-attribute($bp-final, margin) / width(bp-attribute($bp-final, cols))) * $max-width) * 2) + $max-width)) { + @media screen and (min-width: ((((bp-attribute($bp-final, margin) / fluidWidth(bp-attribute($bp-final, cols))) * $max-width) * 2) + $max-width)) { margin: 0 auto; } } @else { - @media screen and (min-width: (((($mar / width(bp-attribute($bp-final, cols))) * $max-width) * 2) + $max-width)) { + @media screen and (min-width: (((($mar / fluidWidth(bp-attribute($bp-final, cols))) * $max-width) * 2) + $max-width)) { margin: 0 auto; } }