add some variables (spacing values and breakpoints)

less/00-config.less

@@ -1,6 +1,6 @@
 // Config file : variables, mixins, ...
 
-// LESS values : adapt them to your design
+// font sizes
 @basefont				: 14px; // if "14px" then 1em = 14px
 @lh						: 1.5; // equiv line-height 1.5em
 @h1-size				: 32px; // equiv "32px"
@@ -9,21 +9,41 @@
 @h4-size				: 20px; // equiv "20px"
 @h5-size				: 18px; // equiv "18px"
 @h6-size				: 16px; // equiv "16px"
-@basecolor				: #000; // text color on body
+
-@basebg					: #fff; // body background color
+// font stacks
-@basecolor-link			: #333; // primary links color;
-@basecolor-link-hover	: #000; // primary hovered/focused links color;
-@smallvalue				: 10px; // small value for margins / paddings
-@mediumvalue			: 20px; // medium value for margins / paddings
-@largevalue				: 30px; // large value for margins / paddings
-@tinyscreen				: 480px; // tiny screens media query
-@smallscreen			: 768px; // small screens media query
-@largescreen			: 1280px; // large screens media query
-@gutter					: 20px; // gutter value (%, px, em, rem, etc) for grid layouts
 @fontstack1				: Helvetica, Arial, sans-serif; // common font
 @fontstack2				: Consolas, 'DejaVu Sans Mono', Courier, monospace; // monospace font
 @fontstack3				: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
 
