Added margin, padding, font-size responsive modifiers

- Modify padding at specific breakpoints -> padding-{side}-{size}@{breakpoint}
- Modify margin at specific breakpoints -> margin-{side}-{size}@{breakpoint}
- Modify font-size at specific breakpoints -> text-{size}@{breakpoint}

Co-Authored-By: Claudia Romano <claudia-romano@users.noreply.github.com>

.browserslistrc

@@ -4,7 +4,7 @@ not dead
 Chrome >= 45
 Firefox >= 38
 Edge >= 12
-ie 9-11
+Explorer >= 11
 iOS >= 9
 Safari >= 9
 Android >= 4.4

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014-2019 Amber Creative Lab, Ltd.
+Copyright (c) 2014-2020 Amber Creative S.R.L.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -12,7 +12,7 @@ The framework is composed of:
 
 Some of the advantages of working with CodyFrame:
 
-- ⚡️ lightweight (**9KB** minified and gzipped)
+- ⚡️ lightweight (**12.8KB** minified and gzipped)
 - 🙌 no need to override existing CSS rules
 - 📱 mobile-first
 - 🎨 create unique designs with total control

main/assets/css/base/_grid-layout.scss

@@ -94,17 +94,19 @@ $grid-columns: 12 !default;
   }
 }
 
-.grid-gap-xxxxs { --grid-gap: var(--space-xxxxs); }
-.grid-gap-xxxs  { --grid-gap: var(--space-xxxs); }
-.grid-gap-xxs   { --grid-gap: var(--space-xxs); }
-.grid-gap-xs    { --grid-gap: var(--space-xs); }
-.grid-gap-sm    { --grid-gap: var(--space-sm); }
-.grid-gap-md    { --grid-gap: var(--space-md); }
-.grid-gap-lg    { --grid-gap: var(--space-lg); }
-.grid-gap-xl    { --grid-gap: var(--space-xl); }
-.grid-gap-xxl   { --grid-gap: var(--space-xxl); }
-.grid-gap-xxxl  { --grid-gap: var(--space-xxxl); }
-.grid-gap-xxxxl { --grid-gap: var(--space-xxxxl); }
+@supports (--css: variables) {
+  .grid-gap-xxxxs { --grid-gap: var(--space-xxxxs); }
+  .grid-gap-xxxs  { --grid-gap: var(--space-xxxs); }
+  .grid-gap-xxs   { --grid-gap: var(--space-xxs); }
+  .grid-gap-xs    { --grid-gap: var(--space-xs); }
+  .grid-gap-sm    { --grid-gap: var(--space-sm); }
+  .grid-gap-md    { --grid-gap: var(--space-md); }
+  .grid-gap-lg    { --grid-gap: var(--space-lg); }
+  .grid-gap-xl    { --grid-gap: var(--space-xl); }
+  .grid-gap-xxl   { --grid-gap: var(--space-xxl); }
+  .grid-gap-xxxl  { --grid-gap: var(--space-xxxl); }
+  .grid-gap-xxxxl { --grid-gap: var(--space-xxxxl); }
+}
 
 @function round-width ($i) {
   //function used to round width to a number with 2 decimal places - used for IE fallback

main/assets/css/base/_typography.scss

@@ -15,7 +15,7 @@ h1, h2, h3, h4 {
   line-height: var(--heading-line-height, 1.2);
 }
 
-// text size
+// font size
 .text-xxxl {
   font-size: var(--text-xxxl, 2.488em);
 }