-
Notifications
You must be signed in to change notification settings - Fork 1
/
00-variables.less
79 lines (63 loc) · 2.88 KB
/
00-variables.less
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
/**
* "such.less" CSS boilerplate framework
* 00-variables.less
* https://github.com/MarcDiethelm/such.less
* License: MIT
* Copyright 2014 Marc Diethelm, Simon Harte
*/
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// ASSET PATHS
// @static-base: is defined in Gruntfile.js and injected into Less
@path-fonts : '@{static-base}/fonts';
@path-img : '@{static-base}/img';
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// TYPOGRAPHY
@font-default : Helvetica, sans-serif;
@font-title-default : 'Open Sans Light', Helvetica, sans-serif;
//@font-icons : 'Icons';
@font-monospace : Consolas, Monaco, 'Andale Mono', monospace; // as on MDN
@font-size-default : 13px;
@line-height-default: 17px;
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// COLORS
@color-bg-body : #e4e4e4;
@color-copy : #444;
@color-link : teal;
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// LAYOUT
@max-content-width : 940px;
@grid-cols : 12;
@grid-gutter : 20px;
@grid-type : 'fluid'; // 'fluid' or 'fixed'
@gutter-type : 'fixed'; // 'fluid' or 'fixed'
@h-spacing : 20px;
@v-spacing : 15px;
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// BREAKPOINTS and MEDIA QUERIES
// Breakpoints
@bp-1: 33em; // s <-> m | 1 col <-> 2 col
@bp-2: 48em; // m <-> l | 2 col <-> 3 col
@bp-3: 64em; // l <-> xl | 3 col <-> 4 col
@emPxRatio: 1/16;
// Viewport Boundaries
@vp-small-max: @bp-1;
@vp-medium-min: (@bp-1 + @emPxRatio);
@vp-medium-max: @bp-2;
@vp-large-min: (@bp-2 + @emPxRatio);
@vp-large-max: @bp-3;
@vp-x-large-min: (@bp-3 + @emPxRatio);
// Media Queries
@m-small: ~"(max-width: @{vp-small-max})";
@m-medium: ~"(min-width: @{vp-medium-min}) and (max-width: @{vp-medium-max})";
@m-medium-down: ~"(max-width: @{vp-medium-max})";
@m-medium-up: ~"(min-width: @{vp-medium-min})";
@m-large: ~"(min-width: @{vp-large-min}) and (max-width: @{vp-large-max})";
@m-large-up: ~"(min-width: @{vp-large-min})";
@m-large-down: ~"(max-width: @{vp-large-max})";
@m-x-large: ~"(min-width: @{vp-x-large-min})";
// High DPI ("Retina") Query
@px-ratio: 1.5;
@default-dpi: 96;
@hdpi: @default-dpi * @px-ratio;
// https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#-moz-device-pixel-ratio
@m-retina: ~"(-webkit-min-device-pixel-ratio: @{px-ratio}) /* Webkit-based browsers */, (min--moz-device-pixel-ratio: @{px-ratio}) /* Older Firefox browsers (prior to Firefox 16) */, (min-resolution: @{px-ratio}dppx) /* The standard way */, (min-resolution: @{hdpi}dpi) /* dppx fallback */";