From 07cf398cb052be253a8cf9f91e597d4c9547edfe Mon Sep 17 00:00:00 2001 From: atomicpages Date: Tue, 20 May 2014 13:05:34 -0700 Subject: [PATCH] 2.0.0-a5 Beginning to covert fonts into relative units instead of absolute units, added some functions, added some mixins, blah blah... --- README.md | 32 +++++++++++-------- _MYconfig.scss | 27 ++++++++++------- bin/setup.sh | 2 +- bin/upgrade.sh | 2 +- core/_config.scss | 4 +-- core/_dependencies.scss | 35 +++++++++++++-------- core/_mixins.scss | 23 ++++++++++---- core/flavors/_bourbon.scss | 1 - core/flavors/_compass.scss | 1 - core/flavors/_sass.scss | 1 - flavors/bourbon/_layout.scss | 55 --------------------------------- flavors/compass/_base.scss | 59 +++++++++++++++++++----------------- flavors/compass/_layout.scss | 55 --------------------------------- flavors/sass/_layout.scss | 53 -------------------------------- skeleton_template.scss | 26 ++++++++++++++-- 15 files changed, 135 insertions(+), 241 deletions(-) delete mode 100644 flavors/bourbon/_layout.scss delete mode 100644 flavors/compass/_layout.scss delete mode 100644 flavors/sass/_layout.scss diff --git a/README.md b/README.md index a3ed0b6..44e77cb 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ -Skeleton SASS -============= +Skeleton SASS 2 α +======================= Skeleton SASS is a "SASSification" of Dave Gamache's [Skeleton CSS](http://getskeleton.com) responsive front-end framework. @@ -40,13 +40,11 @@ Skeleton SASS is organized into **three** major categories: 3. Vanilla Sass Version * Requires Sass 3.3.x -### Requirements - -Both of these versions are organized the same exact way to ensure maximum usability: - -* Project organization needs updating - ### File Overview +* `skeleton_template.scss` houses **all** custom code. + * **Note:** this file name is meant to be changed. // add link to how to +* `_MYconfig.scss` houses all of your global configuration (e.g. mixins, functions, variables, etc.) + * **Note:** this file name is meant to be changed. // add link to how to * `core` * `_config.scss` houses all of the global configuration and variable options. Any change here will alter all flavors * `_dependencies.scss` houses all of the logic behind the front-facing mixins (e.g. grid generation, conversion, etc.) @@ -76,17 +74,20 @@ Both of these versions are organized the same exact way to ensure maximum usabil * `_vars.scss` houses all flavor-specific variables ### Bower -> Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat — bower.io +> Bower is a package manager for the web. It offers a generic, unopinionated solution to the problem of front-end package management, while exposing the package dependency model via an API that can be consumed by a more opinionated build stack. There are no system wide dependencies, no dependencies are shared between different apps, and the dependency tree is flat — [bower.io](http://bower.io/) + +Install Skeleton Sass with bower via command line: -For more info on bower, checkout [bower.io](http://bower.io/). + bower install skeleton-sass -Skeleton Sass is now available on Bower because we want to make your life easier. You can now add Skeleton Sass to any project easily by issuing `bower install skeleton-sass`. +You can also install alpha, beta, rc, and previous versions by looking at the [releases](https://github.com/atomicpages/skeleton-sass/releases) page and install with the following syntax: + + bower install skeleton-sass#[tag] + bower install skeleton-sass#2.0.0-a4 ### Demo Live demo can be seen here: [http://atomicpages.github.io/skeleton-sass](http://atomicpages.github.io/skeleton-sass). Be sure to resize your browser window and see the responsive goodness in action! -Want to see spin on the default 16-column fixed-grid system? See the [demo here](http://atomicpages.github.io/skeleton-sass/demo.html)! - ### Documentation Skeleton SASS is heavily documented! If you're looking for a detailed description (or just want more info) you can checkout the [wiki pages](https://github.com/atomicpages/skeleton-sass/wiki/_pages)! @@ -119,6 +120,11 @@ Changelog * All of the different implementations of Skeleton Sass have been moved to the `flavors` folder * All core/shared files have been moved to the `core` folder. * Ability to choose between bourbon, compass, and vanilla sass by changing the preferred flavor in `skeleton.scss` +* Added shell scripts to aid in setting up and upgrading Skeleton Sass for you *nix/OS X users who use command line. + * Batch scripts for Windows users coming soon + * Manual configuration documentation coming soon +* Completely removed `layout.scss` and added predefined media queries to `skeleton_template.scss` + Authors ------- diff --git a/_MYconfig.scss b/_MYconfig.scss index b156f26..e0a7176 100644 --- a/_MYconfig.scss +++ b/_MYconfig.scss @@ -1,11 +1,16 @@ -// This file is just a placeholder and not actually used. Please rename to _functions.scss -// and write custom functions that you wish to be scoped globally across all flavors (except css) -// This file can be used to override any and all mixins and functions. Please override variables in the project -// directories in _vars.scss in any given flavor (except css). - -// Once file has been renamed to _functions.scss do the following: -// 1. Open _config.scss and scroll to the bottom -// 2. Uncomment @import "functions"; to enable the use of custom code -// 3. Enjoy! - -// @function myFunction() { } +// This file stores all of your global project configuration options +// and will not be wiped out by upgrading skeleton sass. Run the +// setup.sh script from command line or follow the steps below +// to manually configure: +// +// MANUAL CONFIGURATON +// 1. Rename _MYconfig.scss to _[projectname].config.scss +// 2. Rename skeleton_template.scss to skeleton.scss +// 3. Navigate to core and edit _config.scss using your favorite +// text editor. Add the following to the end of _config.scss: +// @import " _[projectname].config.scss"; +// +// HOW TO RUN AUTOMATED SETUP +// 1. Open terminal and issue the following command: +// bin/setup.sh +// 2. Follow prompts from script diff --git a/bin/setup.sh b/bin/setup.sh index fecfa37..4c575e6 100755 --- a/bin/setup.sh +++ b/bin/setup.sh @@ -2,7 +2,7 @@ cwd=${PWD##*/} -if [ $cwd == "bin" ]; then +if [[ $cwd = "bin" ]]; then cd ../ fi diff --git a/bin/upgrade.sh b/bin/upgrade.sh index 908a43e..4574ca0 100755 --- a/bin/upgrade.sh +++ b/bin/upgrade.sh @@ -3,7 +3,7 @@ echo "Upgrade utility working..." cwd=${PWD##*/} -if [ $cwd == "bin" ]; then +if [[ $cwd = "bin" ]]; then cd ../ fi diff --git a/core/_config.scss b/core/_config.scss index 3634cb3..9de17b9 100644 --- a/core/_config.scss +++ b/core/_config.scss @@ -12,7 +12,7 @@ $use-percent: false; // use percentage as default unit? $use-px-fallback: true; // allow for pixel fall back -$fontSize: 1.4rem; // default font size. Change here will adjust sizes across the board. +$fontSize: 14px; // default font size. Change here will adjust sizes across the board. $fontFamily: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; // default fonts $fontColor: #444; // default font color @@ -42,7 +42,7 @@ $isFluid: false; // want a fluid grid by default? // ------ CHANGE MAY CAUSE UNDESIRED RESULTS $baseColCount: 16; // number of cols to generate -$baseFontSize: 16px; +$baseFontSize: 10px; // media query dimensions $tabletWidth: 768px; diff --git a/core/_dependencies.scss b/core/_dependencies.scss index af26a7e..a029007 100644 --- a/core/_dependencies.scss +++ b/core/_dependencies.scss @@ -171,9 +171,14 @@ @return $number; } -// TODO once Compass 1.x becomes stable, this function will include substring searching -// to determine the unit. If it's a percentage, then our equation changes. -@function em($px, $base: $baseFontSize) { +@function calcRU($px, $base, $unit) { + $unit: quote($unit); + + @if not $unit == "em" or not $unit == "rem" or not $unit == "%" { + @debug "Invalid unit, choose 'em' or 'rem'"; + @return null; + } + @if not unitless($px) { $px: strip-units($px); } @@ -182,18 +187,24 @@ $base: strip-units($base); } - @return ($px / $base) * 1em; + @if($unit == "%") { + @return percentage($px / $base); + } + + @return ($px / $base) * 1#{$unit}; +} + +// TODO once Compass 1.x becomes stable, this function will include string slicing +// to determine the unit. If it's a percentage, then our equation changes. +@function em($px, $base: $baseFontSize) { + @return calcRU($px, $base, "em"); } // TOOD create a more general function that both em and rem uses. Keep it DRY @function rem($px, $base: $baseFontSize) { - @if not unitless($px) { - $px: strip-units($px); - } - - @if not unitless($base) { - $base: strip-units($base); - } + @return calcRU($px, $base, "rem"); +} - @return ($px / $base) * 1rem; +@function percent($px, $base: $baseFontSize) { + @return calcRU($px, $base, "%"); } diff --git a/core/_mixins.scss b/core/_mixins.scss index 2cdd360..a45e73e 100644 --- a/core/_mixins.scss +++ b/core/_mixins.scss @@ -14,16 +14,27 @@ } } -// mobileGrid ( [ number $width: 960px, [ number $colCount: 16 ] ] ) +// mobileGrid ( [ number $width: 960px, [ number $colCount: 16 ] ] ) @mixin mobileGrid($width: $baseWidth, $colCount: $baseColCount) { @include _mobileGrid($width, $colCount); } -@mixin getFontSize { - @if($use-rem == true) { - font-size: strip-units($fontSize)rem; - @if($use-px-fallback == true) { - font-size: (strip-units($fontSize) * 10); +// font-size ( [ number $size, [ bool $fallback: true ] ] ) +@mixin font-size($size, $fallback: $use-px-fallback) { + @if($fallback == true) { + font-size: $size; + } + + @if($use-rem == true and $use-em == false and $use-percent == false) { + font-size: rem($size); + } @elseif($use-em == true and $use-rem == false and $use-percent == false) { + font-size: em($size); + } @elseif($use-percent == true and $use-rem == false and $use-em == false) { + 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) { + font-size: $size; } } } diff --git a/core/flavors/_bourbon.scss b/core/flavors/_bourbon.scss index 0733731..41f340e 100644 --- a/core/flavors/_bourbon.scss +++ b/core/flavors/_bourbon.scss @@ -1,4 +1,3 @@ @import "../../flavors/bourbon/vars"; @import "../../flavors/bourbon/base"; @import "../../flavors/bourbon/skeleton"; -@import "../../flavors/bourbon/layout"; diff --git a/core/flavors/_compass.scss b/core/flavors/_compass.scss index a613c93..fb4df66 100644 --- a/core/flavors/_compass.scss +++ b/core/flavors/_compass.scss @@ -1,4 +1,3 @@ @import "../../flavors/compass/vars"; @import "../../flavors/compass/base"; @import "../../flavors/compass/skeleton"; -@import "../../flavors/compass/layout"; diff --git a/core/flavors/_sass.scss b/core/flavors/_sass.scss index 772d35e..b375650 100644 --- a/core/flavors/_sass.scss +++ b/core/flavors/_sass.scss @@ -1,4 +1,3 @@ @import "../../flavors/sass/vars"; @import "../../flavors/sass/base"; @import "../../flavors/sass/skeleton"; -@import "../../flavors/sass/layout"; diff --git a/flavors/bourbon/_layout.scss b/flavors/bourbon/_layout.scss deleted file mode 100644 index 85c15d9..0000000 --- a/flavors/bourbon/_layout.scss +++ /dev/null @@ -1,55 +0,0 @@ -/** - * SASS/SCSS/Compass Transcription of Skeleton Responsive Grid - * originally authored by Dave Gamache. This translation offers - * mixins that support fluid and as well as fixed grids to supplement - * the work that Dave Gamache has done. - * @author Dennis Thompson - * @copyright Copyright (c) 2013 AtomicPages LLC - * @license MIT - * @version 1.7.0 - */ - -// IMPORTS -@import "vars"; // import _global_variables.scss - -/* SITE STYLES - * ------------------------------------------------ */ -/* Add site styles here */ -/* For example: a { color: #000; } */ - -/* PAGE STYLES - * ------------------------------------------------ */ -/* Add page styles here */ -/* For example: .page-home { background: rgba(0, 0, 0, 0.4); } */ - -/* MEDIA QUERIES - * ------------------------------------------------ */ -/* Otherwise known as custom responsive code! Write it here! */ -@media only screen and (min-width: $baseWidthMQ) and (max-width: 1280px) { - /* add code here */ -} - -/* Smaller than standard #{strip-units($baseWidthMQ)} (devices and browsers) */ -@media only screen and (max-width: $baseWidthMQ - 1) { - /* add code here */ -} - -/* Tablet Portrait size to standard #{strip-units($baseWidthMQ)} (devices and browsers) */ -@media only screen and (min-width: $tabletWidth) and (max-width: $baseWidthMQ - 1) { - /* add code here */ -} - -/* All Mobile Sizes (devices and browser) */ -@media only screen and (max-width: $tabletWidth - 1) { - /* add code here */ -} - -/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ -@media only screen and (min-width: 480px) and (max-width: $tabletWidth - 1) { - /* add code here */ -} - -/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ -@media only screen and (max-width: 479px) { - /* add code here */ -} diff --git a/flavors/compass/_base.scss b/flavors/compass/_base.scss index 1ff9bab..0393a93 100644 --- a/flavors/compass/_base.scss +++ b/flavors/compass/_base.scss @@ -1,13 +1,4 @@ -/** - * SASS/SCSS/Compass Transcription of Skeleton Responsive Grid - * originally authored by Dave Gamache. This translation offers - * mixins that support fluid and as well as fixed grids to supplement - * the work that Dave Gamache has done. - * @author Dennis Thompson - * @copyright Copyright (c) 2013 AtomicPages LLC - * @license MIT - * @version 1.7.0 - */ +// Skeleton Sass base styles // IMPORTS @import "compass/css3"; @@ -20,15 +11,29 @@ /* BASIC STYLES * ------------------------------------------------ */ +html { + font-size: percentage(strip-units($baseFontSize) / 16); + overflow-y: scroll; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + line-height: 1.2; +} +*, +*:before, +*:after { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} body { background: $backgroundColor; font: { - size: $fontSize; family: $fontFamily; weight: normal; style: normal; } - line-height: $fontSize * 1.5; + @include font-size(14px); + line-height: $fontSize * 2.6; color: $fontColor; -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust: 100%; @@ -48,32 +53,32 @@ h4, h5, h6 { a { font-weight: inherit; } } h1 { - font-size: round($fontSize * 3.8333); - line-height: round($fontSize * 4.1666); - margin-bottom: round($fontSize * 1.1666); + @include font-size($fontSize * 3.8333); + line-height: $fontSize * 4.1666; + margin-bottom: $fontSize * 1.1666; } h2 { - font-size: round($fontSize * 2.9166); - line-height: round($fontSize * 3.333); - margin-bottom: round($fontSize * 0.833); + @include font-size($fontSize * 2.9166); + line-height: $fontSize * 3.333; + margin-bottom: $fontSize * 0.833; } h3 { - font-size: round($fontSize * 2.333); - line-height: round($fontSize * 2.833); - margin-bottom: round($fontSize * 0.666); + @include font-size($fontSize * 2.333); + line-height: $fontSize * 2.833; + margin-bottom: $fontSize * 0.666; } h4 { - font-size: round($fontSize * 1.75); - line-height: round($fontSize * 2.5); - margin-bottom: round($fontSize * 0.333); + @include font-size($fontSize * 1.75); + line-height: $fontSize * 2.5; + margin-bottom: $fontSize * 0.333; } h5 { - font-size: round($fontSize * 1.4166); + @include font-size($fontSize * 1.4166); line-height: $fontSize * 2; } h6 { - font-size: round($fontSize * 1.1666); - line-height: round($fontSize * 1.75); + @include font-size($fontSize * 1.1666); + line-height: $fontSize * 1.75; } .subheader { color: #777; } p { diff --git a/flavors/compass/_layout.scss b/flavors/compass/_layout.scss deleted file mode 100644 index 85c15d9..0000000 --- a/flavors/compass/_layout.scss +++ /dev/null @@ -1,55 +0,0 @@ -/** - * SASS/SCSS/Compass Transcription of Skeleton Responsive Grid - * originally authored by Dave Gamache. This translation offers - * mixins that support fluid and as well as fixed grids to supplement - * the work that Dave Gamache has done. - * @author Dennis Thompson - * @copyright Copyright (c) 2013 AtomicPages LLC - * @license MIT - * @version 1.7.0 - */ - -// IMPORTS -@import "vars"; // import _global_variables.scss - -/* SITE STYLES - * ------------------------------------------------ */ -/* Add site styles here */ -/* For example: a { color: #000; } */ - -/* PAGE STYLES - * ------------------------------------------------ */ -/* Add page styles here */ -/* For example: .page-home { background: rgba(0, 0, 0, 0.4); } */ - -/* MEDIA QUERIES - * ------------------------------------------------ */ -/* Otherwise known as custom responsive code! Write it here! */ -@media only screen and (min-width: $baseWidthMQ) and (max-width: 1280px) { - /* add code here */ -} - -/* Smaller than standard #{strip-units($baseWidthMQ)} (devices and browsers) */ -@media only screen and (max-width: $baseWidthMQ - 1) { - /* add code here */ -} - -/* Tablet Portrait size to standard #{strip-units($baseWidthMQ)} (devices and browsers) */ -@media only screen and (min-width: $tabletWidth) and (max-width: $baseWidthMQ - 1) { - /* add code here */ -} - -/* All Mobile Sizes (devices and browser) */ -@media only screen and (max-width: $tabletWidth - 1) { - /* add code here */ -} - -/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ -@media only screen and (min-width: 480px) and (max-width: $tabletWidth - 1) { - /* add code here */ -} - -/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ -@media only screen and (max-width: 479px) { - /* add code here */ -} diff --git a/flavors/sass/_layout.scss b/flavors/sass/_layout.scss deleted file mode 100644 index 3781b26..0000000 --- a/flavors/sass/_layout.scss +++ /dev/null @@ -1,53 +0,0 @@ -/** - * SASS/SCSS/Compass Transcription of Skeleton Responsive Grid - * originally authored by Dave Gamache. This translation offers - * mixins that support fluid and as well as fixed grids to supplement - * the work that Dave Gamache has done. - * @author Dennis Thompson - * @copyright Copyright (c) 2013 AtomicPages LLC - * @license MIT - * @version 1.7.0 - */ - -// IMPORTS -@import "vars"; // import _global_variables.scss - -/* SITE STYLES - * ------------------------------------------------ */ -/* Add site styles here such as a { color: #000; } */ - -/* PAGE STYLES - * ------------------------------------------------ */ -/* Add page styles here such as .home { background: rgba(0, 0, 0, 0.4); } */ - -/* MEDIA QUERIES - * ------------------------------------------------ */ -/* Otherwise known as custom responsive code! Write it here! */ -@media only screen and (min-width: $baseWidthMQ) and (max-width: 1280px) { - /* add code here */ -} - -/* Smaller than standard #{strip-units($baseWidthMQ)} (devices and browsers) */ -@media only screen and (max-width: $baseWidthMQ - 1) { - /* add code here */ -} - -/* Tablet Portrait size to standard #{strip-units($baseWidthMQ)} (devices and browsers) */ -@media only screen and (min-width: $tabletWidth) and (max-width: $baseWidthMQ - 1) { - /* add code here */ -} - -/* All Mobile Sizes (devices and browser) */ -@media only screen and (max-width: $tabletWidth - 1) { - /* add code here */ -} - -/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ -@media only screen and (min-width: 480px) and (max-width: $tabletWidth - 1) { - /* add code here */ -} - -/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ -@media only screen and (max-width: 479px) { - /* add code here */ -} diff --git a/skeleton_template.scss b/skeleton_template.scss index f3e8146..0fe4509 100644 --- a/skeleton_template.scss +++ b/skeleton_template.scss @@ -1,5 +1,27 @@ // Choose the your flavor of Skeleton Sass and compile // @import "core/flavors/bourbon"; // sass --update -C skeleton.scss:skeleton.css -// @import "core/flavors/compass"; // sass --update -C --compass skeleton.scss:skeleton.css -@import "core/flavors/sass"; // sass --update -C skeleton.scss:skeleton.css +@import "core/flavors/compass"; // sass --update -C --compass skeleton.scss:skeleton.css +// @import "core/flavors/sass"; // sass --update -C skeleton.scss:skeleton.css + +/* Add custom styles here */ + +/* MEDIA QUERIES + * ------------------------------------------------ */ +/* Large displays */ +@media only screen and (min-width: $baseWidthMQ) and (max-width: 1280px) { /* add code here */ } + +/* Smaller than standard #{strip-units($baseWidthMQ)} (devices and browsers) */ +@media only screen and (max-width: $baseWidthMQ - 1) { /* add code here */ } + +/* Tablet Portrait size to standard #{strip-units($baseWidthMQ)} (devices and browsers) */ +@media only screen and (min-width: $tabletWidth) and (max-width: $baseWidthMQ - 1) { /* add code here */ } + +/* All Mobile Sizes (devices and browser) */ +@media only screen and (max-width: $tabletWidth - 1) { /* add code here */ } + +/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ +@media only screen and (min-width: 480px) and (max-width: $tabletWidth - 1) { /* add code here */ } + +/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ +@media only screen and (max-width: 479px) { /* add code here */ }