Merge pull request #56 from space150/enhancements

v2.0

.gitignore

@@ -1,12 +1,9 @@
 # never commit compiled code
-javascripts/compiled/*
 stylesheets/*
-images/compass-sprites
 
 # Temporary Sass files
 .sass-cache/
 
 # Compiled source for deployment
 dist/
 tests/**/*input.css
-scss/bourbon

.scss-lint.yml

@@ -2,7 +2,7 @@
 exclude:
   - "scss/vendor/_reset.scss"
   - "scss/vendor/_normalize.scss"
-  - "scss/_tests/*"
+  - "tests/*"
 
 linters:
   Comment:
@@ -13,3 +13,13 @@ linters:
     enabled: false
   StringQuotes:
     enabled: false
+  ImportantRule:
+    enabled: false
+  SelectorFormat:
+    enabled: false
+  ColorVariable:
+    enabled: false
+  QualifyingElement:
+    enabled: false
+  DeclarationOrder:
+    enabled: false

.travis.yml

@@ -0,0 +1,4 @@
+language: ruby
+rvm:
+  - 2.2.3
+script: rake test

CHANGELOG.md

@@ -1,3 +1,13 @@
+### 2.0.0 (Oct 8, 2015)
+
+* Replace media-query() mixin with media() mixin.
+* Remove support for IE6/7.
+* Remove dependency on Compass.
+* Move island, lists and media partials into UI folder.
+* Update to Normalize.css 3.0.3.
+* Documentation!
+
+
 ### 1.0.1 (Aug 11, 2015)
 
 * Add table helper classes.

Gemfile

@@ -1,4 +1,5 @@
 source "https://rubygems.org"
 
 gem "rake"
-gem "scss-lint", "0.25.1"
+gem "scss_lint", "0.38.0", require: false
+gem "sassunit"

Gemfile.lock

@@ -1,19 +1,28 @@
 GEM
   remote: https://rubygems.org/
   specs:
+    commander (4.3.5)
+      highline (~> 1.7.2)
+    highline (1.7.7)
+    minitest (5.8.1)
     rainbow (2.0.0)
     rake (10.4.2)
-    sass (3.3.14)
-    scss-lint (0.25.1)
+    sass (3.4.18)
+    sassunit (1.0.0)
+      commander
+      minitest
+      sass
+    scss_lint (0.38.0)
       rainbow (~> 2.0)
-      sass (~> 3.3.0)
+      sass (~> 3.4.1)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
   rake
-  scss-lint (= 0.25.1)
+  sassunit
+  scss_lint (= 0.38.0)
 
 BUNDLED WITH
-   1.10.5
+   1.10.6

README.md

@@ -5,29 +5,45 @@ spaceBase
 
 Many CSS frameworks are meant to be included and left alone. But spaceBase is a boilerplate layer that can be built upon and tailored for your needs. It combines best practices for today’s responsive web with the core components we use on every project. Consider it the launch pad for your adventures into cyberspace.
 
-spaceBase is meant to be copied into your project for further modifications. The SCSS files in `scss/base/` are usually not modified much, but the files in `scss/ui/` are meant to be completely tailored to your project.
+spaceBase is the front-end starter files for any new web project. It sets up your Sass architecture and normalizes your CSS and native HTML elements. It provides the structural groundwork for your application.
 