+// font colors
+@basecolor				: #000; // text color on body
+@basecolor-link			: #333; // primary links color;
+@basecolor-link-hover	: #000; // primary hovered/focused links color;
+
+// backgrounds
+@basebg					: #fff; // body background color
+
+// spacings
+@tiny-value				: .5em; // tiny value for margins / paddings
+@small-value			: 1em; // small value for margins / paddings
+@medium-value			: 2em; // medium value for margins / paddings
+@large-value			: 4em; // large value for margins / paddings
+@extra-large-value		: 6em; // extra large value for margins / paddings
+@ultra-large-value		: 10em; // ultra large value for margins / paddings
+
+// breakpoints
+@tiny-screen			: 320px; // tiny screens media query
+@small-screen			: 480px; // small screens media query
+@medium-screen			: 768px; // small screens media query
+@large-screen			: 1024px; // large screens media query
+@extra-large-screen		: 1280px; // extra large screens media query
+@ultra-large-screen		: 1600px; // ultra large screens media query
+
+// misc
+@gutter					: 20px; // gutter value (%, px, em, rem) for grid layouts
+
+
+
 // LESS mixins : don't touch or you'll be banned ;)
 // px to em/rem 
 .rem(@size, @bf: @basefont){

less/01-base.less

@@ -373,46 +373,46 @@ source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
 */
 .m-reset, .ma0 { margin: 0; }
 .p-reset, .pa0 { padding: 0; }
-.ma1, .mas { margin: @smallvalue; }
+.ma1, .mas { margin: @small-value; }
-.ma2, .mam { margin: @mediumvalue; }
+.ma2, .mam { margin: @medium-value; }
-.ma3, .mal { margin: @largevalue; }
+.ma3, .mal { margin: @large-value; }
-.pa1, .pas { padding: @smallvalue; }
+.pa1, .pas { padding: @small-value; }
-.pa2, .pam { padding: @mediumvalue; }
+.pa2, .pam { padding: @medium-value; }
-.pa3, .pal { padding: @largevalue; }
+.pa3, .pal { padding: @large-value; }
 
 .mt0, .mtn { margin-top: 0; }
-.mt1, .mts { margin-top: @smallvalue; }
+.mt1, .mts { margin-top: @small-value; }
-.mt2, .mtm { margin-top: @mediumvalue; }
+.mt2, .mtm { margin-top: @medium-value; }
-.mt3, .mtl { margin-top: @largevalue; }
+.mt3, .mtl { margin-top: @large-value; }
 .mr0, .mrn { margin-right: 0; }
-.mr1, .mrs { margin-right: @smallvalue; }
+.mr1, .mrs { margin-right: @small-value; }
-.mr2, .mrm { margin-right: @mediumvalue; }
+.mr2, .mrm { margin-right: @medium-value; }
-.mr3, .mrl { margin-right: @largevalue; }
+.mr3, .mrl { margin-right: @large-value; }
 .mb0, .mbn { margin-bottom: 0; }
-.mb1, .mbs { margin-bottom: @smallvalue; }
+.mb1, .mbs { margin-bottom: @small-value; }
-.mb2, .mbm { margin-bottom: @mediumvalue; }
+.mb2, .mbm { margin-bottom: @medium-value; }
-.mb3, .mbl { margin-bottom: @largevalue; }
+.mb3, .mbl { margin-bottom: @large-value; }
 .ml0, .mln { margin-left: 0; }
-.ml1, .mls { margin-left: @smallvalue; }
+.ml1, .mls { margin-left: @small-value; }
-.ml2, .mlm { margin-left: @mediumvalue; }
+.ml2, .mlm { margin-left: @medium-value; }
-.ml3, .mll { margin-left: @largevalue; }
+.ml3, .mll { margin-left: @large-value; }
 
 .pt0, .ptn { padding-top: 0; }
-.pt1, .pts { padding-top: @smallvalue; }
+.pt1, .pts { padding-top: @small-value; }
-.pt2, .ptm { padding-top: @mediumvalue; }
+.pt2, .ptm { padding-top: @medium-value; }
-.pt3, .ptl { padding-top: @largevalue; }
+.pt3, .ptl { padding-top: @large-value; }
 .pr0, .prn { padding-right: 0; }
-.pr1, .prs { padding-right: @smallvalue; }
+.pr1, .prs { padding-right: @small-value; }
-.pr2, .prm { padding-right: @mediumvalue; }
+.pr2, .prm { padding-right: @medium-value; }
-.pr3, .prl { padding-right: @largevalue; }
+.pr3, .prl { padding-right: @large-value; }
 .pb0, .pbn { padding-bottom: 0; }
-.pb1, .pbs { padding-bottom: @smallvalue; }
+.pb1, .pbs { padding-bottom: @small-value; }
-.pb2, .pbm { padding-bottom: @mediumvalue; }
+.pb2, .pbm { padding-bottom: @medium-value; }
-.pb3, .pbl { padding-bottom: @largevalue; }
+.pb3, .pbl { padding-bottom: @large-value; }
 .pl0, .pln { padding-left: 0; }
-.pl1, .pls { padding-left: @smallvalue; }
+.pl1, .pls { padding-left: @small-value; }
-.pl2, .plm { padding-left: @mediumvalue; }
+.pl2, .plm { padding-left: @medium-value; }
-.pl3, .pll { padding-left: @largevalue; }
+.pl3, .pll { padding-left: @large-value; }
 
 
 /* ----------------------------- */

less/02-grids.less

@@ -58,14 +58,14 @@
 .grid1-3 > * + * { width: 75%; }
 
 /* Responsiv-o-matic */
-@media (max-width: @largescreen) {
+@media (max-width: @large-screen) {
 	.grid5 > *,
 	.grid6 > *,
 	.grid8 > *,
 	.grid10 > *,
 	.grid12 > * {width: 33.333%}
 }
-@media (max-width: @smallscreen) {
+@media (max-width: @small-screen) {
 	.grid3 > *,
 	.grid4 > *,
 	.grid5 > *,
@@ -74,7 +74,7 @@
 	.grid10 > *,
 	.grid12 > * {width: 50%}
 }
-@media (max-width: @tinyscreen) {
+@media (max-width: @tiny-screen) {
 	.grid > * > * {width: 100% !important}
 }
 
@@ -119,7 +119,7 @@
 .autogrid10 > * {width: 9%}
 .autogrid12 > * {width: 6.4%}
 
-@media (max-width: @largescreen) {
+@media (max-width: @large-screen) {
 	.autogrid5 > *,
 	.autogrid6 > *,
 	.autogrid8 > *,
@@ -127,7 +127,7 @@
 	.autogrid12 > * {width: 32%}
 }
 
-@media (max-width: @smallscreen) {
+@media (max-width: @small-screen) {
 	.autogrid5 > *,
 	.autogrid6 > *,
 	.autogrid8 > *,
@@ -135,6 +135,6 @@
 	.autogrid12 > * {width: 49%}
 }
 
-@media (max-width: @tinyscreen) {
+@media (max-width: @tiny-screen) {
 	[class*="autogrid"] > * {width: 100%}
 }

less/05-icons.less

@@ -18,7 +18,7 @@
 	speak: none;
 }
 
-@media (min-device-width: @smallscreen) {
+@media (min-device-width: @small-screen) {
 	.icon:before,
 	.icon.after:after {
 	font: 1em/0.6 sans-serif;

less/06-rwd.less

@@ -3,7 +3,7 @@
 /* ==desktop and retina medias   */
 /* ----------------------------- */
 
-@media (min-width: @smallscreen) {
+@media (min-width: @small-screen) {
 /* here go rules for big resources and big screens like: background-images, font-faces, etc. */
 }
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
@@ -14,7 +14,7 @@
 /* ==Responsive large / medium / tiny */
 /* ---------------------------------- */
 
-@media (min-width: @largescreen) {
+@media (min-width: @large-screen) {
 
 	/* layouts for large screens */
 	.large-hidden { display: none !important; }
@@ -56,7 +56,7 @@
 	.large-ma0 { margin: 0 !important; }
 }
 
-@media (max-width: @smallscreen) {
+@media (max-width: @small-screen) {
 
 	/* quick reset in small resolution and less */
 	.w600p,
@@ -113,7 +113,7 @@
 	.small-ma0 { margin: 0 !important; }
 }
 
-@media (max-width: @tinyscreen) {
+@media (max-width: @tiny-screen) {
 
 	/* quick tiny resolution reset */
 	.mod,