diff --git a/bin/setup.sh b/bin/setup.sh index c7c9ef1..88c07ab 100755 --- a/bin/setup.sh +++ b/bin/setup.sh @@ -43,7 +43,7 @@ echo "Renaming skeleton_template to skeleton" mv skeleton_template.scss skeleton.scss echo "Adding user override to core/_config.scss" -echo "@import \"../_${name}.config.scss\"" >> core/_config.scss +echo "@import \"../../_${name}.config.scss\"" >> skeleton/core/_config.scss -echo "Done" +echo "Setup complete!" exit 0; diff --git a/bin/theme_setup.sh b/bin/theme_setup.sh index 18843fe..93537c3 100755 --- a/bin/theme_setup.sh +++ b/bin/theme_setup.sh @@ -38,17 +38,16 @@ done echo "Theme name is ${name}" echo "Creating required files and folders..." -touch core/bones/_${name}.scss; -echo "// ${name} theme created with love" > core/bones/_${name}.scss -echo "@import \"../../skeleton/${name}/vars\";" >> core/bones/_${name}.scss -echo "@import \"../../skeleton/${name}/base\";" >> core/bones/_${name}.scss -echo "@import \"../../skeleton/sphenoid/vars\"; // Override manually if you wish to create your own grid" >> core/bones/_${name}.scss -echo "core/bones/_${name}.scss has been created" +echo "// ${name} theme created with love using Skeleton Sass theme setup script!" > skeleton/themes/_loader.scss +echo "@import \"${name}/vars\";" >> skeleton/themes/_loader.scss +echo "@import \"${name}/base\";" >> skeleton/themes/_loader.scss +echo "@import \"sphenoid/skeleton\"; // Override manually if you wish to create your own grid" >> skeleton/themes/_loader.scss +echo "skeleton/themes/_loader.scss has been updated... moving on" -mkdir -p skeleton/${name}/marrow -cp skeleton/demo/_base.scss skeleton/${name} -cp skeleton/demo/_vars.scss skeleton/${name} +mkdir -p skeleton/themes/${name}/marrow +cp skeleton/themes/demo/_base.scss skeleton/themes/${name} +cp skeleton/themes/demo/_vars.scss skeleton/themes/${name} echo "Use Bourbon? [y/n]" read ans @@ -121,15 +120,9 @@ if [ $bourbon -eq 1 ]; then fi done } - bourbon install --path=skeleton/${name}/ - cp skeleton/demo/_bourbon.scss skeleton/${name} - sed -i "" -e $'8 a\\\n'"@import \"bourbon\";" skeleton/${name}/_vars.scss + bourbon install --path=skeleton/themes/${name}/ + sed -i "" -e $'8 a\\\n'"@import \"bourbon/bourbon\";" skeleton/themes/${name}/_vars.scss fi -skeleton=$(ls | grep skeleton_*.scss) - -sed -i "" '/sphenoid/d' $skeleton -sed -i "" -e $'10 a\\\n'"@import \"core/bones/${name}\"; // compile with sass --update -C ${skeleton}.scss:${skeleton}.css" $skeleton - echo "Theme setup complete!" exit 0 diff --git a/bin/upgrade b/bin/upgrade index 1e0d0a5..52cca8c 100755 --- a/bin/upgrade +++ b/bin/upgrade @@ -10,6 +10,7 @@ fi echo "Disclaimer: this utility it meant to aid in upgrading from Skeleton Sass 1.x to Skeleton Sass 2.x. If you have followed the wiki articles then please do not use this script without a clean installation of Skeleton Sass 2.x. We, AtomicPages LLC, are not responsible for any unforeseen events that arise by using this script. Please follow the prompts.\n" echo "Did you add the contents from _vars.scss in Skeleton Sass 1.x to _MYconfig.scss in Skeleton Sass 2.x? [y/n]" +echo "Note: If you ran the setup utility, your global configuration name might differ" read ans if [[ ($ans != "y") && ($ans != "Y") && ($ans != "YES") && ($ans != "yes") ]]; then @@ -51,5 +52,5 @@ if [[ ($ans != "n") && ($ans != "N") && ($ans != "no") && ($ans != "No") && ($an exit 0 fi -echo "Upgrade is complete! Rename _MYconfig.scss to a different name and import that file into core/_config.scss" +echo "Upgrade is complete! Rename _MYconfig.scss to a different name if you haven't done so already and import that file into core/_config.scss. You may also run bin/setup.sh from command line to automate this task." exit 0 diff --git a/core/bones/_sphenoid.scss b/core/bones/_sphenoid.scss deleted file mode 100644 index af6c084..0000000 --- a/core/bones/_sphenoid.scss +++ /dev/null @@ -1,5 +0,0 @@ -// Sphenoid theme, the default theme packaged with Skeleton Sass - -@import "../../skeleton/sphenoid/vars"; -@import "../../skeleton/sphenoid/base"; -@import "../../skeleton/sphenoid/skeleton"; diff --git a/core/_config.scss b/skeleton/core/_config.scss similarity index 100% rename from core/_config.scss rename to skeleton/core/_config.scss diff --git a/core/_dependencies.scss b/skeleton/core/_dependencies.scss similarity index 100% rename from core/_dependencies.scss rename to skeleton/core/_dependencies.scss diff --git a/core/_functions.scss b/skeleton/core/_functions.scss similarity index 100% rename from core/_functions.scss rename to skeleton/core/_functions.scss diff --git a/core/_mixins.scss b/skeleton/core/_mixins.scss similarity index 100% rename from core/_mixins.scss rename to skeleton/core/_mixins.scss diff --git a/skeleton/css/base.css b/skeleton/css/base.css deleted file mode 100644 index 8e1a70f..0000000 --- a/skeleton/css/base.css +++ /dev/null @@ -1,441 +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 - */ -/* RESET & BASICS (Inspired by E. Meyers) - * ------------------------------------------------ */ -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; } - -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; } - -body { - line-height: 1; } - -ol, ul { - list-style: none; } - -blockquote, q { - quotes: none; } - blockquote:before, blockquote:after, q:before, q:after { - content: ""; - content: none; } - -table { - border-collapse: collapse; - border-spacing: 0; } - -/* BASIC STYLES - * ------------------------------------------------ */ -body { - background: white; - font-size: 14px; - font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - font-weight: normal; - font-style: normal; - line-height: 21px; - color: #444444; - -webkit-font-smoothing: antialiased; - /* Fix for webkit rendering */ - -webkit-text-size-adjust: 100%; } - -/* TYPOGRAPHY - * ------------------------------------------------ */ -h1, h2, h3, h4, h5, h6 { - color: #181818; - font-family: "Georgia", "Times New Roman", serif; - font-weight: normal; } - -h1 a, h2 a, h3 a, -h4 a, h5 a, h6 a { - font-weight: inherit; } - -h1 { - font-size: 54px; - line-height: 58px; - margin-bottom: 16px; } - -h2 { - font-size: 41px; - line-height: 47px; - margin-bottom: 12px; } - -h3 { - font-size: 33px; - line-height: 40px; - margin-bottom: 9px; } - -h4 { - font-size: 25px; - line-height: 35px; - margin-bottom: 5px; } - -h5 { - font-size: 20px; - line-height: 28px; } - -h6 { - font-size: 16px; - line-height: 25px; } - -.subheader { - color: #777; } - -p { - margin: 0 0 20px 0; } - p img { - margin: 0; } - p.lead { - font-size: 25px; - line-height: 32px; - color: #777; } - -em, i { - font-style: italic; } - -strong, b { - font-weight: bold; - color: #333; } - -u { - text-decoration: underline; } - -small { - font-size: 80%; } - -/* Blockquotes */ -blockquote, blockquote p { - font-size: 20px; - line-height: 28px; - color: #777; - font-style: italic; } - -blockquote { - margin: 0 0 20px; - padding: 9px 20px 0 19px; - border-left: 1px solid #ddd; } - -blockquote cite { - display: block; - font-size: 14px; - color: #555; } - blockquote cite:before { - content: "\2014 \0020"; } - blockquote cite a, blockquote cite a:visited { - color: #555; } - -hr { - border-style: solid; - border-color: #ddd; - border-width: 1px 0 0; - clear: both; - margin: 10px 0 30px; - height: 0; } - -/* LINKS - * ------------------------------------------------ */ -a, a:visited { - color: #333333; - text-decoration: underline; - outline: 0; } - -a:hover, a:focus, a:active { - color: black; } - -p a, p a:visited { - line-height: inherit; } - -/* LISTS - * ------------------------------------------------ */ -ul, -ol { - margin-bottom: 20px; } - -ul { - list-style: none outside; } - -ol { - list-style: decimal; } - -ol, ul.square, -ul.circle, ul.disc { - margin-left: 30px; } - -ul.square { - list-style: square outside; } - -ul.circle { - list-style: circle outside; } - -ul.disc { - list-style: disc outside; } - -ul ul, ul ol, -ol ol, ol ul { - margin-top: 4px; - margin-right: 0; - margin-bottom: 5px; - margin-left: 30px; - font-size: 90%; } - -ul ul li, ul ol li, -ol ol li, ol ul li { - margin-bottom: 6px; } - -li { - line-height: 18px; - margin-bottom: 12px; } - -ul.large li { - line-height: 21px; } - -li p { - line-height: 21px; } - -/* IMAGES - * ------------------------------------------------ */ -img.scale-with-grid { - max-width: 100%; - height: auto; } - -/* BUTTONS - * ------------------------------------------------ */ -.button, -button, -input[type="submit"], -input[type="reset"], -input[type="button"] { - background: #eeeeee -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(0, 0, 0, 0.2))); - background: #eeeeee -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); - background: #eeeeee -moz-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); - background: #eeeeee -o-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); - background: #eeeeee linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%); - border: 1px solid #aaa; - border-top: 1px solid #ccc; - border-left: 1px solid #ccc; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - -ms-border-radius: 3px; - -o-border-radius: 3px; - border-radius: 3px; - color: #444; - display: inline-block; - font-size: 13px; - font-weight: bold; - font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - text-decoration: none; - text-shadow: 0 1px rgba(255, 255, 255, 0.75); - cursor: pointer; - line-height: normal; - padding: 8px 10px; } - .button:hover, - button:hover, - input[type="submit"]:hover, - input[type="reset"]:hover, - input[type="button"]:hover { - color: #222; - background: #dddddd -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(0, 0, 0, 0.3))); - background: #dddddd -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%); - background: #dddddd -moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%); - background: #dddddd -o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%); - background: #dddddd linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%); - border: 1px solid #888; - border-top-color: #aaa; - border-left-color: #aaa; } - .button:active, - button:active, - input[type="submit"]:active, - input[type="reset"]:active, - input[type="button"]:active { - border: 1px solid #666; - background: #cccccc -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.35)), color-stop(100%, rgba(10, 10, 10, 0.4))); - background: #cccccc -webkit-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%); - background: #cccccc -moz-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%); - background: #cccccc -o-linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%); - background: #cccccc linear-gradient(top, rgba(255, 255, 255, 0.35) 0%, rgba(10, 10, 10, 0.4) 100%); } - .button.full-width, - button.full-width, - input[type="submit"].full-width, - input[type="reset"].full-width, - input[type="button"].full-width { - width: 100%; - padding-left: 0 !important; - padding-right: 0 !important; - text-align: center; } - .button.smaller, - button.smaller, - input[type="submit"].smaller, - input[type="reset"].smaller, - input[type="button"].smaller { - font-size: 12px; - padding: 4px 5px; } - .button.larger, - button.larger, - input[type="submit"].larger, - input[type="reset"].larger, - input[type="button"].larger { - font-size: 16px; - padding: 10px 18px; } - -/* Fix for odd Mozilla border & padding issues */ -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; } - -/* FORMS - * ------------------------------------------------ */ -form { - margin-bottom: 20px; } - -fieldset { - margin-bottom: 20px; } - -input[type="text"], -input[type="password"], -input[type="email"], -input[type="search"], -input[type="url"], -input[type="tel"], -input[type="date"], -input[type="datetime"], -input[type="datetime-local"], -input[type="month"], -input[type="week"], -input[type="time"], -input[type="number"], -textarea, -select { - background: #fff; - border: 1px solid #ccc; - padding: 6px 4px; - outline: none; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - -ms-border-radius: 2px; - -o-border-radius: 2px; - border-radius: 2px; - font-size: 15px; - font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; - color: #777; - margin: 0 0 20px; - width: 210px; - max-width: 100%; - display: block; } - input[type="text"]:hover, input[type="text"]:focus, - input[type="password"]:hover, - input[type="password"]:focus, - input[type="email"]:hover, - input[type="email"]:focus, - input[type="search"]:hover, - input[type="search"]:focus, - input[type="url"]:hover, - input[type="url"]:focus, - input[type="tel"]:hover, - input[type="tel"]:focus, - input[type="date"]:hover, - input[type="date"]:focus, - input[type="datetime"]:hover, - input[type="datetime"]:focus, - input[type="datetime-local"]:hover, - input[type="datetime-local"]:focus, - input[type="month"]:hover, - input[type="month"]:focus, - input[type="week"]:hover, - input[type="week"]:focus, - input[type="time"]:hover, - input[type="time"]:focus, - input[type="number"]:hover, - input[type="number"]:focus, - textarea:hover, - textarea:focus, - select:hover, - select:focus { - border: 1px solid #aaa; - color: #444; - -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); - -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); - box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); } - input[type="text"]:active, - input[type="password"]:active, - input[type="email"]:active, - input[type="search"]:active, - input[type="url"]:active, - input[type="tel"]:active, - input[type="date"]:active, - input[type="datetime"]:active, - input[type="datetime-local"]:active, - input[type="month"]:active, - input[type="week"]:active, - input[type="time"]:active, - input[type="number"]:active, - textarea:active, - select:active { - border: 1px solid #909090; - -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); - -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); - box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); } - -select { - padding: 0; } - -textarea { - min-height: 60px; } - -label, -legend { - display: block; - font-size: 15px; - font-weight: bold; } - -select { - width: 220px; } - -input[type="checkbox"] { - display: inline; } - -label span, -legend span { - font-size: 15px; - font-weight: normal; - color: #444; } - -/* MISC - * ------------------------------------------------ */ -.subtract-bottom { - margin-bottom: -20px !important; } - -.remove-bottom { - margin-bottom: 0 !important; } - -.half-bottom { - margin-bottom: 10px !important; } - -.add-bottom { - margin-bottom: 20px !important; } diff --git a/skeleton/css/layout.css b/skeleton/css/layout.css deleted file mode 100644 index 42f129f..0000000 --- a/skeleton/css/layout.css +++ /dev/null @@ -1,36 +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 - */ -/* 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: 960px) and (max-width: 1280px) { - /* add code here */ } -/* Smaller than standard 960 (devices and browsers) */ -@media only screen and (max-width: 959px) { - /* add code here */ } -/* Tablet Portrait size to standard 960 (devices and browsers) */ -@media only screen and (min-width: 768px) and (max-width: 959px) { - /* add code here */ } -/* All Mobile Sizes (devices and browser) */ -@media only screen and (max-width: 767px) { - /* add code here */ } -/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ -@media only screen and (min-width: 480px) and (max-width: 767px) { - /* 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/css/skeleton-12.css b/skeleton/css/skeleton-12.css deleted file mode 100644 index c859029..0000000 --- a/skeleton/css/skeleton-12.css +++ /dev/null @@ -1,229 +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 - */ -/* BASE GRID - * ------------------------------------------------ */ -.container { - position: relative; - width: 960px; - margin: 0 auto; - padding: 0; } - .container .column, - .container .columns { - float: left; - display: inline; - position: relative; } - .container .column.alpha, - .container .columns.alpha { - margin-left: 0; } - .container .column.omega, - .container .columns.omega { - margin-right: 0; } - -.row { - margin-bottom: 20px; } - -.container .column, -.container .columns { - margin-left: 10px; - margin-right: 10px; } - -/* The Grid */ -.container .one.column, -.container .one.columns { - width: 60px; } -.container .two.columns { - width: 140px; } -.container .three.columns { - width: 220px; } -.container .four.columns { - width: 300px; } -.container .five.columns { - width: 380px; } -.container .six.columns { - width: 460px; } -.container .seven.columns { - width: 540px; } -.container .eight.columns { - width: 620px; } -.container .nine.columns { - width: 700px; } -.container .ten.columns { - width: 780px; } -.container .eleven.columns { - width: 860px; } -.container .twelve.columns { - width: 940px; } -.container .one-third.column { - width: 300px; } -.container .two-thirds.column { - width: 620px; } -.container .offset-by-one { - padding-left: 80px; } -.container .offset-by-two { - padding-left: 160px; } -.container .offset-by-three { - padding-left: 240px; } -.container .offset-by-four { - padding-left: 320px; } -.container .offset-by-five { - padding-left: 400px; } -.container .offset-by-six { - padding-left: 480px; } -.container .offset-by-seven { - padding-left: 560px; } -.container .offset-by-eight { - padding-left: 640px; } -.container .offset-by-nine { - padding-left: 720px; } -.container .offset-by-ten { - padding-left: 800px; } -.container .offset-by-eleven { - padding-left: 880px; } - -/* TABLET (PORTRAIT) - * ------------------------------------------------ */ -@media only screen and (min-width: 768px) and (max-width: 959px) { - .container { - width: 768px; } - .container .column.alpha, .container .columns.alpha { - margin-left: 0; - margin-right: 10px; } - .container .column.omega, .container .columns.omega { - margin-right: 0; - margin-left: 10px; } - - .alpha.omega { - margin-left: 0; - margin-right: 0; } - - .container .column, - .container .columns { - margin-left: 10px; - margin-right: 10px; } - - /* The Grid */ - .container .one.column, - .container .one.columns { - width: 44px; } - .container .two.columns { - width: 108px; } - .container .three.columns { - width: 172px; } - .container .four.columns { - width: 236px; } - .container .five.columns { - width: 300px; } - .container .six.columns { - width: 364px; } - .container .seven.columns { - width: 428px; } - .container .eight.columns { - width: 492px; } - .container .nine.columns { - width: 556px; } - .container .ten.columns { - width: 620px; } - .container .eleven.columns { - width: 684px; } - .container .twelve.columns { - width: 748px; } - .container .one-third.column { - width: 236px; } - .container .two-thirds.column { - width: 492px; } - .container .offset-by-one { - padding-left: 64px; } - .container .offset-by-two { - padding-left: 128px; } - .container .offset-by-three { - padding-left: 192px; } - .container .offset-by-four { - padding-left: 256px; } - .container .offset-by-five { - padding-left: 320px; } - .container .offset-by-six { - padding-left: 384px; } - .container .offset-by-seven { - padding-left: 448px; } - .container .offset-by-eight { - padding-left: 512px; } - .container .offset-by-nine { - padding-left: 576px; } - .container .offset-by-ten { - padding-left: 640px; } - .container .offset-by-eleven { - padding-left: 704px; } } -/* MOBILE (PORTRAIT) - * ------------------------------------------------ */ -@media only screen and (max-width: 767px) { - .container { - width: 300px; } - .container .column, - .container .columns { - margin-left: 0; - margin-right: 0; } - .container .one.column { - width: 300px; } - .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns { - width: 300px; } - .container .one-third.column { - width: 300px; } - .container .two-thirds.column { - width: 300px; } - .container .offset-by-one, .container .offset-by-two, .container .offset-by-three, .container .offset-by-four, .container .offset-by-five, .container .offset-by-six, .container .offset-by-seven, .container .offset-by-eight, .container .offset-by-nine, .container .offset-by-ten, .container .offset-by-eleven, .container .offset-by-twelve, .container .offset-by-thirteen, .container .offset-by-fourteen, .container .offset-by-fifteen { - padding-left: 0; } } -/* MOBILE (LANDSCAPE) - * ------------------------------------------------ */ -@media only screen and (min-width: 480px) and (max-width: 767px) { - .container { - width: 420px; } - .container .column, - .container .columns { - margin-left: 0; - margin-right: 0; } - .container .one.column { - width: 420px; } - .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns { - width: 420px; } - .container .one-third.column { - width: 420px; } - .container .two-thirds.column { - width: 420px; } - .container .offset-by-one, .container .offset-by-two, .container .offset-by-three, .container .offset-by-four, .container .offset-by-five, .container .offset-by-six, .container .offset-by-seven, .container .offset-by-eight, .container .offset-by-nine, .container .offset-by-ten, .container .offset-by-eleven, .container .offset-by-twelve, .container .offset-by-thirteen, .container .offset-by-fourteen, .container .offset-by-fifteen { - padding-left: 0; } } -/* CLEARING - * ------------------------------------------------ */ -.container:after { - content: "\0020"; - display: block; - height: 0; - clear: both; - visibility: hidden; } - -.clearfix, .row { - zoom: 1; } - .clearfix:before, .clearfix:after, .row:before, .row:after { - content: "\0020"; - display: block; - overflow: hidden; - visibility: hidden; - width: 0; - height: 0; } - .clearfix:after, .row:after { - clear: both; } - -.clear { - clear: both; - display: block; - overflow: hidden; - visibility: hidden; - width: 0; - height: 0; } diff --git a/skeleton/css/skeleton-20.css b/skeleton/css/skeleton-20.css deleted file mode 100644 index d39120d..0000000 --- a/skeleton/css/skeleton-20.css +++ /dev/null @@ -1,293 +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 - */ -/* BASE GRID - * ------------------------------------------------ */ -.container { - position: relative; - width: 960px; - margin: 0 auto; - padding: 0; } - .container .column, - .container .columns { - float: left; - display: inline; - position: relative; } - .container .column.alpha, - .container .columns.alpha { - margin-left: 0; } - .container .column.omega, - .container .columns.omega { - margin-right: 0; } - -.row { - margin-bottom: 20px; } - -.container .column, -.container .columns { - margin-left: 10px; - margin-right: 10px; } - -/* The Grid */ -.container .one.column, -.container .one.columns { - width: 28px; } -.container .two.columns { - width: 76px; } -.container .three.columns { - width: 124px; } -.container .four.columns { - width: 172px; } -.container .five.columns { - width: 220px; } -.container .six.columns { - width: 268px; } -.container .seven.columns { - width: 316px; } -.container .eight.columns { - width: 364px; } -.container .nine.columns { - width: 412px; } -.container .ten.columns { - width: 460px; } -.container .eleven.columns { - width: 508px; } -.container .twelve.columns { - width: 556px; } -.container .thirteen.columns { - width: 604px; } -.container .fourteen.columns { - width: 652px; } -.container .fifteen.columns { - width: 700px; } -.container .sixteen.columns { - width: 748px; } -.container .seventeen.columns { - width: 796px; } -.container .eighteen.columns { - width: 844px; } -.container .nineteen.columns { - width: 892px; } -.container .twenty.columns { - width: 940px; } -.container .one-third.column { - width: 300px; } -.container .two-thirds.column { - width: 620px; } -.container .offset-by-one { - padding-left: 48px; } -.container .offset-by-two { - padding-left: 96px; } -.container .offset-by-three { - padding-left: 144px; } -.container .offset-by-four { - padding-left: 192px; } -.container .offset-by-five { - padding-left: 240px; } -.container .offset-by-six { - padding-left: 288px; } -.container .offset-by-seven { - padding-left: 336px; } -.container .offset-by-eight { - padding-left: 384px; } -.container .offset-by-nine { - padding-left: 432px; } -.container .offset-by-ten { - padding-left: 480px; } -.container .offset-by-eleven { - padding-left: 528px; } -.container .offset-by-twelve { - padding-left: 576px; } -.container .offset-by-thirteen { - padding-left: 624px; } -.container .offset-by-fourteen { - padding-left: 672px; } -.container .offset-by-fifteen { - padding-left: 720px; } -.container .offset-by-sixteen { - padding-left: 768px; } -.container .offset-by-seventeen { - padding-left: 816px; } -.container .offset-by-eighteen { - padding-left: 864px; } -.container .offset-by-nineteen { - padding-left: 912px; } - -/* TABLET (PORTRAIT) - * ------------------------------------------------ */ -@media only screen and (min-width: 768px) and (max-width: 959px) { - .container { - width: 768px; } - .container .column.alpha, .container .columns.alpha { - margin-left: 0; - margin-right: 10px; } - .container .column.omega, .container .columns.omega { - margin-right: 0; - margin-left: 10px; } - - .alpha.omega { - margin-left: 0; - margin-right: 0; } - - .container .column, - .container .columns { - margin-left: 10px; - margin-right: 10px; } - - /* The Grid */ - .container .one.column, - .container .one.columns { - width: 18.4px; } - .container .two.columns { - width: 56.8px; } - .container .three.columns { - width: 95.2px; } - .container .four.columns { - width: 133.6px; } - .container .five.columns { - width: 172px; } - .container .six.columns { - width: 210.4px; } - .container .seven.columns { - width: 248.8px; } - .container .eight.columns { - width: 287.2px; } - .container .nine.columns { - width: 325.6px; } - .container .ten.columns { - width: 364.0px; } - .container .eleven.columns { - width: 402.4px; } - .container .twelve.columns { - width: 440.8px; } - .container .thirteen.columns { - width: 479.2px; } - .container .fourteen.columns { - width: 517.6px; } - .container .fifteen.columns { - width: 556px; } - .container .sixteen.columns { - width: 594.4px; } - .container .seventeen.columns { - width: 632.8px; } - .container .eighteen.columns { - width: 671.2px; } - .container .nineteen.columns { - width: 709.6px; } - .container .twenty.columns { - width: 748px; } - .container .one-third.column { - width: 236px; } - .container .two-thirds.column { - width: 492px; } - .container .offset-by-one { - padding-left: 38.4px; } - .container .offset-by-two { - padding-left: 76.8px; } - .container .offset-by-three { - padding-left: 115.2px; } - .container .offset-by-four { - padding-left: 153.6px; } - .container .offset-by-five { - padding-left: 192px; } - .container .offset-by-six { - padding-left: 230.4px; } - .container .offset-by-seven { - padding-left: 268.8px; } - .container .offset-by-eight { - padding-left: 307.2px; } - .container .offset-by-nine { - padding-left: 345.6px; } - .container .offset-by-ten { - padding-left: 384px; } - .container .offset-by-eleven { - padding-left: 422.4px; } - .container .offset-by-twelve { - padding-left: 460.8px; } - .container .offset-by-thirteen { - padding-left: 499.2px; } - .container .offset-by-fourteen { - padding-left: 537.6px; } - .container .offset-by-fifteen { - padding-left: 576px; } - .container .offset-by-sixteen { - padding-left: 614.4px; } - .container .offset-by-seventeen { - padding-left: 652.8px; } - .container .offset-by-eighteen { - padding-left: 691.2px; } - .container .offset-by-nineteen { - padding-left: 729.6px; } } -/* MOBILE (PORTRAIT) - * ------------------------------------------------ */ -@media only screen and (max-width: 767px) { - .container { - width: 300px; } - .container .column, - .container .columns { - margin-left: 0; - margin-right: 0; } - .container .one.column { - width: 300px; } - .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns { - width: 300px; } - .container .one-third.column { - width: 300px; } - .container .two-thirds.column { - width: 300px; } - .container .offset-by-one, .container .offset-by-two, .container .offset-by-three, .container .offset-by-four, .container .offset-by-five, .container .offset-by-six, .container .offset-by-seven, .container .offset-by-eight, .container .offset-by-nine, .container .offset-by-ten, .container .offset-by-eleven, .container .offset-by-twelve, .container .offset-by-thirteen, .container .offset-by-fourteen, .container .offset-by-fifteen { - padding-left: 0; } } -/* MOBILE (LANDSCAPE) - * ------------------------------------------------ */ -@media only screen and (min-width: 480px) and (max-width: 767px) { - .container { - width: 420px; } - .container .column, - .container .columns { - margin-left: 0; - margin-right: 0; } - .container .one.column { - width: 420px; } - .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns { - width: 420px; } - .container .one-third.column { - width: 420px; } - .container .two-thirds.column { - width: 420px; } - .container .offset-by-one, .container .offset-by-two, .container .offset-by-three, .container .offset-by-four, .container .offset-by-five, .container .offset-by-six, .container .offset-by-seven, .container .offset-by-eight, .container .offset-by-nine, .container .offset-by-ten, .container .offset-by-eleven, .container .offset-by-twelve, .container .offset-by-thirteen, .container .offset-by-fourteen, .container .offset-by-fifteen { - padding-left: 0; } } -/* CLEARING - * ------------------------------------------------ */ -.container:after { - content: "\0020"; - display: block; - height: 0; - clear: both; - visibility: hidden; } - -.clearfix, .row { - zoom: 1; } - .clearfix:before, .clearfix:after, .row:before, .row:after { - content: "\0020"; - display: block; - overflow: hidden; - visibility: hidden; - width: 0; - height: 0; } - .clearfix:after, .row:after { - clear: both; } - -.clear { - clear: both; - display: block; - overflow: hidden; - visibility: hidden; - width: 0; - height: 0; } diff --git a/skeleton/css/skeleton-fluid.css b/skeleton/css/skeleton-fluid.css deleted file mode 100644 index 5c038a8..0000000 --- a/skeleton/css/skeleton-fluid.css +++ /dev/null @@ -1,214 +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 - */ - -/* BASE GRID - * ------------------------------------------------ */ -.container { - position: relative; - width: 960px; - margin: 0 auto; - padding: 0; -} -.container .column, -.container .columns { - float: left; - display: inline; - position: relative; -} -.container .column.alpha, -.container .columns.alpha { margin-left: 0; } -.container .column.omega, -.container .columns.omega { margin-right: 0; } -.row { margin-bottom: 20px; } -/* Overrides */ -.container .column, - .container .columns { - margin-left: 1%; - margin-right: 1%; -} -.container .one.column, -.container .one.columns { width: 4.25%; } -.container .two.columns { width: 10.5%; } -.container .three.columns { width: 16.75%; } -.container .four.columns { width: 23%; } -.container .five.columns { width: 29.25%; } -.container .six.columns { width: 35.5%; } -.container .seven.columns { width: 41.75%; } -.container .eight.columns { width: 48%; } -.container .nine.columns { width: 54.25%; } -.container .ten.columns { width: 60.5%; } -.container .eleven.columns { width: 66.75%; } -.container .twelve.columns { width: 73%; } -.container .thirteen.columns { width: 79.25%; } -.container .fourteen.columns { width: 85.5%; } -.container .fifteen.columns { width: 91.75%; } -.container .sixteen.columns { width: 98%; } -.container .columns.one-third { width: 30.66667%; } -.container .columns.two-thirds { width: 63.33333%; } -.container .offset-by-one { padding-left: 6.25%; } -.container .offset-by-two { padding-left: 12.5%; } -.container .offset-by-three { padding-left: 18.75%; } -.container .offset-by-four { padding-left: 25%; } -.container .offset-by-five { padding-left: 31.25%; } -.container .offset-by-six { padding-left: 37.5%; } -.container .offset-by-seven { padding-left: 43.75%; } -.container .offset-by-eight { padding-left: 50%; } -.container .offset-by-nine { padding-left: 56.25%; } -.container .offset-by-ten { padding-left: 62.5%; } -.container .offset-by-eleven { padding-left: 68.75%; } -.container .offset-by-twelve { padding-left: 75%; } -.container .offset-by-thirteen { padding-left: 81.25%; } -.container .offset-by-fourteen { padding-left: 87.5%; } -.container .offset-by-fifteen { padding-left: 93.75%; } - -/* TABLET (PORTRAIT) - * ------------------------------------------------ */ -@media only screen and (min-width: 768px) and (max-width: 959px) { - .container { width: 768px; } - .container .column.alpha, - .container .columns.alpha { - margin-left: 0; - margin-right: 10px; - } - .container .column.omega, - .container .columns.omega { - margin-right: 0; - margin-left: 10px; - } - .alpha.omega { - margin-left: 0; - margin-right: 0; - } -} - -/* MOBILE (PORTRAIT) - * ------------------------------------------------ */ -@media only screen and (max-width: 767px) { - .container { width: 300px; } - .container .column, - .container .columns { - margin-left: 0; - margin-right: 0; - } - .container .one.column { width: 300px; } - .container .one.columns, - .container .two.columns, - .container .three.columns, - .container .four.columns, - .container .five.columns, - .container .six.columns, - .container .seven.columns, - .container .eight.columns, - .container .nine.columns, - .container .ten.columns, - .container .eleven.columns, - .container .twelve.columns, - .container .thirteen.columns, - .container .fourteen.columns, - .container .fifteen.columns, - .container .sixteen.columns { width: 300px; } - .container .one-third.column { width: 300px; } - .container .two-thirds.column { width: 300px; } - .container .offset-by-one, - .container .offset-by-two, - .container .offset-by-three, - .container .offset-by-four, - .container .offset-by-five, - .container .offset-by-six, - .container .offset-by-seven, - .container .offset-by-eight, - .container .offset-by-nine, - .container .offset-by-ten, - .container .offset-by-eleven, - .container .offset-by-twelve, - .container .offset-by-thirteen, - .container .offset-by-fourteen, - .container .offset-by-fifteen { padding-left: 0; } -} - -/* MOBILE (LANDSCAPE) - * ------------------------------------------------ */ -@media only screen and (min-width: 480px) and (max-width: 767px) { - .container { width: 420px; } - .container .column, - .container .columns { - margin-left: 0; - margin-right: 0; - } - .container .one.column { width: 420px; } - .container .one.columns, - .container .two.columns, - .container .three.columns, - .container .four.columns, - .container .five.columns, - .container .six.columns, - .container .seven.columns, - .container .eight.columns, - .container .nine.columns, - .container .ten.columns, - .container .eleven.columns, - .container .twelve.columns, - .container .thirteen.columns, - .container .fourteen.columns, - .container .fifteen.columns, - .container .sixteen.columns { width: 420px; } - .container .one-third.column { width: 420px; } - .container .two-thirds.column { width: 420px; } - .container .offset-by-one, - .container .offset-by-two, - .container .offset-by-three, - .container .offset-by-four, - .container .offset-by-five, - .container .offset-by-six, - .container .offset-by-seven, - .container .offset-by-eight, - .container .offset-by-nine, - .container .offset-by-ten, - .container .offset-by-eleven, - .container .offset-by-twelve, - .container .offset-by-thirteen, - .container .offset-by-fourteen, - .container .offset-by-fifteen { padding-left: 0; } - -} - -/* CLEARING - * ------------------------------------------------ */ -.container:after { - content: "\0020"; - display: block; - height: 0; - clear: both; - visibility: hidden; -} -.clearfix, - .row { zoom: 1; } -.clearfix:before, - .clearfix:after, - .row:before, - .row:after { - content: "\0020"; - display: block; - overflow: hidden; - visibility: hidden; - width: 0; - height: 0; -} -.clearfix:after, - .row:after { clear: both; } -.clear { - clear: both; - display: block; - overflow: hidden; - visibility: hidden; - width: 0; - height: 0; -} diff --git a/skeleton/demo/_bourbon.scss b/skeleton/demo/_bourbon.scss deleted file mode 100644 index 22d9b43..0000000 --- a/skeleton/demo/_bourbon.scss +++ /dev/null @@ -1,59 +0,0 @@ -// Custom Helpers -@import "bourbon/helpers/deprecated-webkit-gradient"; -@import "bourbon/helpers/gradient-positions-parser"; -@import "bourbon/helpers/linear-positions-parser"; -@import "bourbon/helpers/radial-arg-parser"; -@import "bourbon/helpers/radial-positions-parser"; -@import "bourbon/helpers/render-gradients"; -@import "bourbon/helpers/shape-size-stripper"; - -// Custom Functions -@import "bourbon/functions/compact"; -@import "bourbon/functions/flex-grid"; -@import "bourbon/functions/grid-width"; -@import "bourbon/functions/linear-gradient"; -@import "bourbon/functions/modular-scale"; -@import "bourbon/functions/px-to-em"; -@import "bourbon/functions/radial-gradient"; -@import "bourbon/functions/tint-shade"; -@import "bourbon/functions/transition-property-name"; - -// CSS3 Mixins -@import "bourbon/css3/animation"; -@import "bourbon/css3/appearance"; -@import "bourbon/css3/backface-visibility"; -@import "bourbon/css3/background"; -@import "bourbon/css3/background-image"; -@import "bourbon/css3/border-image"; -@import "bourbon/css3/border-radius"; -@import "bourbon/css3/box-sizing"; -@import "bourbon/css3/columns"; -@import "bourbon/css3/flex-box"; -@import "bourbon/css3/font-face"; -@import "bourbon/css3/hidpi-media-query"; -@import "bourbon/css3/image-rendering"; -@import "bourbon/css3/inline-block"; -@import "bourbon/css3/keyframes"; -@import "bourbon/css3/linear-gradient"; -@import "bourbon/css3/perspective"; -@import "bourbon/css3/radial-gradient"; -@import "bourbon/css3/transform"; -@import "bourbon/css3/transition"; -@import "bourbon/css3/user-select"; -@import "bourbon/css3/placeholder"; - -// Addons & other mixins -@import "bourbon/addons/button"; -@import "bourbon/addons/clearfix"; -@import "bourbon/addons/font-family"; -@import "bourbon/addons/hide-text"; -@import "bourbon/addons/html5-input-types"; -@import "bourbon/addons/position"; -@import "bourbon/addons/prefixer"; -@import "bourbon/addons/retina-image"; -@import "bourbon/addons/size"; -@import "bourbon/addons/timing-functions"; -@import "bourbon/addons/triangle"; - -// Soon to be deprecated Mixins -@import "bourbon/bourbon-deprecated-upcoming"; diff --git a/skeleton/themes/_loader.scss b/skeleton/themes/_loader.scss new file mode 100644 index 0000000..6447551 --- /dev/null +++ b/skeleton/themes/_loader.scss @@ -0,0 +1,5 @@ +// Sphenoid is the default theme bundled with Skeleton Sass. Add your theme here! + +@import "sphenoid/vars"; +@import "sphenoid/base"; +@import "sphenoid/skeleton"; // Override manually if you wish to create your own grid diff --git a/skeleton/demo/_base.scss b/skeleton/themes/demo/_base.scss similarity index 100% rename from skeleton/demo/_base.scss rename to skeleton/themes/demo/_base.scss diff --git a/skeleton/demo/_vars.scss b/skeleton/themes/demo/_vars.scss similarity index 100% rename from skeleton/demo/_vars.scss rename to skeleton/themes/demo/_vars.scss diff --git a/skeleton/sphenoid/_base.scss b/skeleton/themes/sphenoid/_base.scss similarity index 100% rename from skeleton/sphenoid/_base.scss rename to skeleton/themes/sphenoid/_base.scss diff --git a/skeleton/sphenoid/_skeleton.scss b/skeleton/themes/sphenoid/_skeleton.scss similarity index 100% rename from skeleton/sphenoid/_skeleton.scss rename to skeleton/themes/sphenoid/_skeleton.scss diff --git a/skeleton/sphenoid/_vars.scss b/skeleton/themes/sphenoid/_vars.scss similarity index 100% rename from skeleton/sphenoid/_vars.scss rename to skeleton/themes/sphenoid/_vars.scss diff --git a/skeleton/sphenoid/marrow/_private.scss b/skeleton/themes/sphenoid/marrow/_private.scss similarity index 100% rename from skeleton/sphenoid/marrow/_private.scss rename to skeleton/themes/sphenoid/marrow/_private.scss diff --git a/skeleton/sphenoid/marrow/_public.scss b/skeleton/themes/sphenoid/marrow/_public.scss similarity index 100% rename from skeleton/sphenoid/marrow/_public.scss rename to skeleton/themes/sphenoid/marrow/_public.scss diff --git a/skeleton_template.scss b/skeleton_template.scss index 91069d4..2273387 100644 --- a/skeleton_template.scss +++ b/skeleton_template.scss @@ -3,11 +3,10 @@ * @author Dennis Thompson * @copyright Copyright (c) 2014 AtomicPages LLC * @license MIT - * @version 2.0.0-b6 + * @version 2.0.0-b7 */ -// Choose the your flavor of Skeleton Sass and compile -@import "core/bones/sphenoid"; // sass --update -C skeleton.scss:skeleton.css +@import "skeleton/themes/loader"; // sass --update -C skeleton.scss:skeleton.css /* Add custom styles here */