diff --git a/sass/_ranges.scss b/sass/_ranges.scss
deleted file mode 100644
index a39ebb0..0000000
--- a/sass/_ranges.scss
+++ /dev/null
@@ -1,452 +0,0 @@
-.range {
-  
-  // --------------------------------
-  // Red ranges
-  // --------------------------------
-
-  &.range-chestnut-rose {
-    input { 
-      @include range-style($chestnutRose);
-    }
-  }
-
-  &.range-pomegranate {
-    input { 
-      @include range-style($pomegranate);
-    }
-  }
-
-  &.range-thunderbird {
-    input { @include range-style($thunderbird); }
-  }
-
-  &.range-old-brick {
-    input { @include range-style($oldBrick); }
-  }
-
-  &.range-flamingo {
-    input { @include range-style($flamingo); }
-  }
-
-  &.range-valencia {
-    input { @include range-style($valencia); }
-  }
-
-  &.range-tall-poppy {
-    input { @include range-style($tallPoppy); }
-  }
-
-  &.range-monza {
-    input { @include range-style($monza); }
-  }
-
-  &.range-cinnabar {
-    input { @include range-style($cinnabar); }
-  }
-
-  // --------------------------
-  // Yellow ranges
-  // --------------------------
-
-  &.range-cream-can {
-    input { @include range-style($creamCan); }
-  }
-
-  &.range-ripe-lemon {
-    input { @include range-style($ripeLemon); }
-  }
-
-  &.range-saffron {
-    input { @include range-style($saffron); }
-  }
-
-  // --------------------------
-  // Pink ranges
-  // --------------------------
-
-  &.range-razzmatazz {
-    input { @include range-style($razzmatazz); }
-  }
-
-  &.range-sunset-orange {
-    input { @include range-style($sunsetOrange); }
-  }
-
-  &.range-wax-flower {
-    input { @include range-style($waxFlower); }
-  }
-
-  &.range-cabaret {
-    input { @include range-style($cabaret); }
-  }
-
-  &.range-new-york-pink {
-    input { @include range-style($newYorkPink); }
-  }
-
-  &.range-radical-red {
-    input { @include range-style($radicalRed); }
-  }
-
-  &.range-sunglo {
-    input { @include range-style($sunglo); }
-  }
-
-  // --------------------------
-  // Gray ranges
-  // --------------------------
-
-  &.range-white-smoke {
-    input { @include range-style($whiteSmoke); }
-  }
-
-  &.range-lynch {
-    input { @include range-style($lynch); }
-  }
-
-  &.range-pumice {
-    input { @include range-style($pumice); }
-  }
-
-  &.range-gallery {
-    input { @include range-style($gallery); }
-  }
-
-  &.range-silver-sand {
-    input { @include range-style($silverSand); }
-  }
-
-  &.range-porcelain {
-    input { @include range-style($porcelain); }
-  }
-
-  &.range-cascade {
-    input { @include range-style($cascade); }
-  }
-
-  &.range-iron {
-    input { @include range-style($iron); }
-  }
-
-  &.range-edward {
-    input { @include range-style($edward); }
-  }
-
-  &.range-cararra {
-    input { @include range-style($cararra); }
-  }
-
-  &.range-silver {
-    input { @include range-style($silver); }
-  }
-
-  // ------------------------
-  // Purple ranges
-  // ------------------------
-
-  &.range-snuff {
-    input { @include range-style($snuff); }
-  }
-
-  &.range-rebecca-purple {
-    input { @include range-style($rebeccaPurple); }
-  }
-
-  &.range-honey-flower {
-    input { @include range-style($honeyFlower); }
-  }
-
-  &.range-wistful {
-    input { @include range-style($wistful); }
-  }
-
-  &.range-plum {
-    input { @include range-style($plum); }
-  }
-
-  &.range-seance {
-    input { @include range-style($seance); }
-  }
-
-  &.range-medium-purple {
-    input { @include range-style($mediumPurple); }
-  }
-
-  &.range-light-wisteria {
-    input { @include range-style($lightWisteria); }
-  }
-
-  &.range-studio {
-    input { @include range-style($studio); }
-  }
-
-  &.range-wisteria {
-    input { @include range-style($wisteria); }
-  }
-
-  // ------------------------
-  // Orange ranges
-  // ------------------------
-
-
-  &.range-confetti {
-    input { @include range-style($confetti); }
-  }
-
-  &.range-cape-honey {
-    input { @include range-style($capeHoney); }
-  }
-
-  &.range-california {
-    input { @include range-style($california); }
-  }
-
-  &.range-fire-bush {
-    input { @include range-style($fireBush); }
-  }
-
-  &.range-tahiti-gold {
-    input { @include range-style($tahitiGold); }
-  }
-
-  &.range-casablanca {
-    input { @include range-style($casablanca); }
-  }
-
-  &.range-crusta {
-    input { @include range-style($crusta); }
-  }
-
-  &.range-sea-buckthorn {
-    input { @include range-style($seaBuckthorn); }
-  }
-
-  &.range-lightning-yellow {
-    input { @include range-style($lightningYellow); }
-  }
-
-  &.range-burnt-orange {
-    input { @include range-style($burntOrange); }
-  }
-
-  &.range-buttercup {
-    input { @include range-style($buttercup); }
-  }
-
-  &.range-ecstasy {
-    input { @include range-style($ecstasy); }
-  }
-
-  &.range-sandstorm {
-    input { @include range-style($sandstorm); }
-  }
-
-  &.range-jaffa {
-    input { @include range-style($jaffa); }
-  }
-
-  &.range-zest {
-    input { @include range-style($zest); }
-  }
-
-  // -----------------------------
-  // Green ranges
-  // -----------------------------
-
-  &.range-medium-turquoise {
-    input { @include range-style($mediumTurquoise); }
-  }
-
-  &.range-aqua-island {
-    input { @include range-style($aquaIsland); }
-  }
-
-  &.range-gossip {
-    input { @include range-style($gossip); }
-  }
-
-  &.range-dark-sea-green {
-    input { @include range-style($darkSeaGreen); }
-  }
-
-  &.range-eucalyptus {
-    input { @include range-style($eucalyptus); }
-  }
-
-  &.range-caribbean-green {
-    input { @include range-style($caribbeanGreen); }
-  }
-
-  &.range-silver-tree {
-    input { @include range-style($silverTree); }
-  }
-
-  &.range-downy {
-    input { @include range-style($downy); }
-  }
-
-  &.range-mountain-meadow {
-    input { @include range-style($mountainMeadow); }
-  }
-
-  &.range-light-sea-green {
-    input { @include range-style($lightSeaGreen); }
-  }
-
-  &.range-medium-aquamarine {
-    input { @include range-style($mediumAquamarine); }
-  }
-
-  &.range-turquoise {
-    input { @include range-style($turquoise); }
-  }
-
-  &.range-madang {
-    input { @include range-style($madang); }
-  }
-
-  &.range-riptide {
-    input { @include range-style($riptide); }
-  }
-
-  &.range-shamrock {
-    input { @include range-style($shamrock); }
-  }
-
-  &.range-niagara {
-    input { @include range-style($niagara); }
-  }
-
-  &.range-esmerald {
-    input { @include range-style($esmerald); }
-  }
-
-  &.range-green-haze {
-    input { @include range-style($greenHaze); }
-  }
-
-  &.range-free-speech-aquamarine {
-    input { @include range-style($freeSpeechAquamarine); }
-  }
-
-  &.range-ocean-green {
-    input { @include range-style($oceanGreen); }
-  }
-
-  &.range-niagara-one {
-    input { @include range-style($niagaraOne); }
-  }
-
-  &.range-jade {
-    input { @include range-style($jade); }
-  }
-
-  &.range-salem {
-    input { @include range-style($salem); }
-  }
-
-  &.range-observatory {
-    input { @include range-style($observatory); }
-  }
-
-  &.range-jungle-green {
-    input { @include range-style($jungleGreen); }
-  }
-
-  // ------------------------------
-  // Blue ranges
-  // ------------------------------
-
-
-  &.range-san-marino {
-    input { @include range-style($sanMarino); }
-  }
-
-  &.range-alice-blue {
-    input { @include range-style($aliceBlue); }
-  }
-
-  &.range-royal-blue {
-    input { @include range-style($royalBlue); }
-  }
-
-  &.range-picton-blue {
-    input { @include range-style($pictonBlue); }
-  }
-
-  &.range-spray {
-    input { @include range-style($spray); }
-  }
-
-  &.range-shakespeare {
-    input { @include range-style($shakespeare); }
-  }
-
-  &.range-humming-bird {
-    input { @include range-style($hummingBird); }
-  }
-
-  &.range-picton-blue-two {
-    input { @include range-style($pictonBlueTwo); }
-  }
-
-  &.range-curious-blue {
-    input { @include range-style($curiousBlue); }
-  }
-
-  &.range-madison {
-    input { @include range-style($madison); }
-  }
-
-  &.range-dodger-blue {
-    input { @include range-style($dodgerBlue); }
-  }
-
-  &.range-ming {
-    input { @include range-style($ming); }
-  }
-
-  &.range-ebony-clay {
-    input { @include range-style($ebonyClay); }
-  }
-
-  &.range-malibu {
-    input { @include range-style($malibu); }
-  }
-
-  &.range-summer-sky {
-    input { @include range-style($summerSky); }
-  }
-
-  &.range-chambray {
-    input { @include range-style($chambray); }
-  }
-
-  &.range-pickled-bluewood {
-    input { @include range-style($pickledBluewood); }
-  }
-
-  &.range-hoki {
-    input { @include range-style($hoki); }
-  }
-
-  &.range-jelly-bean {
-    input { @include range-style($jellyBean); }
-  }
-
-  &.range-jacksons-purple {
-    input { @include range-style($jacksonsPurple); }
-  }
-
-  &.range-jordy-blue {
-    input { @include range-style($jordyBlue); }
-  }
-
-  &.range-steel-blue {
-    input { @include range-style($steelBlue); }
-  }
-
-  &.range-fountain-blue {
-    input { @include range-style($fountainBlue); }
-  }
-}
diff --git a/sass/ionic-flat.scss b/sass/ionic-flat.scss
index 953cf56..b175994 100644
--- a/sass/ionic-flat.scss
+++ b/sass/ionic-flat.scss
@@ -9,10 +9,10 @@
 @import
   "variables",
   "mixins",
