diff --git a/README.md b/README.md
index c268e10..cb038cd 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@ Skeleton Sass is a highly modular version of [Skeleton CSS](http://getskeleton.c
* Ability to seamlessly adjust grids by changing the value of variables
* Themes
* Easy-to-use mixins and functions
-* Install Skeleton Sass with bower or npm!
+* Install Skeleton Sass with bower or npm! No more clunky scripts!
* [Live demo!](http://atomicpages.github.io/skeleton-sass/demo/index.html)
* [Heavily documented](https://github.com/atomicpages/skeleton-sass/wiki)
@@ -22,6 +22,117 @@ Yes! Skeleton Sass has been tested with the following compilers and libsass wrap
* [Wellington](http://getwt.io/) 0.9.3+
* [node-sass](https://www.npmjs.com/package/node-sass) 3.5+
+### How do I Consume Skeleton Sass?
+If you're using a `bower` or `npm` then install via:
+
+~~~bash
+bower i --save-dev skeleton-sass
+npm i --save-dev skeleton-sass
+~~~
+
+Optionally, if you are not using one of these package managers, then you can clone the repo and put in a special directory with the rest of your dependencies.
+
+From here, minimal stitching is required to get Skeleton Sass 3 integrated into your project! At a minimum, you need to create a single file: `skeleton.scss`
+
+From *nix:
+
+~~~bash
+cd path/to/sass/in/project
+touch skeleton.scss
+~~~
+
+From Windows:
+
+~~~batch
+cd path/to/sass/in/project
+echo. 2>skeleton.scss
+~~~
+
+Inside of `skeleton.scss` we need to add our components:
+
+~~~sass
+@import "path/to/bower_components/skeleton-sass/skeleton/core/config"; // Skeleton Sass core loader
+
+// import default theme variables
+@import "path/to/bower_components/skeleton-sass/skeleton/themes/fresh/vars"; // theme variable overrides
+
+// import default theme styles
+@import "path/to/bower_components/skeleton-sass/skeleton/themes/fresh/base"; // theme base styles
+@import "path/to/bower_components/skeleton-sass/skeleton/themes/fresh/skeleton"; // theme grid styles
+~~~
+
+Compile `skeleton.scss` and you now have Skeleton Sass 3 integrated into your project!
+
+#### But wait! What about my themes?!
+Skeleton Sass 3 makes it easy to keep your changes external to the core of Skeleton Sass with the new all-partial approach. We'll outline a sample case where we use a custom theme below:
+
+* `MyProject/`
+ * `bower_components`
+ * `sources/`
+ * `sass/`
+ * `skeleton/` use skeleton folder to keep file structure clean
+ * `themes/`
+ * `MyTheme/`
+ * `marrow/`
+ * `_private.scss` contains private mixins, conventionally only available to `_public.scss`
+ * `_public.scss` contains public-facing mixins available to the theme
+ * `_skeleton.scss` contains the theme grid, replaces shipped grids
+ * `_base.scss` contains the theme base styles, replaces shipped base styles
+ * `_vars.scss` contains theme-scoped variables and overrides
+ * `_config.scss` contains global overrides and applies to **all** themes
+ * `_loader.scss` contains all of the imports
+ * `skeleton.scss` imports `_loader.scss` and houses all additional styles
+ * `js/`
+ * `images/`
+
+Now that we have our sample project outlined, let's see how we can get everything working! Open `_config.scss` and add the following:
+
+**Note:** all relative paths in the examples below fit the file structure above. If you are using a different structure, amend the paths accordingly.
+
+~~~sass
+@import "../../../bower_components/skeleton-sass/skeleton/core/config";
+
+// Global var overrides
+~~~
+
+Now open `_loader.scss` and add the following:
+
+~~~sass
+@import "config";
+
+// import theme, overrides, and extras
+@import "themes/MyTheme/vars";
+@import "themes/MyTheme/base";
+@import "themes/MyTheme/skeleton";
+~~~
+
+Finally, open `skeleton.scss` and add the following as the first line of the file:
+
+~~~sass
+@import "skeleton/loader";
+~~~
+
+#### How do I load third party Sass partials into theme?
+Glad you asked! Skeleton Sass 3 makes this super easy as well! Depending where you need these mixins, function, and/or variables, you can load them at the appropriate place in your `_loader.scss` file!
+
+For example, let's assume we want to use font-awesome inside of our `skeleton.scss` file, we could modify the `_loader.scss` file as follows:
+
+~~~sass
+@import "config";
+
+// import theme, overrides, and extras
+@import "themes/MyTheme/vars";
+@import "themes/MyTheme/base";
+@import "themes/MyTheme/skeleton";
+
+// import extras
+@import "../../../bower_components/font-awesome/scss/font-awesome";
+~~~
+
+**Note:** the position of the import changes which files have access to the loaded data. For example, if you need the data in `themes/MyTheme/skeleton` then you'd need to move the import above the line where you import `themes/MyTheme/skeleton`.
+
+For more information on why we made this change, [click here](#change).
+
#### Upgrading From 2.x
Skeleton Sass 3 is decently compatible to the 2.x series, but requires some manual labor (i.e. copy and pasting multiple files to the 2.x series).
@@ -30,7 +141,7 @@ Skeleton Sass 2 is **not** backwards compatible with Skeleton Sass 1.x due to a
#### Looking for older versions of Skeleton Sass?
* Skeleton Sass 2
- * [Verion 2 branch](https://github.com/atomicpages/skeleton-sass/tree/master/2.0)
+ * [Version 2 branch](https://github.com/atomicpages/skeleton-sass/tree/master/2.0)
* [Version 2 docs](https://github.com/atomicpages/skeleton-sass/wiki/Version-2-Docs)
* Skeleton Sass
* [Version 1 branch](https://github.com/atomicpages/skeleton-sass/tree/master/1.0)
@@ -47,8 +158,6 @@ Skeleton Sass is a Sass port of Skeleton CSS. Skeleton Sass 3 decouples itself f
2. Customizable
3. Themeable
-**Warning:** The current stable release of Compass does *not* support Sass 3.3.x. Skeleton Sass uses functions that are a part of that version. There are currently alpha builds of Compass 1.x that do support Sass 3.3.x
-
### File Overview
* `skeleton` where all of the magic happens
* `core`
@@ -57,7 +166,7 @@ Skeleton Sass is a Sass port of Skeleton CSS. Skeleton Sass 3 decouples itself f
* `_functions.scss` the default global functions for Skeleton Sass
* `_mixins.scss` the default global mixins for Skeleton Sass
* `themes` where all of the themes live
- * `demo` & `fresh`
+ * `fresh`
* `marrow` stores all project-level functions and mixins
* `_mixins.scss` loads the default theme mixins and functions from `sphenoid`
* `_base.scss` contains all of the base styles for Skeleton Sass with the exception of the reset styles
@@ -69,8 +178,6 @@ Skeleton Sass is a Sass port of Skeleton CSS. Skeleton Sass 3 decouples itself f
* `_base.scss` contains all of the base styles for Skeleton Sass (same look as Skeleton CSS created)
* `_vars.scss` contains project-scoped configuration options
* `_skeleton.scss` contains all the styles to create the grid
-* `_MYconfig.scss` contains all of your global configuration options that won't be overridden by an update to Skeleton Sass
-* `skeleton_template.scss` contains all of the styles accumulated into a single file.
### 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](http://bower.io/)
@@ -91,7 +198,7 @@ bower install skeleton-sass#2.0.0-b2
[Learn how to set up Skeleton Sass for the first time here](https://github.com/atomicpages/skeleton-sass/wiki/Setting-up-Skeleton-Sass-for-first-time-use).
### Demo
-You can see Skeleton Sass in action 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!
+You can see Skeleton Sass in action here: [https://atomicpages.github.io/skeleton-sass](https://atomicpages.github.io/skeleton-sass). Be sure to resize your browser window and see the responsive goodness in action!
### Documentation
Skeleton Sass is heavily documented. If you're looking for a detailed description (or just want more info) you can view all the [wiki pages here](https://github.com/atomicpages/skeleton-sass/wiki/_pages).
@@ -118,16 +225,37 @@ Skeleton Sass is community driven. We will gladly review any issues that you fin
##### I Found a Bug/How Can I Help?
* [Create an Issue](https://github.com/atomicpages/skeleton-sass/issues)
-* [Fork & Pull](https://github.com/atomicpages/skeleton-sass)
+* [Fork](https://github.com/atomicpages/skeleton-sass)
+
+
+
+### Version 3 Update
+After a year of working with build systems like gulp, make, gradle, and maven it became obvious that the structure of Skeleton Sass 2 didn't really promote easy updating. Most build systems have a clean task which deletes entire directories that contains artifacts, target directories, object files, etc. Skeleton Sass 2 strived to be a catch-all solution with the addition of clunky scripts to automate certain things. With the release of 2.5.3, we realized a change was needed.
+
+Skeleton Sass 3 offers a far more portable solution in order to adapt to new ways of development using dependency management systems like `bower` and `npm`. We wanted to truly make updating Skeleton Sass have zero risk of losing all your hard work. Now contributors to your projects can simply install Skeleton Sass as a dependency and all of your changes are 100% decoupled from the core.
Changelog
---------
### 3.0.0
* Adding `package.json` for npm support
* Converting all core files to partials for better support for installing via bower and npm
+* Decoupled Skeleton Sass
+ * All themes files that `@import "vars";` no longer do so
+ * Importing of theme components has to be done manually by consumers.
+* Added `.editorconfig`
+* Added `package.json` for installing via npm
###### Removals
* `bin/`
+* `skeleton_template.scss`
+* `_MYConfig.scss`
+* `themes/demo`
+* `var` partial imports in shipped theme files
+
+###### Additions
+* Introduction of `$new-grid-width` in the global config
+ * Alters the `width` set in `.container` as defined in `@media (min-width: 550px)`
+ * Allows users to change this bizarre default 80% value set in Skeleton CSS 2
### 2.5.4
* Adding `normalize.scss` as a dependency
@@ -217,10 +345,10 @@ Contributors
* [robertosobachi](https://github.com/robertosobachi)
* [Issue #6](https://github.com/atomicpages/skeleton-sass/issues/6)
* [Pull #10](https://github.com/atomicpages/skeleton-sass/pull/10)
-* [vephinx](https://github.com/vephinx):
+* [vephinx](https://github.com/vephinx)
* [Issue #7](https://github.com/atomicpages/skeleton-sass/issues/7)
* [Issue #9](https://github.com/atomicpages/skeleton-sass/issues/9)
-* [thomasvandongen](https://github.com/thomasvandongen
+* [thomasvandongen](https://github.com/thomasvandongen)
* Pull request [0af774f](https://github.com/atomicpages/skeleton-sass/pull/20)
* **Note:** as a result of his work we can finally close [issue #16](https://github.com/atomicpages/skeleton-sass/issues/16)
* [seshaljain](https://github.com/seshaljain)
diff --git a/_MYconfig.scss b/_MYconfig.scss
deleted file mode 100644
index 26c87ef..0000000
--- a/_MYconfig.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-// 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.rb - Note: You must have ruby 2.x installed
-// to run this script
-// 2. Follow prompts from script
-
-// GLOBAL VARIABLES - include your variables here or alter the predefined vars
-// See skeleton file for copyright info
-
-// MY VARIABLES
-// $foo: "bar";
diff --git a/bower.json b/bower.json
index 9a719e3..4b3234c 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
{
"name": "skeleton-sass",
- "version": "3.0.0-dev1",
+ "version": "3.0.0-dev2",
"author": "Dennis Thompson",
"homepage": "http://atomicpages.github.io/skeleton-sass/",
"repository": {
@@ -13,7 +13,7 @@
"url": "http://opensource.org/licenses/MIT"
}
],
- "main": ["skeleton_template.scss"],
+ "main": ["README.md"],
"keywords": [
"sass",
"design",
diff --git a/package.json b/package.json
index 0e024f6..693687b 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
{
"name": "skeleton-sass",
- "version": "3.0.0-dev1",
- "description": "Skeleton Sass is a highly modularized version of Skeleton CSS",
- "main": "index.js",
+ "version": "3.0.0-dev2",
+ "description": "Skeleton Sass is a highly modular version of Skeleton CSS",
+ "main": "skeleton/core/_config.scss",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
@@ -15,9 +15,10 @@
"skeleton",
"front-end",
"css",
- "boilerplate"
+ "boilerplate",
+ "scss"
],
- "author": "Dennis THompson",
+ "author": "Dennis Thompson",
"license": "MIT",
"bugs": {
"url": "https://github.com/atomicpages/skeleton-sass/issues"
diff --git a/sache.json b/sache.json
index 6f2a947..fa5fdae 100644
--- a/sache.json
+++ b/sache.json
@@ -1,15 +1,11 @@
{
"name": "skeleton-sass",
- "description": "Skeleton Sass is a highly modularized version of Skeleton CSS [written in Sass]",
+ "description": "Skeleton Sass is a highly modular version of Skeleton CSS",
"tags": [
- "framework",
- "responsive",
- "grids",
- "ui",
- "skeleton",
- "structure",
- "scss",
- "layout"
+ "framework", "responsive",
+ "grids", "ui", "skeleton",
+ "scss", "layout", "ux", "sass",
+ "style", "css"
],
"website": "http://atomicpages.github.io/skeleton-sass/",
"docs": "https://github.com/atomicpages/skeleton-sass/wiki"
diff --git a/skeleton/core/_config.scss b/skeleton/core/_config.scss
index 6afc288..0fbda06 100644
--- a/skeleton/core/_config.scss
+++ b/skeleton/core/_config.scss
@@ -32,6 +32,7 @@ $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
$base-width: if($is-fluid, 98%, ($base-col-width + $base-gutter-width) * $base-col-count) !global; // Calculated
+$new-grid-width: 80%; // the new grid with set within the 550px breakpoint
// BREAKPOINTS
$tablet-width: 768px !global; // the tablet width media query
@@ -47,4 +48,3 @@ $use-new-grid: true !global; // Uses the new grid released in Skeleton CSS 2
@import "dependencies";
@import "functions";
@import "mixins";
-// @import "../../_MYconfig.scss";
diff --git a/skeleton/core/_dependencies.scss b/skeleton/core/_dependencies.scss
index d4415c2..bafb412 100644
--- a/skeleton/core/_dependencies.scss
+++ b/skeleton/core/_dependencies.scss
@@ -9,8 +9,8 @@
// override only for fluid
/* Overrides */
$gutter: percent($base-gutter-width) / 100;
- .container {
- @if($new == true) { width: 80%; } // TODO: make this dynamic somehow
+ @if($new == true) {
+ .container { width: $new-grid-width; }
}
@if($new == false) {
.column,
diff --git a/skeleton/themes/_loader.scss b/skeleton/themes/_loader.scss
deleted file mode 100644
index c471707..0000000
--- a/skeleton/themes/_loader.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-// fresh theme created with love using Skeleton Sass theme setup script!
-
-@import "../core/config"; // default dependencies for all themes
-@import "fresh/vars";
-@import "fresh/base";
-@import "fresh/skeleton"; // Override manually if you wish to create your own grid
diff --git a/skeleton/themes/demo/_base.scss b/skeleton/themes/demo/_base.scss
deleted file mode 100644
index ca914fe..0000000
--- a/skeleton/themes/demo/_base.scss
+++ /dev/null
@@ -1,356 +0,0 @@
-// The foundation of Skeleton which includes all base styles
-// that come bundled by default.
-// See skeleton/core/_config.scss for default variable values.
-// See _vars.scss for theme-scoped default values.
-
-@import "vars";
-
-/* RESET
- * ------------------------------------------------ */
-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
- * ------------------------------------------------ */
-html {
- font-size: percentage(strip-units($base-font-size) / 16);
- overflow-y: scroll;
- -webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
- line-height: 1.2;
-}
-@if($use-global-border-box) {
- *,
- *:before,
- *:after {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
-}
-body {
- background: $background-color;
- font: {
- family: $font-family;
- weight: normal;
- style: normal;
- }
- @include font-size(14px);
- line-height: relative(26px);
- color: $font-color;
- -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
- -webkit-text-size-adjust: 100%;
-}
-
-/* TYPOGRAPHY
- * ------------------------------------------------ */
-h1, h2, h3, h4, h5, h6 {
- color: $heading-color;
- font: {
- family: $heading-family;
- weight: normal;
- }
-}
-h1, h2, h3,
-h4, h5, h6 {
- a { font-weight: inherit; }
-}
-h1 {
- @include font-size($font-size * 3.8333);
- line-height: relative($font-size * 4.1666);
- margin-bottom: relative($font-size * 1.1666);
-}
-h2 {
- @include font-size($font-size * 2.9166);
- line-height: relative($font-size * 3.333);
- margin-bottom: relative($font-size * 0.833);
-}
-h3 {
- @include font-size($font-size * 2.333);
- line-height: relative($font-size * 2.833);
- margin-bottom: relative($font-size * 0.666);
-}
-h4 {
- @include font-size($font-size * 1.75);
- line-height: relative($font-size * 2.5);
- margin-bottom: relative($font-size * 0.333);
-}
-h5 {
- @include font-size($font-size * 1.4166);
- line-height: relative($font-size * 2);
-}
-h6 {
- @include font-size($font-size * 1.1666);
- line-height: relative($font-size * 1.75);
-}
-.subheader { color: #777; }
-p {
- margin: 0 0 relative(20px) 0;
- img { margin: 0; }
- &.lead {
- @include font-size($font-size * 1.75);
- line-height: relative($font-size * 2.25);
- color: #777;
- }
-}
-em, i { font-style: italic; }
-strong, b { font-weight: bold; }
-u { text-decoration: underline; }
-small { font-size: 80%; }
-/* Blockquotes */
-blockquote, blockquote p {
- @include font-size($font-size * 1.4166);
- line-height: relative($font-size * 2);
- color: #777;
- font-style: italic;
-}
-blockquote {
- margin: 0 0 relative(20px);
- padding: relative(9px) relative(20px) 0 relative(19px);
- border-left: 1px solid #ddd;
-}
-blockquote cite {
- display: block;
- @include font-size($font-size);
- color: #555;
- &:before { content: "\2014 \0020"; }
- a, a:visited { color: #555; }
-}
-hr {
- border: {
- style: solid;
- color: #ddd;
- width: 1px 0 0;
- };
- clear: both;
- margin: relative(10px) 0 relative(30px);
- height: 0;
-}
-
-/* LINKS
- * ------------------------------------------------ */
-a, a:visited {
- color: $link-color;
- text-decoration: $link-decoration;
- outline: 0;
-}
-a:hover, a:focus, a:active { color: $link-hover; }
-p a, p a:visited { line-height: inherit; }
-
-/* LISTS
- * ------------------------------------------------ */
-ul,
-ol { margin-bottom: relative(20px); }
-ul { list-style: none outside; }
-ol { list-style: decimal; }
-ol, ul.square,
-ul.circle, ul.disc { margin-left: relative(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: relative(4px);
- right: 0;
- bottom: relative(5px);
- left: relative(30px);
- }
- font-size: 90%;
-}
-ul ul li, ul ol li,
-ol ol li, ol ul li { margin-bottom: relative(6px); }
-li {
- line-height: relative(18px);
- margin-bottom: relative(12px);
-}
-ul.large li { line-height: relative(21px); }
-li p { line-height: relative(21px); }
-
-/* IMAGES
- * ------------------------------------------------ */
-img.scale-with-grid {
- max-width: 100%;
- height: auto;
-}
-
-/* BUTTONS
- * ------------------------------------------------ */
-.button,
-button,
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
- border: 1px solid #aaa;
- border: {
- top: 1px solid #ccc;
- left: 1px solid #ccc;
- };
- border-radius: 3px;
- color: #444;
- display: inline-block;
- font: {
- weight: bold;
- family: $form-font;
- };
- @include font-size($font-size - 1);
- text-decoration: none;
- cursor: pointer;
- line-height: normal;
- padding: relative(8px) relative(10px);
- 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%);
- text-shadow: 0 1px rgba(255, 255, 255, 0.75);
- &:hover {
- color: #222;
- border: 1px solid #888;
- border: {
- top: 1px solid #aaa;
- left: 1px solid #aaa;
- };
- 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%);
- }
- &: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%);
- }
- &.full-width {
- width: 100%;
- padding-left: 0 !important;
- padding-right: 0 !important;
- text-align: center;
- }
- &.smaller {
- @include font-size($font-size - 2);
- padding: relative(4px) relative(5px);
- }
- &.larger {
- @include font-size($font-size + 2);
- padding: relative(10px) relative(18px);
- }
-}
-
-/* Fix for odd Mozilla border & padding issues */
-button,
-input {
- &::-moz-focus-inner {
- border: 0;
- padding: 0;
- }
-}
-
-/* FORMS
- * ------------------------------------------------ */
-form { margin-bottom: relative(20px); }
-fieldset { margin-bottom: relative(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: relative(6px) relative(4px);
- outline: none;
- border-radius: 2px;
- font: {
- family: $form-font;
- };
- @include font-size($font-size + 1);
- color: #777;
- margin: 0 0 relative(20px);
- width: relative(210px);
- max-width: 100%;
- display: block;
- &:hover,
- &:focus {
- border: 1px solid #aaa;
- color: #444;
- box-shadow: 0 0 3px rgba(0,0,0,0.2);
- }
- &:active {
- border: 1px solid darken(#aaa, 10%);
- box_shadow: 0 0 3px rgba(0,0,0,0.3);
- }
-}
-select { padding: 0; }
-textarea { min-height: relative(60px); }
-label,
-legend {
- display: block;
- font: {
- weight: bold;
- };
- @include font-size($font-size + 1);
-}
-select { width: relative(220px); }
-input[type="checkbox"] { display: inline; }
-label span,
-legend span {
- font: {
- weight: normal;
- };
- @include font-size($font-size + 1);
- color: #444;
-}
-
-/* MISC
- * ------------------------------------------------ */
-.subtract-bottom { margin-bottom: relative(-20px) !important; }
-.remove-bottom { margin-bottom: 0 !important; }
-.half-bottom { margin-bottom: relative(10px) !important; }
-.add-bottom { margin-bottom: relative(20px) !important; }
diff --git a/skeleton/themes/demo/_vars.scss b/skeleton/themes/demo/_vars.scss
deleted file mode 100644
index c5de4f7..0000000
--- a/skeleton/themes/demo/_vars.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-// This file exists for not only to connect everything at the
-// project level, but for you to import project-level dependencies
-// stored in the marrow folder, but to also create project-level
-// variables.
-
-@import "marrow/mixins";
-// @import "my_folder/_foo.scss"; // import dependencies from a custom folder
-// @import "bourbon"; // install bourbon in this directory and uncomment this line to enable bourbon, for example
-
-// Yep, taken right from bourbon - https://github.com/thoughtbot/bourbon/blob/master/dist/settings/_prefixer.scss
-$prefix-for-webkit: true !default;
-$prefix-for-mozilla: true !default;
-$prefix-for-microsoft: true !default;
-$prefix-for-opera: true !default;
-$prefix-for-spec: true !default;
diff --git a/skeleton/themes/demo/marrow/_mixins.scss b/skeleton/themes/demo/marrow/_mixins.scss
deleted file mode 100644
index dfcb548..0000000
--- a/skeleton/themes/demo/marrow/_mixins.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@import "../../sphenoid/marrow/private";
-@import "../../sphenoid/marrow/public";
diff --git a/skeleton/themes/fresh/_base.scss b/skeleton/themes/fresh/_base.scss
index 2f13846..c2cc333 100644
--- a/skeleton/themes/fresh/_base.scss
+++ b/skeleton/themes/fresh/_base.scss
@@ -3,8 +3,6 @@
// See skeleton/core/_config.scss for default variable values.
// See _vars.scss for theme-scoped default values.
-@import "vars";
-
/* RESET
* ------------------------------------------------ */
@include normalize();
diff --git a/skeleton/themes/fresh/_skeleton.scss b/skeleton/themes/fresh/_skeleton.scss
index e2b6d8b..a4ac3d3 100644
--- a/skeleton/themes/fresh/_skeleton.scss
+++ b/skeleton/themes/fresh/_skeleton.scss
@@ -1,5 +1,3 @@
-@import "vars";
-
/* BASE GRID
* ------------------------------------------------ */
.container {
diff --git a/skeleton/themes/sphenoid/_base.scss b/skeleton/themes/sphenoid/_base.scss
index f8b4933..31ea50c 100644
--- a/skeleton/themes/sphenoid/_base.scss
+++ b/skeleton/themes/sphenoid/_base.scss
@@ -3,8 +3,6 @@
// See skeleton/core/_config.scss for default variable values.
// See _vars.scss for theme-scoped default values.
-@import "vars";
-
/* RESET
* ------------------------------------------------ */
@include global-reset;
diff --git a/skeleton/themes/sphenoid/_skeleton.scss b/skeleton/themes/sphenoid/_skeleton.scss
index 9b9260b..49d6804 100644
--- a/skeleton/themes/sphenoid/_skeleton.scss
+++ b/skeleton/themes/sphenoid/_skeleton.scss
@@ -1,5 +1,3 @@
-@import "vars";
-
/* BASE GRID
* ------------------------------------------------ */
.container {
diff --git a/skeleton_template.scss b/skeleton_template.scss
deleted file mode 100644
index 4a3aa7c..0000000
--- a/skeleton_template.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * SASS/SCSS/Compass Transcription of Skeleton Responsive Grid
- * @author Dennis Thompson
- * @copyright Copyright (c) 2016 AtomicPages LLC
- * @license MIT
- * @version 3.0.0
- */
-
-@import "skeleton/themes/loader"; // sass --update -C skeleton.scss:skeleton.css
-
-/* Add custom styles here */
-
-/* MEDIA QUERIES
- * ------------------------------------------------ */
-/* Large displays */
-@media only screen and (min-width: $base-width) and (max-width: 1280px) { /* add code here */ }
-
-/* Smaller than standard #{strip-units($base-width)} (devices and browsers) */
-@media only screen and (max-width: $base-width - 1) { /* add code here */ }
-
-/* Tablet Portrait size to standard #{strip-units($base-width)} (devices and browsers) */
-@media only screen and (min-width: $tablet-width) and (max-width: $base-width - 1) { /* add code here */ }
-
-/* All Mobile Sizes (devices and browser) */
-@media only screen and (max-width: $tablet-width - 1) { /* add code here */ }
-
-/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
-@media only screen and (min-width: $mobile-landscape-width + 60) and (max-width: $tablet-width - 1) { /* add code here */ }
-
-/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
-@media only screen and (max-width: ($mobile-landscape-width + 60) - 1) { /* add code here */ }