Separates variables to variables.less file to allow overwriting

README.md

@@ -21,6 +21,16 @@ Check out <http://getskeleton.com> for documentation and details.
   * run `[sudo] npm install` (first time users)
   * run `grunt` (to watch and compile Less files)
 
+### Overwriting default variables
+
+To allow overwriting Skeleton's variables, they are stored in a separate file. To selectively overwrite variables, import the files separately instead of using the combined skeleton.less.
+
+```less
+@import 'skeleton-less/less/default-variables.less';
+@import 'your-application/your-variables.less';
+@import 'skeleton-less/less/main.less';
+```
+
 ### What's in the download?
 
 The download includes Skeleton's CSS, ~~Normalize CSS as a reset,~~ a sample favicon, and an index.html as a starting point.
@@ -29,6 +39,8 @@ The download includes Skeleton's CSS, ~~Normalize CSS as a reset,~~ a sample fav
 skeleton/
 ├── index.html
 ├── less/
+│   └── default-variables.less
+│   └── main.less
 │   └── skeleton.less
 ├── images/
 │   └── favicon.png

less/default-variables.less

@@ -0,0 +1,32 @@
+// Variables
+//––––––––––––––––––––––––––––––––––––––––––––––––––
+
+// Breakpoints
+@bp-larger-than-mobile    : 400px;
+@bp-larger-than-phablet   : 550px;
+@bp-larger-than-tablet    : 750px;
+@bp-larger-than-desktop   : 1000px;
+@bp-larger-than-desktophd : 1200px;
+
+// Colors
+@light-grey: #e1e1e1;
+@dark-grey: #333;
+@primary-color: #33c3f0;
+@secondary-color: lighten(@dark-grey, 13.5%);
+@border-color: #bbb;
+@link-color: #1eaedb;
+@font-color: #222;
+
+// Typography
+@font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+// Grid Variables
+@container-width: 960px;
+@container-width-larger-than-mobile: 85%;
+@container-width-larger-than-phablet: 80%;
+@total-columns: 12;
+@column-width: 100 / @total-columns; // calculates individual column width based off of # of columns
+@column-margin: 4%; // space between columns
+
+// Misc
+@global-radius: 4px;