From d4339d3182a42a60c8f2270cfd58a4902ceabb11 Mon Sep 17 00:00:00 2001 From: Raphael Goetter Date: Sun, 20 Apr 2014 19:52:20 +0200 Subject: [PATCH] add some variables (spacing values and breakpoints) --- less/00-config.less | 44 ++++++++++++++++++++++++--------- less/01-base.less | 60 ++++++++++++++++++++++----------------------- less/02-grids.less | 12 ++++----- less/05-icons.less | 2 +- less/06-rwd.less | 8 +++--- 5 files changed, 73 insertions(+), 53 deletions(-) diff --git a/less/00-config.less b/less/00-config.less index 63c5196..dcef006 100644 --- a/less/00-config.less +++ b/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 -@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 + +// font stacks @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){ diff --git a/less/01-base.less b/less/01-base.less index 71da019..558f536 100644 --- a/less/01-base.less +++ b/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; } -.ma2, .mam { margin: @mediumvalue; } -.ma3, .mal { margin: @largevalue; } -.pa1, .pas { padding: @smallvalue; } -.pa2, .pam { padding: @mediumvalue; } -.pa3, .pal { padding: @largevalue; } +.ma1, .mas { margin: @small-value; } +.ma2, .mam { margin: @medium-value; } +.ma3, .mal { margin: @large-value; } +.pa1, .pas { padding: @small-value; } +.pa2, .pam { padding: @medium-value; } +.pa3, .pal { padding: @large-value; } .mt0, .mtn { margin-top: 0; } -.mt1, .mts { margin-top: @smallvalue; } -.mt2, .mtm { margin-top: @mediumvalue; } -.mt3, .mtl { margin-top: @largevalue; } +.mt1, .mts { margin-top: @small-value; } +.mt2, .mtm { margin-top: @medium-value; } +.mt3, .mtl { margin-top: @large-value; } .mr0, .mrn { margin-right: 0; } -.mr1, .mrs { margin-right: @smallvalue; } -.mr2, .mrm { margin-right: @mediumvalue; } -.mr3, .mrl { margin-right: @largevalue; } +.mr1, .mrs { margin-right: @small-value; } +.mr2, .mrm { margin-right: @medium-value; } +.mr3, .mrl { margin-right: @large-value; } .mb0, .mbn { margin-bottom: 0; } -.mb1, .mbs { margin-bottom: @smallvalue; } -.mb2, .mbm { margin-bottom: @mediumvalue; } -.mb3, .mbl { margin-bottom: @largevalue; } +.mb1, .mbs { margin-bottom: @small-value; } +.mb2, .mbm { margin-bottom: @medium-value; } +.mb3, .mbl { margin-bottom: @large-value; } .ml0, .mln { margin-left: 0; } -.ml1, .mls { margin-left: @smallvalue; } -.ml2, .mlm { margin-left: @mediumvalue; } -.ml3, .mll { margin-left: @largevalue; } +.ml1, .mls { margin-left: @small-value; } +.ml2, .mlm { margin-left: @medium-value; } +.ml3, .mll { margin-left: @large-value; } .pt0, .ptn { padding-top: 0; } -.pt1, .pts { padding-top: @smallvalue; } -.pt2, .ptm { padding-top: @mediumvalue; } -.pt3, .ptl { padding-top: @largevalue; } +.pt1, .pts { padding-top: @small-value; } +.pt2, .ptm { padding-top: @medium-value; } +.pt3, .ptl { padding-top: @large-value; } .pr0, .prn { padding-right: 0; } -.pr1, .prs { padding-right: @smallvalue; } -.pr2, .prm { padding-right: @mediumvalue; } -.pr3, .prl { padding-right: @largevalue; } +.pr1, .prs { padding-right: @small-value; } +.pr2, .prm { padding-right: @medium-value; } +.pr3, .prl { padding-right: @large-value; } .pb0, .pbn { padding-bottom: 0; } -.pb1, .pbs { padding-bottom: @smallvalue; } -.pb2, .pbm { padding-bottom: @mediumvalue; } -.pb3, .pbl { padding-bottom: @largevalue; } +.pb1, .pbs { padding-bottom: @small-value; } +.pb2, .pbm { padding-bottom: @medium-value; } +.pb3, .pbl { padding-bottom: @large-value; } .pl0, .pln { padding-left: 0; } -.pl1, .pls { padding-left: @smallvalue; } -.pl2, .plm { padding-left: @mediumvalue; } -.pl3, .pll { padding-left: @largevalue; } +.pl1, .pls { padding-left: @small-value; } +.pl2, .plm { padding-left: @medium-value; } +.pl3, .pll { padding-left: @large-value; } /* ----------------------------- */ diff --git a/less/02-grids.less b/less/02-grids.less index 0fa962c..9c28027 100644 --- a/less/02-grids.less +++ b/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%} } \ No newline at end of file diff --git a/less/05-icons.less b/less/05-icons.less index 3345e34..ddbdda5 100644 --- a/less/05-icons.less +++ b/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; diff --git a/less/06-rwd.less b/less/06-rwd.less index 3deba12..df8eb0a 100644 --- a/less/06-rwd.less +++ b/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,