-  "colors/colors.scss",
+  "colors/colors",
   "bars/bars",
   "buttons/buttons",
   "checkboxes/checkboxes",
   "toggles/toggles",
-  "ranges",
-  "tabs/tabs.scss";
+  "ranges/ranges",
+  "tabs/tabs";
diff --git a/sass/ranges/_blue-ranges.scss b/sass/ranges/_blue-ranges.scss
new file mode 100644
index 0000000..b0ebde1
--- /dev/null
+++ b/sass/ranges/_blue-ranges.scss
@@ -0,0 +1,93 @@
+.range {
+  &.range-san-marino {
+    input { @include range-style($sanMarino); }
+  }
+
+  &.range-alice-blue {
+    input { @include range-style($aliceBlue); }
+  }
+
+  &.range-royal-blue {
+    input { @include range-style($royalBlue); }
+  }
+
+  &.range-picton-blue {
+    input { @include range-style($pictonBlue); }
+  }
+
+  &.range-spray {
+    input { @include range-style($spray); }
+  }
+
+  &.range-shakespeare {
+    input { @include range-style($shakespeare); }
+  }
+
+  &.range-humming-bird {
+    input { @include range-style($hummingBird); }
+  }
+
+  &.range-picton-blue-two {
+    input { @include range-style($pictonBlueTwo); }
+  }
+
+  &.range-curious-blue {
+    input { @include range-style($curiousBlue); }
+  }
+
+  &.range-madison {
+    input { @include range-style($madison); }
+  }
+
+  &.range-dodger-blue {
+    input { @include range-style($dodgerBlue); }
+  }
+
+  &.range-ming {
+    input { @include range-style($ming); }
+  }
+
+  &.range-ebony-clay {
+    input { @include range-style($ebonyClay); }
+  }
+
+  &.range-malibu {
+    input { @include range-style($malibu); }
+  }
+
+  &.range-summer-sky {
+    input { @include range-style($summerSky); }
+  }
+
+  &.range-chambray {
+    input { @include range-style($chambray); }
+  }
+
+  &.range-pickled-bluewood {
+    input { @include range-style($pickledBluewood); }
+  }
+
+  &.range-hoki {
+    input { @include range-style($hoki); }
+  }
+
+  &.range-jelly-bean {
+    input { @include range-style($jellyBean); }
+  }
+
+  &.range-jacksons-purple {
+    input { @include range-style($jacksonsPurple); }
+  }
+
+  &.range-jordy-blue {
+    input { @include range-style($jordyBlue); }
+  }
+
+  &.range-steel-blue {
+    input { @include range-style($steelBlue); }
+  }
+
+  &.range-fountain-blue {
+    input { @include range-style($fountainBlue); }
+  }
+}
diff --git a/sass/ranges/_gray-ranges.scss b/sass/ranges/_gray-ranges.scss
new file mode 100644
index 0000000..43e550f
--- /dev/null
+++ b/sass/ranges/_gray-ranges.scss
@@ -0,0 +1,45 @@
+.range {
+  &.range-white-smoke {
+    input { @include range-style($whiteSmoke); }
+  }
+
+  &.range-lynch {
+    input { @include range-style($lynch); }
+  }
+
+  &.range-pumice {
+    input { @include range-style($pumice); }
+  }
+
+  &.range-gallery {
+    input { @include range-style($gallery); }
+  }
+
+  &.range-silver-sand {
+    input { @include range-style($silverSand); }
+  }
+
+  &.range-porcelain {
+    input { @include range-style($porcelain); }
+  }
+
+  &.range-cascade {
+    input { @include range-style($cascade); }
+  }
+
+  &.range-iron {
+    input { @include range-style($iron); }
+  }
+
+  &.range-edward {
+    input { @include range-style($edward); }
+  }
+
+  &.range-cararra {
+    input { @include range-style($cararra); }
+  }
+
+  &.range-silver {
+    input { @include range-style($silver); }
+  }
+}
diff --git a/sass/ranges/_green-ranges.scss b/sass/ranges/_green-ranges.scss
new file mode 100644
index 0000000..571fc47
--- /dev/null
+++ b/sass/ranges/_green-ranges.scss
@@ -0,0 +1,101 @@
+.range {
+  &.range-medium-turquoise {
+    input { @include range-style($mediumTurquoise); }
+  }
+
+  &.range-aqua-island {
+    input { @include range-style($aquaIsland); }
+  }
+
+  &.range-gossip {
+    input { @include range-style($gossip); }
+  }
+
+  &.range-dark-sea-green {
+    input { @include range-style($darkSeaGreen); }
+  }
+
+  &.range-eucalyptus {
+    input { @include range-style($eucalyptus); }
+  }
+
+  &.range-caribbean-green {
+    input { @include range-style($caribbeanGreen); }
+  }
+
+  &.range-silver-tree {
+    input { @include range-style($silverTree); }
+  }
+
+  &.range-downy {
+    input { @include range-style($downy); }
+  }
+
+  &.range-mountain-meadow {
+    input { @include range-style($mountainMeadow); }
+  }
+
+  &.range-light-sea-green {
+    input { @include range-style($lightSeaGreen); }
+  }
+
+  &.range-medium-aquamarine {
+    input { @include range-style($mediumAquamarine); }
+  }
+
+  &.range-turquoise {
+    input { @include range-style($turquoise); }
+  }
+
+  &.range-madang {
+    input { @include range-style($madang); }
+  }
+
+  &.range-riptide {
+    input { @include range-style($riptide); }
+  }
+
+  &.range-shamrock {
+    input { @include range-style($shamrock); }
+  }
+
+  &.range-niagara {
+    input { @include range-style($niagara); }
+  }
+
+  &.range-esmerald {
+    input { @include range-style($esmerald); }
+  }
+
+  &.range-green-haze {
+    input { @include range-style($greenHaze); }
+  }
+
+  &.range-free-speech-aquamarine {
+    input { @include range-style($freeSpeechAquamarine); }
+  }
+
+  &.range-ocean-green {
+    input { @include range-style($oceanGreen); }
+  }
+
+  &.range-niagara-one {
+    input { @include range-style($niagaraOne); }
+  }
+
+  &.range-jade {
+    input { @include range-style($jade); }
+  }
+
+  &.range-salem {
+    input { @include range-style($salem); }
+  }
+
+  &.range-observatory {
+    input { @include range-style($observatory); }
+  }
+
+  &.range-jungle-green {
+    input { @include range-style($jungleGreen); }
+  }
+}
diff --git a/sass/ranges/_orange-ranges.scss b/sass/ranges/_orange-ranges.scss
new file mode 100644
index 0000000..f0377a0
--- /dev/null
+++ b/sass/ranges/_orange-ranges.scss
@@ -0,0 +1,61 @@
+.range {
+  &.range-confetti {
+    input { @include range-style($confetti); }
+  }
+
+  &.range-cape-honey {
+    input { @include range-style($capeHoney); }
+  }
+
+  &.range-california {
+    input { @include range-style($california); }
+  }
+
+  &.range-fire-bush {
+    input { @include range-style($fireBush); }
+  }
+
+  &.range-tahiti-gold {
+    input { @include range-style($tahitiGold); }
+  }
+
+  &.range-casablanca {
+    input { @include range-style($casablanca); }
+  }
+
+  &.range-crusta {
+    input { @include range-style($crusta); }
+  }
+
+  &.range-sea-buckthorn {
+    input { @include range-style($seaBuckthorn); }
+  }
+
+  &.range-lightning-yellow {
+    input { @include range-style($lightningYellow); }
+  }
+
+  &.range-burnt-orange {
+    input { @include range-style($burntOrange); }
+  }
+
+  &.range-buttercup {
+    input { @include range-style($buttercup); }
+  }
+
+  &.range-ecstasy {
+    input { @include range-style($ecstasy); }
+  }
+
+  &.range-sandstorm {
+    input { @include range-style($sandstorm); }
+  }
+
+  &.range-jaffa {
+    input { @include range-style($jaffa); }
+  }
+
+  &.range-zest {
+    input { @include range-style($zest); }
+  }
+}
diff --git a/sass/ranges/_pink-ranges.scss b/sass/ranges/_pink-ranges.scss
new file mode 100644
index 0000000..b31839b
--- /dev/null
+++ b/sass/ranges/_pink-ranges.scss
@@ -0,0 +1,29 @@
+.range {
+  &.range-razzmatazz {
+    input { @include range-style($razzmatazz); }
+  }
+
+  &.range-sunset-orange {
+    input { @include range-style($sunsetOrange); }
+  }
+
+  &.range-wax-flower {
+    input { @include range-style($waxFlower); }
+  }
+
+  &.range-cabaret {
+    input { @include range-style($cabaret); }
+  }
+
+  &.range-new-york-pink {
+    input { @include range-style($newYorkPink); }
+  }
+
+  &.range-radical-red {
+    input { @include range-style($radicalRed); }
+  }
+
+  &.range-sunglo {
+    input { @include range-style($sunglo); }
+  }
+}
diff --git a/sass/ranges/_purple-ranges.scss b/sass/ranges/_purple-ranges.scss
new file mode 100644
index 0000000..3a91711
--- /dev/null
+++ b/sass/ranges/_purple-ranges.scss
@@ -0,0 +1,41 @@
+.range {
+  &.range-snuff {
+    input { @include range-style($snuff); }
+  }
+
+  &.range-rebecca-purple {
+    input { @include range-style($rebeccaPurple); }
+  }
+
+  &.range-honey-flower {
+    input { @include range-style($honeyFlower); }
+  }
+
+  &.range-wistful {
+    input { @include range-style($wistful); }
+  }
+
+  &.range-plum {
+    input { @include range-style($plum); }
+  }
+
+  &.range-seance {
+    input { @include range-style($seance); }
+  }
+
+  &.range-medium-purple {
+    input { @include range-style($mediumPurple); }
+  }
+
+  &.range-light-wisteria {
+    input { @include range-style($lightWisteria); }
+  }
+
+  &.range-studio {
+    input { @include range-style($studio); }
+  }
+
+  &.range-wisteria {
+    input { @include range-style($wisteria); }
+  }
+}
diff --git a/sass/ranges/_ranges.scss b/sass/ranges/_ranges.scss
new file mode 100644
index 0000000..df175fa
--- /dev/null
+++ b/sass/ranges/_ranges.scss
@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+@import
+  "red-ranges",
+  "yellow-ranges",
+  "pink-ranges",
+  "gray-ranges",
+  "purple-ranges",
+  "orange-ranges",
+  "green-ranges",
+  "blue-ranges";
diff --git a/sass/ranges/_red-ranges.scss b/sass/ranges/_red-ranges.scss
new file mode 100644
index 0000000..8116528
--- /dev/null
+++ b/sass/ranges/_red-ranges.scss
@@ -0,0 +1,41 @@
+.range {
+  &.range-chestnut-rose {
+    input { 
+      @include range-style($chestnutRose);
+    }
+  }
+
+  &.range-pomegranate {
+    input { 
+      @include range-style($pomegranate);
+    }
+  }
+
+  &.range-thunderbird {
+    input { @include range-style($thunderbird); }
+  }
+
+  &.range-old-brick {
+    input { @include range-style($oldBrick); }
+  }
+
+  &.range-flamingo {
+    input { @include range-style($flamingo); }
+  }
+
+  &.range-valencia {
+    input { @include range-style($valencia); }
+  }
+
+  &.range-tall-poppy {
+    input { @include range-style($tallPoppy); }
+  }
+
+  &.range-monza {
+    input { @include range-style($monza); }
+  }
+
+  &.range-cinnabar {
+    input { @include range-style($cinnabar); }
+  }
+}
diff --git a/sass/ranges/_yellow-ranges.scss b/sass/ranges/_yellow-ranges.scss
new file mode 100644
index 0000000..4d440d7
--- /dev/null
+++ b/sass/ranges/_yellow-ranges.scss
@@ -0,0 +1,13 @@
+.range {
+  &.range-cream-can {
+    input { @include range-style($creamCan); }
+  }
+
+  &.range-ripe-lemon {
+    input { @include range-style($ripeLemon); }
+  }
+
+  &.range-saffron {
+    input { @include range-style($saffron); }
+  }
+}