Your IP : 216.73.216.162
gridlex/_gridlex-vars.scss 0000666 00000020106 15113164216 0011650 0 ustar 00 //************************
// VARIABLES
//************************
$gl-gridName: customify-grid !default;
$gl-colName: customify-col !default;
$gl-attributeName: class !default;
$gl-gutter: 2em !default; // Total left + right
$gl-gutter-vertical: 0 !default;
$gl-mq-list: (
lg: "screen and (max-width: 80em)", // max 1280px
md: "screen and (max-width: 64em)", // max 1024px
sm: "screen and (max-width: 48em)", // max 768px
xs: "screen and (max-width: 35.5em)" // up to 568px
) !default;
$glp_col-1: (100%/12);
$glp_col-2: ($glp_col-1*2);
$glp_col-3: ($glp_col-1*3);
$glp_col-4: ($glp_col-1*4);
$glp_col-5: ($glp_col-1*5);
$glp_col-6: ($glp_col-1*6);
$glp_col-7: ($glp_col-1*7);
$glp_col-8: ($glp_col-1*8);
$glp_col-9: ($glp_col-1*9);
$glp_col-10: ($glp_col-1*10);
$glp_col-11: ($glp_col-1*11);
$glp_col-12: 100%;
$glp_col-5-12: (100%/5);
$glp_col-7-12: (100%/7);
$glp_col-8-12: (100%/8);
$glp_col-9-12: (100%/9);
$glp_col-10-12: (100%/10);
$glp_col-11-12: (100%/11);
// Function to generate the grid by number
@mixin makeGridByNumber($grid)
{
[#{$gl-attributeName}*="#{$grid}-1"] > [#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$grid}-1"] > [#{$gl-attributeName}*="#{$gl-colName}-"],
[#{$gl-attributeName}*="#{$grid}-1"] > [#{$gl-attributeName}*="#{$gl-colName}_"] {
flex-basis: $glp_col-12;
max-width: $glp_col-12;
}
[#{$gl-attributeName}*="#{$grid}-2"] > [#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$grid}-2"] > [#{$gl-attributeName}*="#{$gl-colName}-"],
[#{$gl-attributeName}*="#{$grid}-2"] > [#{$gl-attributeName}*="#{$gl-colName}_"] {
flex-basis: $glp_col-6;
max-width: $glp_col-6;
}
[#{$gl-attributeName}*="#{$grid}-3"] > [#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$grid}-3"] > [#{$gl-attributeName}*="#{$gl-colName}-"],
[#{$gl-attributeName}*="#{$grid}-3"] > [#{$gl-attributeName}*="#{$gl-colName}_"] {
flex-basis: $glp_col-4;
max-width: $glp_col-4;
}
[#{$gl-attributeName}*="#{$grid}-4"] > [#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$grid}-4"] > [#{$gl-attributeName}*="#{$gl-colName}-"],
[#{$gl-attributeName}*="#{$grid}-4"] > [#{$gl-attributeName}*="#{$gl-colName}_"] {
flex-basis: $glp_col-3;
max-width: $glp_col-3;
}
[#{$gl-attributeName}*="#{$grid}-5"] > [#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$grid}-5"] > [#{$gl-attributeName}*="#{$gl-colName}-"],
[#{$gl-attributeName}*="#{$grid}-5"] > [#{$gl-attributeName}*="#{$gl-colName}_"] {
flex-basis: $glp_col-5-12;
max-width: $glp_col-5-12;
}
[#{$gl-attributeName}*="#{$grid}-6"] > [#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$grid}-6"] > [#{$gl-attributeName}*="#{$gl-colName}-"],
[#{$gl-attributeName}*="#{$grid}-6"] > [#{$gl-attributeName}*="#{$gl-colName}_"] {
flex-basis: $glp_col-2;
max-width: $glp_col-2;
}
[#{$gl-attributeName}*="#{$grid}-7"] > [#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$grid}-7"] > [#{$gl-attributeName}*="#{$gl-colName}-"],
[#{$gl-attributeName}*="#{$grid}-7"] > [#{$gl-attributeName}*="#{$gl-colName}_"] {
flex-basis: $glp_col-7-12;
max-width: $glp_col-7-12;
}
[#{$gl-attributeName}*="#{$grid}-8"] > [#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$grid}-8"] > [#{$gl-attributeName}*="#{$gl-colName}-"],
[#{$gl-attributeName}*="#{$grid}-8"] > [#{$gl-attributeName}*="#{$gl-colName}_"] {
flex-basis: $glp_col-8-12;
max-width: $glp_col-8-12;
}
[#{$gl-attributeName}*="#{$grid}-9"] > [#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$grid}-9"] > [#{$gl-attributeName}*="#{$gl-colName}-"],
[#{$gl-attributeName}*="#{$grid}-9"] > [#{$gl-attributeName}*="#{$gl-colName}_"] {
flex-basis: $glp_col-9-12;
max-width: $glp_col-9-12;
}
[#{$gl-attributeName}*="#{$grid}-10"] > [#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$grid}-10"] > [#{$gl-attributeName}*="#{$gl-colName}-"],
[#{$gl-attributeName}*="#{$grid}-10"] > [#{$gl-attributeName}*="#{$gl-colName}_"] {
flex-basis: $glp_col-10-12;
max-width: $glp_col-10-12;
}
[#{$gl-attributeName}*="#{$grid}-11"] > [#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$grid}-11"] > [#{$gl-attributeName}*="#{$gl-colName}-"] {
flex-basis: $glp_col-11-12;
max-width: $glp_col-11-12;
}
[#{$gl-attributeName}*="#{$grid}-12"] > [#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$grid}-12"] > [#{$gl-attributeName}*="#{$gl-colName}-"],
[#{$gl-attributeName}*="#{$grid}-12"] > [#{$gl-attributeName}*="#{$gl-colName}_"] {
flex-basis: $glp_col-1;
max-width: $glp_col-1;
}
}
// Function to generate the grid by columns
@mixin makeCol($col)
{
[#{$gl-attributeName}~="#{$gl-gridName}"],
[#{$gl-attributeName}*="#{$gl-gridName}-"],
[#{$gl-attributeName}*="#{$gl-gridName}_"] {
> [#{$gl-attributeName}*="#{$col}-1"]{ flex-basis: $glp_col-1; max-width: $glp_col-1; }
> [#{$gl-attributeName}*="#{$col}-2"]{ flex-basis: $glp_col-2; max-width: $glp_col-2; }
> [#{$gl-attributeName}*="#{$col}-3"]{ flex-basis: $glp_col-3; max-width: $glp_col-3; }
> [#{$gl-attributeName}*="#{$col}-4"]{ flex-basis: $glp_col-4; max-width: $glp_col-4; }
> [#{$gl-attributeName}*="#{$col}-5"]{ flex-basis: $glp_col-5; max-width: $glp_col-5; }
> [#{$gl-attributeName}*="#{$col}-6"]{ flex-basis: $glp_col-6; max-width: $glp_col-6; }
> [#{$gl-attributeName}*="#{$col}-7"]{ flex-basis: $glp_col-7; max-width: $glp_col-7; }
> [#{$gl-attributeName}*="#{$col}-8"]{ flex-basis: $glp_col-8; max-width: $glp_col-8; }
> [#{$gl-attributeName}*="#{$col}-9"]{ flex-basis: $glp_col-9; max-width: $glp_col-9; }
> [#{$gl-attributeName}*="#{$col}-10"]{ flex-basis: $glp_col-10; max-width: $glp_col-10; }
> [#{$gl-attributeName}*="#{$col}-11"]{ flex-basis: $glp_col-11; max-width: $glp_col-11; }
> [#{$gl-attributeName}*="#{$col}-12"]{ flex-basis: $glp_col-12; max-width: $glp_col-12; }
}
}
// Function to generate the -first & -last base on mq keys (as _lg-first)
@mixin makeFirstLast($mq)
{
[#{$gl-attributeName}~="#{$gl-gridName}"],
[#{$gl-attributeName}*="#{$gl-gridName}-"],
[#{$gl-attributeName}*="#{$gl-gridName}_"] {
[#{$gl-attributeName}*="#{$mq}-first"]{
order: -1;
}
[#{$gl-attributeName}*="#{$mq}-last"]{
order: 1;
}
}
}
// Function to generate the offset
@mixin makeOff($off)
{
[#{$gl-attributeName}~="#{$gl-gridName}"],
[#{$gl-attributeName}*="#{$gl-gridName}-"],
[#{$gl-attributeName}*="#{$gl-gridName}_"] {
> [data-push-left*="#{$off}-0"]{ margin-left: 0; }
> [data-push-left*="#{$off}-1"]{ margin-left: $glp_col-1; }
> [data-push-left*="#{$off}-2"]{ margin-left: $glp_col-2; }
> [data-push-left*="#{$off}-3"]{ margin-left: $glp_col-3; }
> [data-push-left*="#{$off}-4"]{ margin-left: $glp_col-4; }
> [data-push-left*="#{$off}-5"]{ margin-left: $glp_col-5; }
> [data-push-left*="#{$off}-6"]{ margin-left: $glp_col-6; }
> [data-push-left*="#{$off}-7"]{ margin-left: $glp_col-7; }
> [data-push-left*="#{$off}-8"]{ margin-left: $glp_col-8; }
> [data-push-left*="#{$off}-9"]{ margin-left: $glp_col-9; }
> [data-push-left*="#{$off}-10"]{ margin-left: $glp_col-10; }
> [data-push-left*="#{$off}-11"]{ margin-left: $glp_col-11; }
> [data-push-right*="#{$off}-0"]{ margin-right: 0; }
> [data-push-right*="#{$off}-1"]{ margin-right: $glp_col-1; }
> [data-push-right*="#{$off}-2"]{ margin-right: $glp_col-2; }
> [data-push-right*="#{$off}-3"]{ margin-right: $glp_col-3; }
> [data-push-right*="#{$off}-4"]{ margin-right: $glp_col-4; }
> [data-push-right*="#{$off}-5"]{ margin-right: $glp_col-5; }
> [data-push-right*="#{$off}-6"]{ margin-right: $glp_col-6; }
> [data-push-right*="#{$off}-7"]{ margin-right: $glp_col-7; }
> [data-push-right*="#{$off}-8"]{ margin-right: $glp_col-8; }
> [data-push-right*="#{$off}-9"]{ margin-right: $glp_col-9; }
> [data-push-right*="#{$off}-10"]{ margin-right: $glp_col-10; }
> [data-push-right*="#{$off}-11"]{ margin-right: $glp_col-11; }
}
} gridlex/_gridlex.scss 0000666 00000014264 15113164216 0010707 0 ustar 00 /* ==========================================================================
GRIDLEX
Just a Flexbox Grid System - v. 2.4.1
========================================================================== */
@import "gridlex-vars";
// GRID
[#{$gl-attributeName}~="#{$gl-gridName}"],
[#{$gl-attributeName}*="#{$gl-gridName}-"],
[#{$gl-attributeName}*="#{$gl-gridName}_"] {
box-sizing: border-box;
display: flex;
flex-flow: row wrap;
margin: 0 (-$gl-gutter/2);
}
// COLS
[#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$gl-colName}-"],
[#{$gl-attributeName}*="#{$gl-colName}_"] {
box-sizing: border-box;
padding: 0 ($gl-gutter/2) $gl-gutter-vertical;
max-width: 100%;
}
// JUST "COL" & "COL_"
[#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$gl-colName}_"] {
flex: 1 1 0%;
}
// JUST "COL-"
[#{$gl-attributeName}*="#{$gl-colName}-"] {
flex: none;
}
// COL & GRID
[#{$gl-attributeName}~="#{$gl-gridName}"][#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}~="#{$gl-gridName}"][#{$gl-attributeName}*="#{$gl-colName}-"],
[#{$gl-attributeName}~="#{$gl-gridName}"][#{$gl-attributeName}*="#{$gl-colName}_"],
[#{$gl-attributeName}*="#{$gl-gridName}-"][#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$gl-gridName}-"][#{$gl-attributeName}*="#{$gl-colName}-"],
[#{$gl-attributeName}*="#{$gl-gridName}-"][#{$gl-attributeName}*="#{$gl-colName}_"],
[#{$gl-attributeName}*="#{$gl-gridName}_"][#{$gl-attributeName}~="#{$gl-colName}"],
[#{$gl-attributeName}*="#{$gl-gridName}_"][#{$gl-attributeName}*="#{$gl-colName}-"],
[#{$gl-attributeName}*="#{$gl-gridName}_"][#{$gl-attributeName}*="#{$gl-colName}_"] {
margin: 0;
padding: 0;
}
/************************
HELPERS SUFFIXES
*************************/
// FOR GRID
[#{$gl-attributeName}*="#{$gl-gridName}-"] {
// No spacing between cols : noGutter
&[#{$gl-attributeName}*="-noGutter"] {
margin: 0;
> [#{$gl-attributeName}~="#{$gl-colName}"],
> [#{$gl-attributeName}*="#{$gl-colName}-"] {
padding: 0;
}
}
// No Wrapping
&[#{$gl-attributeName}*="-noWrap"] {
flex-wrap: nowrap;
}
// Horizontal alignment on center
&[#{$gl-attributeName}*="-center"] {
justify-content: center;
}
// Horizontal alignment on right
&[#{$gl-attributeName}*="-right"] {
justify-content: flex-end;
align-self: flex-end;
margin-left: auto;
}
// Vertical alignment on top
&[#{$gl-attributeName}*="-top"] {
align-items: flex-start;
}
// Vertical alignment on middle
&[#{$gl-attributeName}*="-middle"] {
align-items: center;
}
// Vertical alignment on bottom
&[#{$gl-attributeName}*="-bottom"] {
align-items: flex-end;
}
// Orders
&[#{$gl-attributeName}*="-reverse"] {
flex-direction: row-reverse;
}
&[#{$gl-attributeName}*="-column"] {
flex-direction: column;
> [#{$gl-attributeName}*="#{$gl-colName}-"] {
flex-basis: auto;
}
}
&[#{$gl-attributeName}*="-column-reverse"] {
flex-direction: column-reverse;
}
// Spaces between and around cols
&[#{$gl-attributeName}*="-spaceBetween"] {
justify-content: space-between;
}
&[#{$gl-attributeName}*="-spaceAround"] {
justify-content: space-around;
}
// Equal heights columns
&[#{$gl-attributeName}*="-equalHeight"] > [#{$gl-attributeName}~="#{$gl-colName}"],
&[#{$gl-attributeName}*="-equalHeight"] > [#{$gl-attributeName}*="#{$gl-colName}-"],
&[#{$gl-attributeName}*="-equalHeight"] > [#{$gl-attributeName}*="#{$gl-colName}_"] {
align-self: stretch;
> * {
height: 100%;
}
}
// Removes the padding-bottom
&[#{$gl-attributeName}*="-noBottom"] > [#{$gl-attributeName}~="#{$gl-colName}"],
&[#{$gl-attributeName}*="-noBottom"] > [#{$gl-attributeName}*="#{$gl-colName}-"],
&[#{$gl-attributeName}*="-noBottom"] > [#{$gl-attributeName}*="#{$gl-colName}_"] {
padding-bottom: 0;
}
}
// FOR COL
[#{$gl-attributeName}*="#{$gl-colName}-"] {
&[#{$gl-attributeName}*="-top"] {
align-self: flex-start;
}
&[#{$gl-attributeName}*="-middle"] {
align-self: center;
}
&[#{$gl-attributeName}*="-bottom"] {
align-self: flex-end;
}
&[#{$gl-attributeName}*="-first"] {
order: -1;
}
&[#{$gl-attributeName}*="-last"] {
order: 1;
}
}
/************************
GRID BY NUMBER
*************************/
@include makeGridByNumber(#{$gl-gridName});
@each $mq-key, $mq-value in $gl-mq-list {
@media #{$mq-value} {
@include makeGridByNumber(_#{$mq-key});
}
}
/************************
COLS SIZES
*************************/
@include makeCol(#{$gl-colName});
@include makeOff(off);
@each $mq-key, $mq-value in $gl-mq-list {
@media #{$mq-value} {
@include makeCol(_#{$mq-key});
@include makeOff(_#{$mq-key});
@include makeFirstLast(_#{$mq-key});
}
}
/************************
HIDING COLS
*************************/
/*[#{$gl-attributeName}*="#{$gl-colName}-"]:not([#{$gl-attributeName}*="#{$gl-gridName}"]):not([#{$gl-attributeName}*="#{$gl-colName}-0"]) {
display: block;
}
[#{$gl-attributeName}~="#{$gl-gridName}"][#{$gl-attributeName}*="#{$gl-colName}-"]:not([#{$gl-attributeName}*="#{$gl-colName}-0"]) {
display: flex;
}*/
[#{$gl-attributeName}*="#{$gl-colName}-"][#{$gl-attributeName}*="#{$gl-colName}-0"] {
display: none;
}
@each $mq-key, $mq-value in $gl-mq-list {
@media #{$mq-value} { //_#{$mq-key}
[#{$gl-attributeName}~="#{$gl-gridName}"],
[#{$gl-attributeName}*="#{$gl-gridName}-"],
[#{$gl-attributeName}*="#{$gl-gridName}_"] {
> :not([#{$gl-attributeName}*="_#{$mq-key}-0"]) {
display: block;
}
/*
&:not([#{$gl-attributeName}*="_#{$mq-key}-0"]) {
display: flex;
}*/
> [#{$gl-attributeName}*="_#{$mq-key}-0"] {
//&[#{$gl-attributeName}*="-equalHeight"] > [#{$gl-attributeName}*="_#{$mq-key}-0"]{
display: none;
}
}
}
}
modularscale/_sugar.scss 0000666 00000000511 15113164216 0011375 0 ustar 00 // To attempt to avoid conflicts with other libraries
// all funcitons are namespaced with `ms-`.
// However, to increase usability, a shorthand function is included here.
@function ms($v: 0, $base: false, $ratio: false, $thread: false, $settings: $modularscale) {
@return ms-function($v, $base, $ratio, $thread, $settings);
} modularscale/_target.scss 0000666 00000002325 15113164216 0011547 0 ustar 00 // Convert number string to number
@function ms-to-num($n) {
$l: str-length($n);
$r: 0;
$m: str-index($n,'.');
@if $m == null {
$m: $l + 1;
}
// Loop through digits and convert to numbers
@for $i from 1 through $l {
$v: str-slice($n,$i,$i);
@if $v == '1' { $v: 1; }
@elseif $v == '2' { $v: 2; }
@elseif $v == '3' { $v: 3; }
@elseif $v == '4' { $v: 4; }
@elseif $v == '5' { $v: 5; }
@elseif $v == '6' { $v: 6; }
@elseif $v == '7' { $v: 7; }
@elseif $v == '8' { $v: 8; }
@elseif $v == '9' { $v: 9; }
@elseif $v == '0' { $v: 0; }
@else { $v: null; }
@if $v != null {
$m: $m - 1;
$r: $r + ms-pow(10,$m - 1) * $v;
} @else {
$l: $l - 1;
}
}
@return $r;
}
// Find a ratio based on a target value
@function ms-target($t,$b) {
// Convert to string
$t: $t + '';
// Remove base units to calulate ratio
$b: ms-unitless(nth($b,1));
// Find where 'at' is in the string
$at: str-index($t,'at');
// Slice the value and target out
// and convert strings to numbers
$v: ms-to-num(str-slice($t,0,$at - 1));
$t: ms-to-num(str-slice($t,$at + 2));
// Solve the modular scale function for the ratio.
@return ms-pow(($v/$b),(1/$t));
} modularscale/_function.scss 0000666 00000003054 15113164216 0012106 0 ustar 00 @function ms-function($v: 0, $base: false, $ratio: false, $thread: false, $settings: $modularscale) {
// Parse settings
$ms-settings: ms-settings($base,$ratio,$thread,$settings);
$base: nth($ms-settings, 1);
$ratio: nth($ms-settings, 2);
// Render target values from settings.
@if unit($ratio) != '' {
$ratio: ms-target($ratio,$base)
}
// Fast calc if not multi stranded
@if(length($base) == 1) {
@return ms-round-px(ms-pow($ratio, $v) * $base);
}
// Create new base array
$ms-bases: nth($base,1);
// Normalize base values
@for $i from 2 through length($base) {
// initial base value
$ms-base: nth($base,$i);
// If the base is bigger than the main base
@if($ms-base > nth($base,1)) {
// divide the value until it aligns with main base.
@while($ms-base > nth($base,1)) {
$ms-base: $ms-base / $ratio;
}
$ms-base: $ms-base * $ratio;
}
// If the base is smaller than the main base.
@elseif ($ms-base < nth($base,1)) {
// pump up the value until it aligns with main base.
@while $ms-base < nth($base,1) {
$ms-base: $ms-base * $ratio;
}
}
// Push into new array
$ms-bases: append($ms-bases,$ms-base);
}
// Sort array from smallest to largest.
$ms-bases: ms-sort($ms-bases);
// Find step to use in calculation
$vtep: floor($v / length($ms-bases));
// Find base to use in calculation
$ms-base: round(($v / length($ms-bases) - $vtep) * length($ms-bases)) + 1;
@return ms-round-px(ms-pow($ratio, $vtep) * nth($ms-bases,$ms-base));
} modularscale/_pow.scss 0000666 00000002130 15113164216 0011060 0 ustar 00 // Sass does not have native pow() support so this needs to be added.
// Compass and other libs implement this more extensively.
// In order to keep this simple, use those when they are avalible.
// Issue for pow() support in Sass: https://github.com/sass/sass/issues/684
@function ms-pow($b,$e) {
// Return 1 if exponent is 0
@if $e == 0 {
@return 1;
}
// If pow() exists (compass or mathsass) use that.
@if function-exists('pow') {
@return pow($b,$e);
}
// This does not support non-integer exponents,
// Check and return an error if a non-integer exponent is passed.
@if (floor($e) != $e) {
@error 'Non-integer values are not supported in modularscale by default. Try using mathsass in your project to add non-integer scale support. https://github.com/terkel/mathsass'
}
// Seed the return.
$ms-return: $b;
// Multiply or divide by the specified number of times.
@if $e > 0 {
@for $i from 1 to $e {
$ms-return: $ms-return * $b;
}
}
@if $e < 0 {
@for $i from $e through 0 {
$ms-return: $ms-return / $b;
}
}
@return $ms-return;
} modularscale/_settings.scss 0000666 00000001422 15113164216 0012116 0 ustar 00 // Parse settings starting with defaults.
// Settings should cascade down like you would expect in CSS.
// More specific overrides previous settings.
@function ms-settings($b: false, $r: false, $t: false, $m: $modularscale) {
$base: $ms-base;
$ratio: $ms-ratio;
$thread: map-get($m, $t);
// Override with user settings
@if map-get($m, base) {
$base: map-get($m, base);
}
@if map-get($m, ratio) {
$ratio: map-get($m, ratio);
}
// Override with thread settings
@if $thread {
@if map-get($thread, base) {
$base: map-get($thread, base);
}
@if map-get($thread, ratio) {
$ratio: map-get($thread, ratio);
}
}
// Override with inline settings
@if $b {
$base: $b;
}
@if $r {
$ratio: $r;
}
@return $base $ratio;
} modularscale/_strip-units.scss 0000666 00000000417 15113164216 0012562 0 ustar 00 // Stripping units is not a best practice
// This function should not be used elsewhere
// It is used here because calc() doesn't do unit logic
// AND target ratios use units as a hack to get a number.
@function ms-unitless($val) {
@return ($val / ($val - $val + 1));
} modularscale/_sort.scss 0000666 00000001753 15113164216 0011254 0 ustar 00 // Basic list sorting
// Would like to replace with http://sassmeister.com/gist/30e4863bd03ce0e1617c
// Unfortunately libsass has a bug with passing arguments into the min() funciton.
@function ms-sort($l) {
// loop until the list is confirmed to be sorted
$sorted: false;
@while $sorted == false {
// Start with the assumption that the lists are sorted.
$sorted: true;
// Loop through the list, checking each value with the one next to it.
// Swap the values if they need to be swapped.
// Not super fast but simple and modular scale doesn't lean hard on sorting.
@for $i from 2 through length($l) {
$n1: nth($l,$i - 1);
$n2: nth($l,$i);
// If the first value is greater than the 2nd, swap them.
@if $n1 > $n2 {
$l: set-nth($l, $i, $n1);
$l: set-nth($l, $i - 1, $n2);
// The list isn't sorted and needs to be looped through again.
$sorted: false;
}
}
}
// Return the sorted list.
@return $l;
} modularscale/_vars.scss 0000666 00000001646 15113164216 0011241 0 ustar 00 // Ratios
$double-octave : 4 ;
$pi : 3.14159265359 ;
$major-twelfth : 3 ;
$major-eleventh : 2.666666667 ;
$major-tenth : 2.5 ;
$octave : 2 ;
$major-seventh : 1.875 ;
$minor-seventh : 1.777777778 ;
$major-sixth : 1.666666667 ;
$phi : 1.618034 ;
$golden : $phi ;
$minor-sixth : 1.6 ;
$fifth : 1.5 ;
$augmented-fourth : 1.41421 ;
$fourth : 1.333333333 ;
$major-third : 1.25 ;
$minor-third : 1.2 ;
$major-second : 1.125 ;
$minor-second : 1.066666667 ;
// Base config
$ms-base : 1em !default;
$ms-ratio : $golden !default;
$modularscale: (
base: 1em 0.875em,
ratio: 1.618
); modularscale/_respond.scss 0000666 00000003212 15113164216 0011727 0 ustar 00 // Generate calc() function
// based on Mike Riethmuller's Precise control over responsive typography
// http://madebymike.com.au/writing/precise-control-responsive-typography/
@function ms-fluid($val1: 1em, $val2: 1em, $break1: 0, $break2: 0) {
$diff: ms-unitless($val2) - ms-unitless($val1);
// v1 + (v2 - v1) * ( (100vw - b1) / b2 - b1 )
@return calc( #{$val1} + #{ms-unitless($val2) - ms-unitless($val1)} * ( ( 100vw - #{$break1}) / #{ms-unitless($break2) - ms-unitless($break1)} ) );
}
// Main responsive mixin
@mixin ms-respond($prop, $val, $map: $modularscale) {
$base: $ms-base;
$ratio: $ms-ratio;
$first-write: true;
$last-break: null;
// loop through all settings with a breakpoint type value
@each $v, $s in $map {
@if type-of($v) == number {
@if unit($v) != '' {
// Write out the first value without a media query.
@if $first-write {
#{$prop}: ms-function($val, $thread: $v, $settings: $map);
// Not the first write anymore, reset to false to move on.
$first-write: false;
$last-break: $v;
}
// Write intermediate breakpoints.
@else {
@media (min-width: $last-break) and (max-width: $v) {
$val1: ms-function($val, $thread: $last-break, $settings: $map);
$val2: ms-function($val, $thread: $v, $settings: $map);
#{$prop}: ms-fluid($val1,$val2,$last-break,$v);
}
$last-break: $v;
}
}
}
}
// Write the last breakpoint.
@if $last-break {
@media (min-width: $last-break) {
#{$prop}: ms-function($val, $thread: $last-break, $settings: $map);
}
}
} modularscale/_round-px.scss 0000666 00000000257 15113164216 0012037 0 ustar 00 // No reason to have decimal pixel values,
// normalize them to whole numbers.
@function ms-round-px($r) {
@if unit($r) == 'px' {
@return round($r);
}
@return $r;
} _vendors.scss 0000666 00000000636 15113164216 0007271 0 ustar 00 // Modular Scale
@import 'modularscale/vars';
@import 'modularscale/settings';
@import 'modularscale/pow';
@import 'modularscale/strip-units';
@import 'modularscale/sort';
@import 'modularscale/round-px';
@import 'modularscale/target';
@import 'modularscale/function';
@import 'modularscale/respond';
@import 'modularscale/sugar';
// Normalize
@import 'normalize/normalize';
// Gridlex
@import 'gridlex/gridlex'; normalize/_normalize.scss 0000666 00000017264 15113164216 0011616 0 ustar 00 /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in
* IE on Windows Phone and in iOS.
*/
html {
line-height: 1.15; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/**
* Add the correct display in IE 9-.
*/
article,
aside,
footer,
header,
nav,
section {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.
*/
figcaption,
figure,
main { /* 1 */
display: block;
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
audio,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: sans-serif; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
display: inline-block; /* 1 */
vertical-align: baseline; /* 2 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
*/
details, /* 1 */
menu {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Scripting
========================================================================== */
/**
* Add the correct display in IE 9-.
*/
canvas {
display: inline-block;
}
/**
* Add the correct display in IE.
*/
template {
display: none;
}
/* Hidden
========================================================================== */
/**
* Add the correct display in IE 10-.
*/
[hidden] {
display: none;
}