dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add some variables (spacing values and breakpoints)

Browse source
This commit is contained in:
Raphael Goetter 2014-04-20 19:52:20 +02:00
parent 57dc070697
commit d4339d3182
5 changed files with 73 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
less/00-config.less
View file

@ -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){

60
less/01-base.less
View file

@ -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; }
/* ----------------------------- */

12
less/02-grids.less
View file

@ -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%}
}

2
less/05-icons.less
View file

@ -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;

8
less/06-rwd.less
View file

@ -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,