-**Coming Soon**
+[![Build Status](https://img.shields.io/travis/space150/spaceBase.svg?style=flat-square)](https://travis-ci.org/space150/spaceBase)
 
-Documentation is currently in orbit. In the meantime, feel free to explore!
+### Highlights
 
-### Getting Started
+* Object-oriented CSS
+* Optimized for light speed
+* Common UI components (buttons, lists, media object)
+* Helper classes and mixins
+* Cross-browser form controls
+* Built on REMs, with px fallback
+* Supports modern browsers including IE8+
 
-After you download the spaceBase ZIP from the repo, unzip it and copy its contents into your own project.
+### Customizable Features
 
-spaceBase is built with Sass, so you'll need a a way to compile it.
+* Compatible with any Sass 3.3 compiler
+* Start with Normalize (default) or CSS Reset
+* Scalable, mobile-first grid - choose how robust you want it
+* Base font size for mobile vs desktop
+* Global variables for breakpoints, colors, fonts and more
 
-Setting up Sass compilation is outside the scope of this document.
+**Coming Soon**
 
-Your editor should be setup with an EditorConfig plugin, so that certain basic code style standards are enforced automatically. See http://editorconfig.org/#download and install the plugin for your editor of choice.
+Detailed documentation is currently in orbit. In the meantime, feel free to explore!
 
-You can remove:
-- `tests/`
-- `scss/README.md`
-- `Gemfile`
-- `Gemfile.lock`
+## Getting Started
+
+1. `$ bower install spacebase` or download the ZIP and copy its contents into your project folder.
+2. Use your favorite Sass 3.3 compiler to watch changes and compile the files. (Setting up Sass is outside the scope of this document.)
+3. Open scss/_vars.scss to make changes to your global variables.
+4. Start building out your HTML. We've included index.html as a starting point.
+5. scss/base/ is the core of spaceBase. Build your UI layer in scss/ui/
 
-### The spaceBase structure
+Your editor can be setup with EditorConfig so that code style standards are enforced automatically. See http://editorconfig.org/#download and install the plugin for your editor of choice.
+
+## The spaceBase structure
+
+Read the [CSS Architecture Overview](scss/README.md) for details on the SCSS files.
 
 ```
 fonts/
@@ -36,24 +52,31 @@ scss/
     ...
   ui/
     ...
+  vendor/
+    ...
   _manifest.scss
   _vars.scss
   application-ie.scss
   application.scss
   styleguide.scss
+stylesheets/
 ```
 
-Read the [CSS Architecture Overview](scss/README.md) for details on these files.
+You can remove:
+- `tests/`
+- `Gemfile`
+- `Gemfile.lock`
 
-### Credits
+## Credits
 
 * [Harry Robert’s Inuit.css](https://github.com/csswizardry/inuit.css)
+* [Sass MQ](https://github.com/sass-mq/sass-mq)
 * [Bootstrap](http://getbootstrap.com)
 * [HTML5 Boilerplate](http://html5boilerplate.com)
 * [Normalize.css](http://necolas.github.io/normalize.css)
 * [Eric Meyer’s CSS Reset](http://meyerweb.com/eric/tools/css/reset)
 
-### License
+## License
 
 spaceBase is free to use under the [MIT License](LICENSE.md).
 

Rakefile

@@ -5,6 +5,5 @@ end
 
 desc "Run tests"
 task :test do
-  Dir.chdir "./tests"
-  require_relative "./tests/test"
+  puts `bundle exec sassunit`
 end

scss/README.md

@@ -1,21 +1,21 @@
-# CSS Architecture Overview
+# SCSS Architecture Overview
 
-## Philosophy
+## File Structure
 
-Mobile first. Fallback for legacy IE.
+The `scss/` directory contains three folders: Base, UI and Vendor.
 
+- **Base** contains the "building block" abstractions, namely the grid framework, mixins and helpers. These are core to spaceBase and should not be edited.
+- **UI** contains all project-specific styles shared across the application. These files are meant to be completely tailored to your project. To start, it includes typography, form elements, generic print styles, buttons and other common UI components. Add more partials and  organize them however the project demands.
+- **Vendor** contains Normalize and CSS reset. You can add other vendor files here.
 
-## Directories
 
-The `scss/` directory contains two folders: Base and UI.
+## Compilation
 
-- **Base** [avoid editing] contains things like normalize/CSS reset, mixins, helpers, and the "building block" abstractions. Most of the layout and basic visual styles can be achieved with these classes. The grid, widths, lists, blocks, and basic spacing content objects are in here.
-- **UI** [customize this] contains all design-specific styles shared across the application. This folder is free to organize however the project demands. To start, it includes layout, fonts, typography, buttons, and generic print styles.
+All partials are imported into the `_manifest.scss`. This is also where you can choose to import either Normalize (default) or CSS Reset. When you add new partials to your project, add them to this import list. `_manifest.scss` is then imported into the two main stylesheets, `application.scss` and `application-ie.scss`. Set up your Sass compilation to generate these in the `stylesheets/` directory. Because of the amount of comments, please use minified CSS in production.
 
+### Legacy IE Support
 
-## Legacy IE Support
-
-All partials are compiled into two CSS files in the main `stylesheets/` directory, `application.css` and `application-ie.css`. These should be loaded into the site via conditional comments.
+After compilation you will have two stylesheets, `application.css` and `application-ie.css`. The only difference between these files lies in the `$legacy-ie` variable. When set to true, the `media()` mixin will only render the content inside appropriate media query breakpoints. Taking advantage of CSS inheritance, the site will render the desktop layout in legacy browsers that don't support media queries (IE8 and below). Therefore, these should be loaded into the site via conditional comments.
 
 Example:
 ~~~html
@@ -28,21 +28,27 @@ Example:
 <![endif]-->
 ~~~
 
-The only difference between these files is the `$legacy-ie` variable. When set to true, the `media-query()` mixin will only render the content inside the media query breakpoints. The site will thereby display the desktop layout in legacy IE browsers.
+### Styleguide
+
+There is a third stylesheet, `styleguide.css`, used only in `styleguide.html`. This file is the start for your project style guide, including grid examples, color swatches, typography, UI and form elements. [What is a style guide?](http://alistapart.com/article/creating-style-guides)
+
+
+## Global Variables
 
+Customizable variables are stored in the `_vars.scss` partial. This includes things like font styles, colors, breakpoints and base sizing measurements. Use these variables throughout the rest of the project, and add more as you see fit. `_vars.scss` also contains switches to include or exclude features as you need them.
 
-## Variables
+### Vertical Rhythm and the `$base-sizing-unit`
 
-Global variables are kept in the `_vars.scss` partial. This includes things like base font styles, colors, breakpoints, and some misc. sizing measurements. All of these variables are used throughout most of the partials. There are a few spots where having some "local" variables are helpful for math and reuse in that particular section. These variables have been prefixed with an underscore so you know that those variables aren't used outside that partial.
+As a means for consistency and good vertical rhythm, many measurements are based off the `$base-spacing-unit`, which is equal to the base `$line-height-ratio`. This way if the `$base-font-size` or `$base-line-height` is adjusted down the road, white space proportions are preserved. For example, unless you opt for using CSS Reset, most block-level elements (headings, lists, paragraphs, etc.) will have a bottom margin equal to `$base-spacing-unit`.
 
 
 ## The Grid
 
-The grid structure comes almost directly from [inuit.css](https://github.com/csswizardry/inuit.css) with some minor modifications. It works on proportional sizes, not "columns" and "rows".
+The grid structure comes from version 4 of [inuit.css](https://github.com/csswizardry/inuit.css) with some modifications. It uses proportionally-sized floats with human readable classnames (i.e. one-half, two-thirds, three-quarters, etc). By default, grid gutters (the space between grid elements) are equal to the `$base-sizing-unit` but can be changed in `_vars.scss`. Each set of grid elements must be wrapped in a `grid-wrapper`. Floats can be reversed by adding `grid-wrapper--rev`, and gutters can be removed by adding `grid-wrapper--full`.
 
 Example:
 ~~~html
-<div class="grid-wrapper">
+<div class="grid-wrapper grid-wrapper--full">
 
     <div class="grid two-thirds">
         ...
@@ -57,25 +63,38 @@ Example:
 
 ### The `$responsive` Variable
 
-If $responsive is set to false, the grid will collapse to 100% on mobile and use the same proportions for all wider breakpoints.
+If `$responsive` is set to false, the grid will collapse to 100% wide on mobile and only use the  proportional-width classes for breakpoint `lap` and above. This is ideal for a simple site layout.
 
-If $responsive is set to true, the grid proportions will change at different breakpoints with the addition of classes prefixed with the breakpoint.
+If `$responsive` is set to true, the base grid proportions remain constant across all breakpoints. But by adding classes prefixed with the breakpoint namespace, grid elements can change width at different breakpoints, thereby creating a truly dynamic site layout.
 
 Example:
 ~~~html
 <div class="grid-wrapper">
 
-    <div class="grid one-whole lap-one-half desk-three-quarters">
+    <div class="grid one-whole hand-one-half lap-one-third desk-one-quarter">
         ...
     </div>
 
-    <div class="grid one-whole lap-one-half desk-one-quarters">
+</div>
+~~~
+
+This would create a `div` that at the smallest sizes fills the full width of the horizontal space, takes up half of that space at `hand` sizes, a third of that space at `lap` sizes, and a quarter at `desk` sizes.
+
+### Push and Pull
+
+Push classes move grid items over to the right, creating white space on the left. Pull classes move grid items over to the left, creating white space on the right. Push and pull styles follow the same logic of the `$responsive` variable. If `$responsive` is false, they only apply to the `lap`  breakpoint and above. If `$responsive` is true, you have access to push and pull classes prefixed with the breakpoint namespace.
+
+Example:
+~~~html
+<div class="grid-wrapper">
+
+    <div class="grid one-half lap-one-quarter push--one-quarter push--lap-three-eighths">
         ...
     </div>
 
 </div>
 ~~~
 
-### The `$base-sizing-unit` Variable
+To exclude the push/pull styles from the compiled stylesheet, change their variables to `false` in `_vars.scss`. Because of the weight they add to the file size, it is advisable to do this if you aren't using them.
 
-As a means for consistency and good vertical rhythm as many "measurements" are based off the base-spacing-unit, which is equal to the base line-height. This way if we need to adjust down the road, all proportions are preserved.
+See the [style guide](../styleguide.html) for more grid examples.

scss/_manifest.scss

@@ -1,6 +1,6 @@
 @import "vars";
 
-// Choose either Reset or Normalize:
+// Choose either Normalize or Reset:
 @import "vendor/normalize"; $normalize: true;
 // @import "vendor/reset"; $reset: true;
 
@@ -10,16 +10,16 @@
 @import "base/widths";
 @import "base/push";
 @import "base/pull";
-@import "base/island";
-@import "base/lists";
-@import "base/media";
 @import "base/shared";
 @import "base/helpers";
 
 @import "ui/fonts";
 @import "ui/typography";
 @import "ui/forms";
 @import "ui/buttons";
+@import "ui/island";
+@import "ui/lists";
+@import "ui/media";
 @import "ui/layout";
 
 @import "ui/print";