Added extra large screen size

- Added extra large (XL) styles and classes
- Refactor: breakpoints from map to list
- Added XL breakpoint
- Refactor: Added max-width for media queries

package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-freedom",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "CSS FreeDOM - a light-weight simplified and improved version of Bootstrap.",
   "main": "index.js",
   "dependencies": {

scss/partials/_block.scss

@@ -48,8 +48,8 @@
 }
 
 @each $breakpoint,
-$width in $breakpoints {
-    @media screen and (max-width: $width) {
+$minWidth, $maxWidth in $breakpoints {
+    @media screen and (min-width: $minWidth) and (max-width: $maxWidth) {
 
         /*Block Styles*/
         .fixed {

scss/partials/_border.scss

@@ -74,8 +74,8 @@
 }
 
 @each $breakpoint,
-$width in $breakpoints {
-    @media screen and (max-width: $width) {
+$minWidth, $maxWidth in $breakpoints {
+    @media screen and (min-width: $minWidth) and (max-width: $maxWidth) {
 
         /*Borders*/
         .b {

scss/partials/_breakpoints.scss

@@ -1,4 +1,4 @@
-$breakpoints: (
-        t:1000px,
-        m:576px
-    );
+$breakpoints:
+        "xl" 2500px none,
+        "t" 577px 1000px,
+        "m" 0 576px;

scss/partials/_display.scss

@@ -78,8 +78,8 @@
 }
 
 @each $breakpoint,
-$width in $breakpoints {
-    @media screen and (max-width: $width) {
+$minWidth, $maxWidth in $breakpoints {
+    @media screen and (min-width: $minWidth) and (max-width: $maxWidth) {
 
         /*Display*/
         .d {

scss/partials/_image.scss

@@ -127,8 +127,8 @@
 }
 
 @each $breakpoint,
-$width in $breakpoints {
-    @media screen and (max-width: $width) {
+$minWidth, $maxWidth in $breakpoints {
+    @media screen and (min-width: $minWidth) and (max-width: $maxWidth) {
 
         /*Image Styles*/
         .img {

scss/partials/_margin.scss

@@ -90,9 +90,9 @@
 }
 
 @each $breakpoint,
-$width in $breakpoints {
+$minWidth, $maxWidth in $breakpoints {
 
-    @media screen and (max-width: $width) {
+    @media screen and (min-width: $minWidth) and (max-width: $maxWidth) {
 
         /*Margin*/
         .m {

scss/partials/_outline.scss

@@ -23,8 +23,8 @@
 }
 
 @each $breakpoint,
-$width in $breakpoints {
-    @media screen and (max-width: $width) {
+$minWidth, $maxWidth in $breakpoints {
+    @media screen and (min-width: $minWidth) and (max-width: $maxWidth) {
 
         /*outlines*/
         .o {

scss/partials/_padding.scss

@@ -90,9 +90,9 @@
 }
 
 @each $breakpoint,
-$width in $breakpoints {
+$minWidth, $maxWidth in $breakpoints {
 
-    @media screen and (max-width: $width) {
+    @media screen and (min-width: $minWidth) and (max-width: $maxWidth) {
 
         /*Padding*/
         .p {

scss/partials/_sizing.scss

@@ -100,8 +100,8 @@
 }
 
 @each $breakpoint,
-$width in $breakpoints {
-    @media screen and (max-width: $width) {
+$minWidth, $maxWidth in $breakpoints {
+    @media screen and (min-width: $minWidth) and (max-width: $maxWidth) {
 
         /*Sizing*/
         /*Width*/

scss/partials/_text.scss

@@ -157,8 +157,8 @@
 }
 
 @each $breakpoint,
-$width in $breakpoints {
-    @media screen and (max-width: $width) {
+$minWidth, $maxWidth in $breakpoints {
+    @media screen and (min-width: $minWidth) and (max-width: $maxWidth) {
 
         /*Headings*/
         .h1 {