diff --git a/core/_config.scss b/core/_config.scss index af4799e..5c82cec 100644 --- a/core/_config.scss +++ b/core/_config.scss @@ -30,19 +30,20 @@ $link-hover: #000 !global; // default link color on :hover $link-decoration: underline !global; // default link decoration // GRID -$is-fluid: false !global; // Change to true to enable the fluid grid -$base-width: 960px !global; // The overall width of the grid +$base-width: 98% !global; // The overall width of the grid (.container) +$is-fluid: true !global; // Change to true to enable the fluid grid $base-col-width: 40px !global; // The width of each columns $base-gutter-width: 20px !global; // The space between columns $base-col-count: 16 !global; // The number of columns -// ------ CHANGE MAY CAUSE UNDESIRED RESULTS -$base-font-size: 10px !global; // the font size in the html element - -// media query dimensions +// BREAKPOINTS $tablet-width: 768px !global; // the tablet width media query $mobile-portrait-width: 300px !global; // the mobile portrait media query $mobile-landscape-width: 420px !global; // the mobile landscape media query + $mobile-fluid-width: 100%; + +// ------ CHANGE MAY CAUSE UNDESIRED RESULTS +$base-font-size: 10px !global; // the font size in the html element // ------ IMPORTS. DO NOT CHANGE @import "dependencies"; diff --git a/core/_dependencies.scss b/core/_dependencies.scss index 3b51bf7..48c424f 100644 --- a/core/_dependencies.scss +++ b/core/_dependencies.scss @@ -19,14 +19,14 @@ // Grid .container { @for $i from 1 through $colCount { - @if ( $i == 1 ) { + @if($i == 1) { .#{numToString($i)}.column, .#{numToString($i)}.columns { width: percentage( $i / $colCount ) - 2; } } @else { .#{numToString($i)}.columns { width: percentage( $i / $colCount ) - 2; } } } - $top: percentage( 16 / $colCount ) - 2; + $top: percentage(16 / $colCount) - 2; .one-third.columns { width: $top * (1 / 3) - 2; } .two-thirds.columns { width: $top * (2 / 3) - 2; } .full-width.columns { @@ -53,7 +53,7 @@ /* The Grid */ .container { @for $i from 1 through $colCount { - @if ( $i == 1 ) { + @if($i == 1) { .#{numToString($i)}.column, .#{numToString($i)}.columns { width: $colWidth; } } @else { @@ -73,7 +73,7 @@ // _offset ( boolean $is-fluid, number $colCount, number $colWidth ) @mixin _offset($is-fluid, $colCount, $colWidth) { - @if ( $is-fluid == true ) { + @if ($is-fluid) { @for $i from 1 through ( $colCount - 1 ) { .offset-by-#{numToString($i)} { padding-left: percentage( $i / $colCount ); } } @@ -84,16 +84,17 @@ } } -// _mobileGrid ( number $width, number $colCount ) -@mixin _mobileGrid($width, $colCount) { +// _mobileGrid ( number $width, number $colCount, boolean $isFluid ) +@mixin _mobileGrid($width, $colCount, $isFluid) { + $width: if($isFluid, $mobile-fluid-width, $width); .container { width: $width; .column, .columns { // fixes https://github.com/atomicpages/skeleton-sass/issues/9 margin: { - left: 0; - right: 0; + left: if($isFluid, 2%, 0); + right: if($isFluid, 2%, 0); }; } @for $i from 1 through $colCount { @@ -101,9 +102,9 @@ .#{numToString($i)}.column { width: $width; } } } - @include _group($colCount, ".columns", "after") { width: $width; } - .one-third.column { width: $width; } - .two-thirds.column { width: $width; } + @include _group($colCount, ".columns", "after") { width: $width - 4; } + .one-third.column { width: $width - 4; } + .two-thirds.column { width: $width - 4; } .full-width.columns { width: $width; margin-left: 0; diff --git a/core/_mixins.scss b/core/_mixins.scss index 091563d..c28fdd6 100644 --- a/core/_mixins.scss +++ b/core/_mixins.scss @@ -4,7 +4,7 @@ // grid ( [ number $width: 960px, [ boolean $fluid: false, [ number $gutterWidth: 20px, [ number $colCount: 16 ] ] ] ] ) @mixin grid($width: $base-width, $fluid: $is-fluid, $gutterWidth: $base-gutter-width, $colCount: $base-col-count) { - @if ( $fluid == true ) { + @if($fluid) { @include _fluidGrid($colCount); } @else { // we no longer need to set a value for $colWdith because it is generated dynamically right here! @@ -15,25 +15,25 @@ } // mobileGrid ( [ number $width: 960px, [ number $colCount: 16 ] ] ) -@mixin mobileGrid($width: $base-width, $colCount: $base-col-count) { - @include _mobileGrid($width, $colCount); +@mixin mobileGrid($width: $base-width, $isFluid: $is-fluid, $colCount: $base-col-count) { + @include _mobileGrid($width, $colCount, $isFluid); } // font-size ( [ number $size, [ boolean $fallback: true ] ] ) @mixin font-size($size, $fallback: $use-px-fallback) { - @if($fallback == true) { + @if($fallback) { font-size: $size; } - @if($use-rem == true and $use-em == false and $use-percent == false) { + @if($use-rem and not $use-em and not $use-percent) { font-size: rem($size); - } @elseif($use-em == true and $use-rem == false and $use-percent == false) { + } @elseif($use-em and not $use-rem and not $use-percent) { font-size: em($size); - } @elseif($use-percent == true and $use-rem == false and $use-em == false) { + } @elseif($use-percent and not $use-rem and not $use-em) { font-size: percent($size); } @else { @debug "More than one option is chosen for the default unit. Choose only one. Defaulting to px."; - @if($fallback == false) { + @if(not $fallback) { // we have no other choice... font-size: $size; } } diff --git a/skeleton/sphenoid/_skeleton.scss b/skeleton/sphenoid/_skeleton.scss index 55b2b68..0c6a127 100644 --- a/skeleton/sphenoid/_skeleton.scss +++ b/skeleton/sphenoid/_skeleton.scss @@ -18,9 +18,7 @@ } .row { margin-bottom: relative(20px); } -// @include grid($base-width, true); // fluid -// @include grid($base-width, false, 20px, 12); // 12-column fixed grid -// @include grid($base-width, false, 20px, 20); // 20-column fixed grid +// Set variables in user global config in skeleton sass root instead of editing directly @include grid($base-width, $is-fluid, $base-gutter-width, $base-col-count); /* TABLET (PORTRAIT) @@ -33,13 +31,13 @@ &.alpha { margin: { left: 0; - right: 10px; + right: if($is-fluid, 2%, 10px); }; } &.omega { margin: { right: 0; - left: 10px; + left: if($is-fluid, 2%, 10px); }; } } @@ -51,22 +49,23 @@ }; } - // DNRY (Do Not Repeat Yourself) for fluid tablet, values are the same - // @include grid($tablet-width, false, 20px, 12); // 12-column fixed grid - // @include grid($tablet-width, false, 20px, 20); // 20-column fixed grid - @include grid($tablet-width, $is-fluid, $base-gutter-width, $base-col-count); // fixed + // If it is fluid, then we don't need to repeat ourselves. The grid will be identical + @if(not $is-fluid) { + // Set variables in user global config in skeleton sass root instead of editing directly + @include grid($tablet-width, false, $base-gutter-width, $base-col-count); // fixed + } } /* MOBILE (PORTRAIT) * ------------------------------------------------ */ @media only screen and (max-width: $tablet-width - 1) { - @include mobileGrid($mobile-portrait-width); + @include mobileGrid($mobile-portrait-width, $is-fluid, $base-col-count); } /* MOBILE (LANDSCAPE) * ------------------------------------------------ */ @media only screen and (min-width: 480px) and (max-width: $tablet-width - 1) { - @include mobileGrid($mobile-landscape-width); + @include mobileGrid($mobile-landscape-width, $is-fluid, $base-col-count); } /* CLEARING diff --git a/skeleton_template.scss b/skeleton_template.scss index 8cf0bce..91069d4 100644 --- a/skeleton_template.scss +++ b/skeleton_template.scss @@ -3,7 +3,7 @@ * @author Dennis Thompson * @copyright Copyright (c) 2014 AtomicPages LLC * @license MIT - * @version 2.0.0-b5 + * @version 2.0.0-b6 */ // Choose the your flavor of Skeleton Sass and compile