Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

refactored grid.less to output nothing when included, added better su…

…pport for including common mixins
  • Loading branch information...
commit 52ab4f8b43128e6c11775ad45397b5b04b5d28f3 1 parent d74b3a6
authored July 26, 2010
0  blueprint/settings.less → blueprint/_settings.less
File renamed without changes
623  blueprint/screen.css
... ...
@@ -1,91 +1,532 @@
1  
-html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,nav,section{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
2  
-article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block;}
3  
-body{line-height:1.5;}
4  
-table{border-collapse:separate;border-spacing:0;}
5  
-caption,th,td{text-align:left;font-weight:normal;}
6  
-table,td,th{vertical-align:middle;}
7  
-blockquote:before,blockquote:after,q:before,q:after{content:"";}
8  
-blockquote,q{quotes:"" "";}
9  
-a img{border:none;}
10  
-html{font-size:100.01%;}
11  
-body{font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;}
12  
-h1,h2,h3,h4,h5,h6{font-weight:normal;color:#111;}
13  
-h1{font-size:3em;line-height:1;margin-bottom:0.5em;}
14  
-h2{font-size:2em;margin-bottom:0.75em;}
15  
-h3{font-size:1.5em;line-height:1;margin-bottom:1em;}
16  
-h4{font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
17  
-h5{font-size:1em;font-weight:bold;margin-bottom:1.5em;}
18  
-h6{font-size:1em;font-weight:bold;}
19  
-h1 img,h2 img,h3 img,h4 img,h5 img,h6 img{margin:0;}
20  
-p{margin:0 0 1.5em;}
21  
-img.left{float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
22  
-img.right{float:right;margin:1.5em 0 1.5em 1.5em;}
23  
-a:focus,a:hover{color:#000;}
24  
-a{color:#009;text-decoration:underline;}
25  
-blockquote{margin:1.5em;color:#666;font-style:italic;}
26  
-strong{font-weight:bold;}
27  
-em,dfn{font-style:italic;}
28  
-dfn{font-weight:bold;}
29  
-sup,sub{line-height:0;}
30  
-abbr,acronym{border-bottom:1px dotted #666;}
31  
-address{margin:0 0 1.5em;font-style:italic;}
32  
-del{color:#666;}
33  
-pre{margin:1.5em 0;white-space:pre;}
34  
-pre,code,tt{font:1em 'andale mono','lucida console',monospace;line-height:1.5;}
35  
-li ul,li ol{margin:0;}
36  
-ul,ol{margin:0 1.5em 1.5em 0;padding-left:3.333em;}
37  
-ul{list-style-type:disc;}
38  
-ol{list-style-type:decimal;}
39  
-dl{margin:0 0 1.5em 0;}
40  
-dl dt{font-weight:bold;}
41  
-dd{margin-left:1.5em;}
42  
-table{margin-bottom:1.4em;width:100%;}
43  
-th{font-weight:bold;}
44  
-thead th{background:#c3d9ff;}
45  
-th,td,caption{padding:4px 10px 4px 5px;}
46  
-tr.even td{background:#e5ecf9;}
47  
-tfoot{font-style:italic;}
48  
-caption{background:#eee;}
49  
-.small{font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
50  
-.large{font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
51  
-.hide{display:none;}
52  
-.quiet{color:#666;}
53  
-.loud{color:#000;}
54  
-.highlight{background:#ff0;}
55  
-.added{background:#060;color:#fff;}
56  
-.removed{background:#900;color:#fff;}
57  
-.first{margin-left:0;padding-left:0;}
58  
-.last{margin-right:0;padding-right:0;}
59  
-.top{margin-top:0;padding-top:0;}
60  
-.bottom{margin-bottom:0;padding-bottom:0;}
61  
-label{font-weight:bold;}
62  
-fieldset{padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
63  
-legend{font-weight:bold;font-size:1.2em;}
64  
-input[type=text],input[type=password],input.text,input.title,textarea,select{background-color:#fff;border:1px solid #bbb;}
65  
-input[type=text]:focus,input[type=password]:focus,input.text:focus,input.title:focus,textarea:focus,select:focus{border-color:#666;}
66  
-input[type=text],input[type=password],input.text,input.title,textarea,select{margin:0.5em 0;}
67  
-input.text,input.title{width:300px;padding:5px;}
68  
-input.title{font-size:1.5em;}
69  
-textarea{width:390px;height:250px;padding:5px;}
70  
-input[type=checkbox],input[type=radio],input.checkbox,input.radio{position:relative;top:.25em;}
71  
-form.inline{line-height:3;}
72  
-form.inline p{margin-bottom:0;}
73  
-.error,.notice,.success{padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
74  
-.error{background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
75  
-.notice{background:#FFF6BF;color:#514721;border-color:#FFD324;}
76  
-.success{background:#E6EFC2;color:#264409;border-color:#C6D880;}
77  
-.error a{color:#8a1f11;}
78  
-.notice a{color:#514721;}
79  
-.success a{color:#264409;}
80  
-.container{width:950px;margin:0 auto;}
81  
-.showgrid{background:url(src/grid.png);}
82  
-.last{margin-right:0;}
83  
-.border{padding-right:4px;margin-right:5px;border-right:1px solid #eeeeee;}
84  
-.colborder{padding-right:24px;margin-right:25px;border-right:1px solid #eeeeee;}
85  
-.prepend-top{margin-top:1.5em;}
86  
-.append-bottom{margin-bottom:1.5em;}
87  
-.box{padding:1.5em;margin-bottom:1.5em;background:#E5ECF9;}
88  
-hr{background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;margin:0 0 1.45em;border:none;}
89  
-hr.space{background:#fff;color:#fff;visibility:hidden;}
90  
-.clearfix,.container{display:block;}.clearfix:after,.container:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
91  
-.clear{clear:both;}
  1
+/* -----------------------------------------------------------------------
  2
+
  3
+
  4
+ Blueprint CSS Framework 0.9
  5
+ http://blueprintcss.org
  6
+
  7
+   * Copyright (c) 2007-Present. See LICENSE for more info.
  8
+   * See README for instructions on how to use Blueprint.
  9
+   * For credits and origins, see AUTHORS.
  10
+   * You shouldn't make any changes to this file - just modify settings.less
  11
+     and override in your own LESS as needed!
  12
+
  13
+----------------------------------------------------------------------- */
  14
+/* --------------------------------------------------------------
  15
+
  16
+   settings.less
  17
+   * Here's where you set your column specs.
  18
+
  19
+   By default, the grid is 950px wide, with 24 columns
  20
+   spanning 30px, and a 10px margin between columns.
  21
+
  22
+    Defaults:
  23
+    @column_width: 30px;
  24
+    @gutter_width: 10px;
  25
+    @column_count: 24;
  26
+
  27
+   If you need fewer or more columns, go ahead and add them here,
  28
+   the defaults will remain at the top of screen.less.
  29
+
  30
+-------------------------------------------------------------- */
  31
+/* --------------------------------------------------------------
  32
+
  33
+   reset.less
  34
+   * Resets default browser CSS.
  35
+
  36
+-------------------------------------------------------------- */
  37
+html,
  38
+body,
  39
+div,
  40
+span,
  41
+object,
  42
+iframe,
  43
+h1,
  44
+h2,
  45
+h3,
  46
+h4,
  47
+h5,
  48
+h6,
  49
+p,
  50
+blockquote,
  51
+pre,
  52
+a,
  53
+abbr,
  54
+acronym,
  55
+address,
  56
+code,
  57
+del,
  58
+dfn,
  59
+em,
  60
+img,
  61
+q,
  62
+dl,
  63
+dt,
  64
+dd,
  65
+ol,
  66
+ul,
  67
+li,
  68
+fieldset,
  69
+form,
  70
+label,
  71
+legend,
  72
+table,
  73
+caption,
  74
+tbody,
  75
+tfoot,
  76
+thead,
  77
+tr,
  78
+th,
  79
+td,
  80
+article,
  81
+aside,
  82
+dialog,
  83
+figure,
  84
+footer,
  85
+header,
  86
+hgroup,
  87
+nav,
  88
+section {
  89
+  margin: 0;
  90
+  padding: 0;
  91
+  border: 0;
  92
+  font-weight: inherit;
  93
+  font-style: inherit;
  94
+  font-size: 100%;
  95
+  font-family: inherit;
  96
+  vertical-align: baseline;
  97
+}
  98
+article,
  99
+aside,
  100
+dialog,
  101
+figure,
  102
+footer,
  103
+header,
  104
+hgroup,
  105
+nav,
  106
+section {
  107
+  display: block;
  108
+}
  109
+body {
  110
+  line-height: 1.5;
  111
+}
  112
+/* Tables still need 'cellspacing="0"' in the markup. */
  113
+table {
  114
+  border-collapse: separate;
  115
+  border-spacing: 0;
  116
+}
  117
+caption, th, td {
  118
+  text-align: left;
  119
+  font-weight: normal;
  120
+}
  121
+table, td, th {
  122
+  vertical-align: middle;
  123
+}
  124
+/* Remove possible quote marks (") from <q>, <blockquote>. */
  125
+blockquote:before,
  126
+blockquote:after,
  127
+q:before,
  128
+q:after {
  129
+  content: "";
  130
+}
  131
+blockquote, q {
  132
+  quotes: "" "";
  133
+}
  134
+/* Remove annoying border on linked images. */
  135
+a img {
  136
+  border: none;
  137
+}
  138
+/* Get some prettier rules */
  139
+hr {
  140
+  background: #ddd;
  141
+  color: #ddd;
  142
+  clear: both;
  143
+  float: none;
  144
+  width: 100%;
  145
+  height: .1em;
  146
+  margin: 0 0 1.45em;
  147
+  border: none;
  148
+}
  149
+hr.space {
  150
+  background: #fff;
  151
+  color: #fff;
  152
+  visibility: hidden;
  153
+}
  154
+/* --------------------------------------------------------------
  155
+
  156
+   typography.less
  157
+   * Sets up some sensible default typography.
  158
+
  159
+-------------------------------------------------------------- */
  160
+/* --------------------------------------------------------------
  161
+
  162
+   _typography.less
  163
+   * This file is meant to be used as an include.
  164
+
  165
+-------------------------------------------------------------- */
  166
+/* Default font settings.
  167
+   The font-size percentage is of 16px. (0.75 * 16px = 12px) */
  168
+html {
  169
+  font-size: 100.01%;
  170
+}
  171
+body {
  172
+  font-size: 75%;
  173
+  color: #222;
  174
+  background: #fff;
  175
+  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  176
+}
  177
+/* Headings
  178
+-------------------------------------------------------------- */
  179
+h1,
  180
+h2,
  181
+h3,
  182
+h4,
  183
+h5,
  184
+h6 {
  185
+  font-weight: normal;
  186
+  color: #111;
  187
+}
  188
+h1 {
  189
+  font-size: 3em;
  190
+  line-height: 1;
  191
+  margin-bottom: 0.5em;
  192
+}
  193
+h2 {
  194
+  font-size: 2em;
  195
+  margin-bottom: 0.75em;
  196
+}
  197
+h3 {
  198
+  font-size: 1.5em;
  199
+  line-height: 1;
  200
+  margin-bottom: 1em;
  201
+}
  202
+h4 {
  203
+  font-size: 1.2em;
  204
+  line-height: 1.25;
  205
+  margin-bottom: 1.25em;
  206
+}
  207
+h5 {
  208
+  font-size: 1em;
  209
+  font-weight: bold;
  210
+  margin-bottom: 1.5em;
  211
+}
  212
+h6 {
  213
+  font-size: 1em;
  214
+  font-weight: bold;
  215
+}
  216
+h1 img,
  217
+h2 img,
  218
+h3 img,
  219
+h4 img,
  220
+h5 img,
  221
+h6 img {
  222
+  margin: 0;
  223
+}
  224
+/* Text elements
  225
+-------------------------------------------------------------- */
  226
+p {
  227
+  margin: 0 0 1.5em;
  228
+}
  229
+img.left {
  230
+  float: left;
  231
+  margin: 1.5em 1.5em 1.5em 0;
  232
+  padding: 0;
  233
+}
  234
+img.right {
  235
+  float: right;
  236
+  margin: 1.5em 0 1.5em 1.5em;
  237
+}
  238
+a:focus, a:hover {
  239
+  color: #000;
  240
+}
  241
+a {
  242
+  color: #009;
  243
+  text-decoration: underline;
  244
+}
  245
+blockquote {
  246
+  margin: 1.5em;
  247
+  color: #666;
  248
+  font-style: italic;
  249
+}
  250
+strong {
  251
+  font-weight: bold;
  252
+}
  253
+em, dfn {
  254
+  font-style: italic;
  255
+}
  256
+dfn {
  257
+  font-weight: bold;
  258
+}
  259
+sup, sub {
  260
+  line-height: 0;
  261
+}
  262
+abbr, acronym {
  263
+  border-bottom: 1px dotted #666;
  264
+}
  265
+address {
  266
+  margin: 0 0 1.5em;
  267
+  font-style: italic;
  268
+}
  269
+del {
  270
+  color: #666;
  271
+}
  272
+pre {
  273
+  margin: 1.5em 0;
  274
+  white-space: pre;
  275
+}
  276
+pre, code, tt {
  277
+  font: 1em 'andale mono', 'lucida console', monospace;
  278
+  line-height: 1.5;
  279
+}
  280
+/* Lists
  281
+-------------------------------------------------------------- */
  282
+li ul, li ol {
  283
+  margin: 0;
  284
+}
  285
+ul, ol {
  286
+  margin: 0 1.5em 1.5em 0;
  287
+  padding-left: 3.333em;
  288
+}
  289
+ul {
  290
+  list-style-type: disc;
  291
+}
  292
+ol {
  293
+  list-style-type: decimal;
  294
+}
  295
+dl {
  296
+  margin: 0 0 1.5em 0;
  297
+}
  298
+dl dt {
  299
+  font-weight: bold;
  300
+}
  301
+dd {
  302
+  margin-left: 1.5em;
  303
+}
  304
+/* Tables
  305
+-------------------------------------------------------------- */
  306
+table {
  307
+  margin-bottom: 1.4em;
  308
+  width: 100%;
  309
+}
  310
+th {
  311
+  font-weight: bold;
  312
+}
  313
+thead th {
  314
+  background: #c3d9ff;
  315
+}
  316
+th, td, caption {
  317
+  padding: 4px 10px 4px 5px;
  318
+}
  319
+tr.even td {
  320
+  background: #e5ecf9;
  321
+}
  322
+tfoot {
  323
+  font-style: italic;
  324
+}
  325
+caption {
  326
+  background: #eee;
  327
+}
  328
+/* Misc classes
  329
+-------------------------------------------------------------- */
  330
+.small {
  331
+  font-size: .8em;
  332
+  margin-bottom: 1.875em;
  333
+  line-height: 1.875em;
  334
+}
  335
+.large {
  336
+  font-size: 1.2em;
  337
+  line-height: 2.5em;
  338
+  margin-bottom: 1.25em;
  339
+}
  340
+.hide {
  341
+  display: none;
  342
+}
  343
+.quiet {
  344
+  color: #666;
  345
+}
  346
+.loud {
  347
+  color: #000;
  348
+}
  349
+.highlight {
  350
+  background: #ff0;
  351
+}
  352
+.added {
  353
+  background: #060;
  354
+  color: #fff;
  355
+}
  356
+.removed {
  357
+  background: #900;
  358
+  color: #fff;
  359
+}
  360
+.first {
  361
+  margin-left: 0;
  362
+  padding-left: 0;
  363
+}
  364
+.last {
  365
+  margin-right: 0;
  366
+  padding-right: 0;
  367
+}
  368
+.top {
  369
+  margin-top: 0;
  370
+  padding-top: 0;
  371
+}
  372
+.bottom {
  373
+  margin-bottom: 0;
  374
+  padding-bottom: 0;
  375
+}
  376
+/* --------------------------------------------------------------
  377
+
  378
+   forms.css
  379
+   * Sets up some default styling for forms
  380
+   * Gives you classes to enhance your forms
  381
+
  382
+   Usage:
  383
+   * For text fields, use class .title or .text
  384
+   * For inline forms, use .inline (even when using columns)
  385
+
  386
+-------------------------------------------------------------- */
  387
+label {
  388
+  font-weight: bold;
  389
+}
  390
+fieldset {
  391
+  padding: 1.4em;
  392
+  margin: 0 0 1.5em 0;
  393
+  border: 1px solid #ccc;
  394
+}
  395
+legend {
  396
+  font-weight: bold;
  397
+  font-size: 1.2em;
  398
+}
  399
+/* Form fields
  400
+-------------------------------------------------------------- */
  401
+input[type=text],
  402
+input[type=password],
  403
+input.text,
  404
+input.title,
  405
+textarea,
  406
+select {
  407
+  background-color: #fff;
  408
+  border: 1px solid #bbb;
  409
+}
  410
+input[type=text]:focus,
  411
+input[type=password]:focus,
  412
+input.text:focus,
  413
+input.title:focus,
  414
+textarea:focus,
  415
+select:focus {
  416
+  border-color: #666;
  417
+}
  418
+input[type=text],
  419
+input[type=password],
  420
+input.text,
  421
+input.title,
  422
+textarea,
  423
+select {
  424
+  margin: 0.5em 0;
  425
+}
  426
+input.text, input.title {
  427
+  width: 300px;
  428
+  padding: 5px;
  429
+}
  430
+input.title {
  431
+  font-size: 1.5em;
  432
+}
  433
+textarea {
  434
+  width: 390px;
  435
+  height: 250px;
  436
+  padding: 5px;
  437
+}
  438
+input[type=checkbox],
  439
+input[type=radio],
  440
+input.checkbox,
  441
+input.radio {
  442
+  position: relative;
  443
+  top: .25em;
  444
+}
  445
+form.inline {
  446
+  line-height: 3;
  447
+}
  448
+form.inline p {
  449
+  margin-bottom: 0;
  450
+}
  451
+/* Success, notice and error boxes
  452
+-------------------------------------------------------------- */
  453
+.error, .notice, .success {
  454
+  padding: .8em;
  455
+  margin-bottom: 1em;
  456
+  border: 2px solid #ddd;
  457
+}
  458
+.error {
  459
+  background: #FBE3E4;
  460
+  color: #8a1f11;
  461
+  border-color: #FBC2C4;
  462
+}
  463
+.notice {
  464
+  background: #FFF6BF;
  465
+  color: #514721;
  466
+  border-color: #FFD324;
  467
+}
  468
+.success {
  469
+  background: #E6EFC2;
  470
+  color: #264409;
  471
+  border-color: #C6D880;
  472
+}
  473
+.error a {
  474
+  color: #8a1f11;
  475
+}
  476
+.notice a {
  477
+  color: #514721;
  478
+}
  479
+.success a {
  480
+  color: #264409;
  481
+}
  482
+/* --------------------------------------------------------------
  483
+
  484
+   grid.css
  485
+   * Sets up an easy-to-use grid of 24 columns.
  486
+
  487
+   By default, the grid is 950px wide, with 24 columns
  488
+   spanning 30px, and a 10px margin between columns.
  489
+
  490
+   If you need fewer or more columns, namespaces or semantic
  491
+   element names, use the compressor script (lib/compress.rb)
  492
+
  493
+-------------------------------------------------------------- */
  494
+/* --------------------------------------------------------------
  495
+
  496
+   settings.less
  497
+   * Here's where you set your column specs.
  498
+
  499
+   By default, the grid is 950px wide, with 24 columns
  500
+   spanning 30px, and a 10px margin between columns.
  501
+
  502
+    Defaults:
  503
+    @column_width: 30px;
  504
+    @gutter_width: 10px;
  505
+    @column_count: 24;
  506
+
  507
+   If you need fewer or more columns, go ahead and add them here,
  508
+   the defaults will remain at the top of screen.less.
  509
+
  510
+-------------------------------------------------------------- */
  511
+/* A container should group all your columns. */
  512
+/* Use this class on any .span / container to see the grid. */
  513
+/* Columns
  514
+-------------------------------------------------------------- */
  515
+/* Sets up basic grid floating and margin. */
  516
+/* The last column in a row needs this class. */
  517
+/* input.column causes a rendering error */
  518
+/* Add these to a column to append empty cols. */
  519
+/* Add these to a column to prepend empty cols. */
  520
+/* Border on right hand side of a column. */
  521
+/* Border with more whitespace, spans one column. */
  522
+/* Use these classes on an element to push it into the
  523
+next column, or to pull it into the previous column.  */
  524
+/* Misc classes and elements
  525
+-------------------------------------------------------------- */
  526
+/* In case you need to add a gutter above/below an element */
  527
+/* Use a .box to create a padded box inside a column.  */
  528
+/* Clearing floats without extra markup
  529
+   Based on How To Clear Floats Without Structural Markup by PiE
  530
+   [http://www.positioniseverything.net/easyclearing.html] */
  531
+/* Regular clearing
  532
+   apply to column that should drop below previous ones. */
10  blueprint/screen.less
@@ -12,9 +12,9 @@
12 12
 
13 13
 ----------------------------------------------------------------------- */
14 14
 
15  
-@import 'settings.less';
  15
+@import '_settings';
16 16
 
17  
-@import 'src/reset.less';
18  
-@import 'src/typography.less';
19  
-@import 'src/forms.less';
20  
-@import 'src/grid.less';
  17
+@import 'src/reset';
  18
+@import 'src/typography';
  19
+@import 'src/forms';
  20
+@import 'src/grid';
28  blueprint/src/_typography.less
... ...
@@ -0,0 +1,28 @@
  1
+/* --------------------------------------------------------------
  2
+
  3
+   _typography.less
  4
+   * This file is meant to be used as an include.
  5
+
  6
+-------------------------------------------------------------- */
  7
+
  8
+.Type {
  9
+  .small()      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
  10
+  .large()      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
  11
+  .hide()       { display: none; }
  12
+
  13
+  .quiet()      { color: #666; }
  14
+  .loud()       { color: #000; }
  15
+  .highlight()  { background:#ff0; }
  16
+  .added()      { background:#060; color: #fff; }
  17
+  .removed()    { background:#900; color: #fff; }
  18
+
  19
+  .first()      { margin-left:0; padding-left:0; }
  20
+  .last()       { margin-right:0; padding-right:0; }
  21
+  .top()        { margin-top:0; padding-top:0; }
  22
+  .bottom()     { margin-bottom:0; padding-bottom:0; }
  23
+}
  24
+
  25
+.Image {
  26
+  .left()       { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
  27
+  .right()      { float: right; margin: 1.5em 0 1.5em 1.5em; }
  28
+}
42  blueprint/src/grid.less
@@ -11,19 +11,23 @@
11 11
 
12 12
 -------------------------------------------------------------- */
13 13
 
  14
+@import '../_settings';
  15
+
14 16
 @input_border_width: 1px;
15 17
 @column_border_width: 1px;
16 18
 
17 19
 @column_outer_width: @column_width + @gutter_width;
18 20
 
19 21
 /* A container should group all your columns. */
20  
-.container {
  22
+.container() {
21 23
   width: (@column_outer_width * @column_count) - @gutter_width;
22 24
   margin: 0 auto;
  25
+  
  26
+  .clearfix();
23 27
 }
24 28
 
25 29
 /* Use this class on any .span / container to see the grid. */
26  
-.showgrid {
  30
+.showgrid() {
27 31
   background: url(src/grid.png);
28 32
 }
29 33
 
@@ -39,7 +43,7 @@
39 43
 }
40 44
 
41 45
 /* The last column in a row needs this class. */
42  
-.last { margin-right: 0; }
  46
+.last() { margin-right: 0; }
43 47
 
44 48
 /* input.column causes a rendering error */
45 49
 .input-column(@columns: @column_count) {
@@ -63,14 +67,14 @@
63 67
 
64 68
 
65 69
 /* Border on right hand side of a column. */
66  
-.border {
  70
+.border() {
67 71
   padding-right: (@gutter_width * .5) - @column_border_width;
68 72
   margin-right: @gutter_width * .5;
69 73
   border-right: @column_border_width solid #eee;
70 74
 }
71 75
 
72 76
 /* Border with more whitespace, spans one column. */
73  
-.colborder {
  77
+.colborder() {
74 78
   /* TODO: a variable should store this width, for legibility
75 79
            but something's broken with scoping in less.js */
76 80
   padding-right: ((@column_outer_width + @gutter_width) * .5) - @column_border_width;
@@ -97,44 +101,26 @@ next column, or to pull it into the previous column.  */
97 101
 -------------------------------------------------------------- */
98 102
 
99 103
 /* In case you need to add a gutter above/below an element */
100  
-.prepend-top {
  104
+.prepend-top() {
101 105
   margin-top:1.5em;
102 106
 }
103  
-.append-bottom {
  107
+.append-bottom() {
104 108
   margin-bottom:1.5em;
105 109
 }
106 110
 
107 111
 /* Use a .box to create a padded box inside a column.  */
108  
-.box {
  112
+.box() {
109 113
   padding: 1.5em;
110 114
   margin-bottom: 1.5em;
111 115
   background: #E5ECF9;
112 116
 }
113 117
 
114  
-/* Use this to create a horizontal ruler across a column. */
115  
-hr {
116  
-  background: #ddd;
117  
-  color: #ddd;
118  
-  clear: both;
119  
-  float: none;
120  
-  width: 100%;
121  
-  height: .1em;
122  
-  margin: 0 0 1.45em;
123  
-  border: none;
124  
-}
125  
-
126  
-hr.space {
127  
-  background: #fff;
128  
-  color: #fff;
129  
-  visibility: hidden;
130  
-}
131  
-
132 118
 
133 119
 /* Clearing floats without extra markup
134 120
    Based on How To Clear Floats Without Structural Markup by PiE
135 121
    [http://www.positioniseverything.net/easyclearing.html] */
136 122
 
137  
-.clearfix, .container {
  123
+.clearfix() {
138 124
   display: block;
139 125
 
140 126
   &:after {
@@ -150,4 +136,4 @@ hr.space {
150 136
 /* Regular clearing
151 137
    apply to column that should drop below previous ones. */
152 138
 
153  
-.clear { clear:both; }
  139
+.clear() { clear:both; }
18  blueprint/src/reset.less
@@ -43,3 +43,21 @@ blockquote, q { quotes: "" ""; }
43 43
 
44 44
 /* Remove annoying border on linked images. */
45 45
 a img { border: none; }
  46
+
  47
+/* Get some prettier rules */
  48
+hr {
  49
+  background: #ddd;
  50
+  color: #ddd;
  51
+  clear: both;
  52
+  float: none;
  53
+  width: 100%;
  54
+  height: .1em;
  55
+  margin: 0 0 1.45em;
  56
+  border: none;
  57
+}
  58
+
  59
+hr.space {
  60
+  background: #fff;
  61
+  color: #fff;
  62
+  visibility: hidden;
  63
+}
143  blueprint/src/typography.css
... ...
@@ -0,0 +1,143 @@
  1
+ {
  2
+  font-size: 0.8em;
  3
+  margin-bottom: 1.875em;
  4
+  line-height: 1.875em;
  5
+}
  6
+html { font-size: 100.01%; }
  7
+body {
  8
+  font-size: 75%;
  9
+  color: #222222;
  10
+  background: #ffffff;
  11
+  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  12
+}
  13
+h1, h2, h3, h4, h5, h6 {
  14
+  font-weight: normal;
  15
+  color: #111111;
  16
+}
  17
+h1 {
  18
+  font-size: 3em;
  19
+  line-height: 1;
  20
+  margin-bottom: 0.5em;
  21
+}
  22
+h2 {
  23
+  font-size: 2em;
  24
+  margin-bottom: 0.75em;
  25
+}
  26
+h3 {
  27
+  font-size: 1.5em;
  28
+  line-height: 1;
  29
+  margin-bottom: 1em;
  30
+}
  31
+h4 {
  32
+  font-size: 1.2em;
  33
+  line-height: 1.25;
  34
+  margin-bottom: 1.25em;
  35
+}
  36
+h5 {
  37
+  font-size: 1em;
  38
+  font-weight: bold;
  39
+  margin-bottom: 1.5em;
  40
+}
  41
+h6 {
  42
+  font-size: 1em;
  43
+  font-weight: bold;
  44
+}
  45
+h1 img { margin: 0; }
  46
+h2 img { margin: 0; }
  47
+h3 img { margin: 0; }
  48
+h4 img { margin: 0; }
  49
+h5 img { margin: 0; }
  50
+h6 img { margin: 0; }
  51
+p { margin: 0 0 1.5em; }
  52
+p img.left {
  53
+  float: left;
  54
+  margin: 1.5em 1.5em 1.5em 0;
  55
+  padding: 0;
  56
+}
  57
+p img.right {
  58
+  float: right;
  59
+  margin: 1.5em 0 1.5em 1.5em;
  60
+}
  61
+a:focus { color: #000000; }
  62
+a:hover { color: #000000; }
  63
+a {
  64
+  color: #000099;
  65
+  text-decoration: underline;
  66
+}
  67
+blockquote {
  68
+  margin: 1.5em;
  69
+  color: #666666;
  70
+  font-style: italic;
  71
+}
  72
+strong { font-weight: bold; }
  73
+em, dfn { font-style: italic; }
  74
+dfn { font-weight: bold; }
  75
+sup, sub { line-height: 0; }
  76
+abbr, acronym { border-bottom: 1px dotted #666666; }
  77
+address {
  78
+  margin: 0 0 1.5em;
  79
+  font-style: italic;
  80
+}
  81
+del { color: #666666; }
  82
+pre {
  83
+  margin: 1.5em 0;
  84
+  white-space: pre;
  85
+}
  86
+pre, code, tt {
  87
+  font: 1em 'andale mono', 'lucida console', monospace;
  88
+  line-height: 1.5;
  89
+}
  90
+li ul { margin: 0; }
  91
+li ol { margin: 0; }
  92
+ul, ol {
  93
+  margin: 0 1.5em 1.5em 0;
  94
+  padding-left: 3.333em;
  95
+}
  96
+ul { list-style-type: disc; }
  97
+ol { list-style-type: decimal; }
  98
+dl { margin: 0 0 1.5em 0; }
  99
+dl dt { font-weight: bold; }
  100
+dd { margin-left: 1.5em; }
  101
+table {
  102
+  margin-bottom: 1.4em;
  103
+  width: 100%;
  104
+}
  105
+th { font-weight: bold; }
  106
+thead th { background: #c3d9ff; }
  107
+th, td, caption { padding: 4px 10px 4px 5px; }
  108
+tr.even td { background: #e5ecf9; }
  109
+tfoot { font-style: italic; }
  110
+caption { background: #eeeeee; }
  111
+.large {
  112
+  font-size: 1.2em;
  113
+  line-height: 2.5em;
  114
+  margin-bottom: 1.25em;
  115
+}
  116
+.hide { display: none; }
  117
+.quiet { color: #666666; }
  118
+.loud { color: #000000; }
  119
+.highlight { background: #ffff00; }
  120
+.added {
  121
+  background: #006600;
  122
+  color: #ffffff;
  123
+}
  124
+.removed {
  125
+  background: #990000;
  126
+  color: #ffffff;
  127
+}
  128
+.first {
  129
+  margin-left: 0;
  130
+  padding-left: 0;
  131
+}
  132
+.last {
  133
+  margin-right: 0;
  134
+  padding-right: 0;
  135
+}
  136
+.top {
  137
+  margin-top: 0;
  138
+  padding-top: 0;
  139
+}
  140
+.bottom {
  141
+  margin-bottom: 0;
  142
+  padding-bottom: 0;
  143
+}
15  blueprint/src/typography.less
@@ -5,6 +5,8 @@
5 5
 
6 6
 -------------------------------------------------------------- */
7 7
 
  8
+@import '_typography';
  9
+
8 10
 /* Default font settings.
9 11
    The font-size percentage is of 16px. (0.75 * 16px = 12px) */
10 12
 html { font-size:100.01%; }
@@ -39,15 +41,8 @@ h4 img, h5 img, h6 img {
39 41
 
40 42
 p           { margin: 0 0 1.5em; }
41 43
 
42  
-/* FIXME: restore to img.left - this is a less.js issue */
43  
-.image() {
44  
-  .left  { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
45  
-  .right { float: right; margin: 1.5em 0 1.5em 1.5em; }
46  
-}
47  
-p {
48  
-  img.left { .image>.left; }
49  
-  img.right { .image>.right; }
50  
-}
  44
+img.left { .Image .left; }
  45
+img.right { .Image .right; }
51 46
 
52 47
 a:focus,
53 48
 a:hover     { color: #000; }
@@ -98,7 +93,7 @@ caption     { background: #eee; }
98 93
 /* Misc classes
99 94
 -------------------------------------------------------------- */
100 95
 
101  
-.small      { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; }
  96
+.small      { .Type .small(); }
102 97
 .large      { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
103 98
 .hide       { display: none; }
104 99
 
1  blueprint/tests/main.css
... ...
@@ -0,0 +1 @@
  1
+body .sub { color: red; }
9  blueprint/tests/main.less
... ...
@@ -0,0 +1,9 @@
  1
+@import 'sub.less';
  2
+
  3
+.Library {
  4
+  @import 'sub.less';
  5
+}
  6
+
  7
+body {
  8
+  .Library;
  9
+}
3  blueprint/tests/sub.less
... ...
@@ -0,0 +1,3 @@
  1
+.sub {
  2
+  color: red;
  3
+}
229  tests/parts/sample.css
... ...
@@ -1,98 +1,131 @@
1  
-html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,dialog,figure,footer,header,hgroup,nav,section{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
2  
-article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block;}
3  
-body{line-height:1.5;}
4  
-table{border-collapse:separate;border-spacing:0;}
5  
-caption,th,td{text-align:left;font-weight:normal;}
6  
-table,td,th{vertical-align:middle;}
7  
-blockquote:before,blockquote:after,q:before,q:after{content:"";}
8  
-blockquote,q{quotes:"" "";}
9  
-a img{border:none;}
10  
-html{font-size:100.01%;}
11  
-body{font-size:75%;color:#222;background:#fff;font-family:"Helvetica Neue",Arial,Helvetica,sans-serif;}
12  
-h1,h2,h3,h4,h5,h6{font-weight:normal;color:#111;}
13  
-h1{font-size:3em;line-height:1;margin-bottom:0.5em;}
14  
-h2{font-size:2em;margin-bottom:0.75em;}
15  
-h3{font-size:1.5em;line-height:1;margin-bottom:1em;}
16  
-h4{font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
17  
-h5{font-size:1em;font-weight:bold;margin-bottom:1.5em;}
18  
-h6{font-size:1em;font-weight:bold;}
19  
-h1 img,h2 img,h3 img,h4 img,h5 img,h6 img{margin:0;}
20  
-p{margin:0 0 1.5em;}
21  
-p img.left{float:left;margin:1.5em 1.5em 1.5em 0;padding:0;}
22  
-p img.right{float:right;margin:1.5em 0 1.5em 1.5em;}
23  
-a:focus,a:hover{color:#000;}
24  
-a{color:#009;text-decoration:underline;}
25  
-blockquote{margin:1.5em;color:#666;font-style:italic;}
26  
-strong{font-weight:bold;}
27  
-em,dfn{font-style:italic;}
28  
-dfn{font-weight:bold;}
29  
-sup,sub{line-height:0;}
30  
-abbr,acronym{border-bottom:1px dotted #666;}
31  
-address{margin:0 0 1.5em;font-style:italic;}
32  
-del{color:#666;}
33  
-pre{margin:1.5em 0;white-space:pre;}
34  
-pre,code,tt{font:1em 'andale mono','lucida console',monospace;line-height:1.5;}
35  
-li ul,li ol{margin:0;}
36  
-ul,ol{margin:0 1.5em 1.5em 0;padding-left:3.333em;}
37  
-ul{list-style-type:disc;}
38  
-ol{list-style-type:decimal;}
39  
-dl{margin:0 0 1.5em 0;}
40  
-dl dt{font-weight:bold;}
41  
-dd{margin-left:1.5em;}
42  
-table{margin-bottom:1.4em;width:100%;}
43  
-th{font-weight:bold;}
44  
-thead th{background:#c3d9ff;}
45  
-th,td,caption{padding:4px 10px 4px 5px;}
46  
-tr.even td{background:#e5ecf9;}
47  
-tfoot{font-style:italic;}
48  
-caption{background:#eee;}
49  
-.small{font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
50  
-.large{font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
51  
-.hide{display:none;}
52  
-.quiet{color:#666;}
53  
-.loud{color:#000;}
54  
-.highlight{background:#ff0;}
55  
-.added{background:#060;color:#fff;}
56  
-.removed{background:#900;color:#fff;}
57  
-.first{margin-left:0;padding-left:0;}
58  
-.last{margin-right:0;padding-right:0;}
59  
-.top{margin-top:0;padding-top:0;}
60  
-.bottom{margin-bottom:0;padding-bottom:0;}
61  
-label{font-weight:bold;}
62  
-fieldset{padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
63  
-legend{font-weight:bold;font-size:1.2em;}
64  
-input[type=text],input[type=password],input.text,input.title,textarea,select{background-color:#fff;border:1px solid #bbb;}
65  
-input[type=text]:focus,input[type=password]:focus,input.text:focus,input.title:focus,textarea:focus,select:focus{border-color:#666;}
66  
-input[type=text],input[type=password],input.text,input.title,textarea,select{margin:0.5em 0;}
67  
-input.text,input.title{width:300px;padding:5px;}
68  
-input.title{font-size:1.5em;}
69  
-textarea{width:390px;height:250px;padding:5px;}
70  
-input[type=checkbox],input[type=radio],input.checkbox,input.radio{position:relative;top:.25em;}
71  
-form.inline{line-height:3;}
72  
-form.inline p{margin-bottom:0;}
73  
-.error,.notice,.success{padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
74  
-.error{background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
75  
-.notice{background:#FFF6BF;color:#514721;border-color:#FFD324;}
76  
-.success{background:#E6EFC2;color:#264409;border-color:#C6D880;}
77  
-.error a{color:#8a1f11;}
78  
-.notice a{color:#514721;}
79  
-.success a{color:#264409;}
80  
-.container{width:950px;margin:0 auto;}
81  
-.showgrid{background:url(src/grid.png);}
82  
-.last{margin-right:0;}
83  
-.border{padding-right:4px;margin-right:5px;border-right:1px solid #eeeeee;}
84  
-.colborder{padding-right:24px;margin-right:25px;border-right:1px solid #eeeeee;}
85  
-.prepend-top{margin-top:1.5em;}
86  
-.append-bottom{margin-bottom:1.5em;}
87  
-.box{padding:1.5em;margin-bottom:1.5em;background:#E5ECF9;}
88  
-hr{background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;margin:0 0 1.45em;border:none;}
89  
-hr.space{background:#fff;color:#fff;visibility:hidden;}
90  
-.clearfix,.container{display:block;}.clearfix:after,.container:after{content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
91  
-.clear{clear:both;}
92  
-.heres-a-box{width:270px;float:left;margin-right:10px;padding-right:24px;margin-right:25px;border-right:1px solid #eeeeee;}
93  
-.another-box{width:310px;float:left;margin-right:10px;padding-right:24px;margin-right:25px;border-right:1px solid #eeeeee;}
94  
-.sidebar-box{width:270px;float:left;margin-right:10px;margin-right:0;padding-right:0;margin-right:0;}
95  
-.main-body{width:590px;float:left;margin-right:10px;padding-left:40px;padding-right:24px;margin-right:25px;border-right:1px solid #eeeeee;}
96  
-.sidebar{width:270px;float:left;margin-right:10px;margin-right:0;padding-right:0;margin-right:0;}
97  
-.main-image{float:left;margin:1.5em 1.5em 1.5em 0;padding:0;margin-left:-40px;float:left;position:relative;margin-top:0;padding-top:0;}
98  
-.nested-column{width:270px;float:left;margin-right:10px;}
  1
+/* --------------------------------------------------------------
  2
+
  3
+   _typography.less
  4
+   * This file is meant to be used as an include.
  5
+
  6
+-------------------------------------------------------------- */
  7
+/* --------------------------------------------------------------
  8
+
  9
+   grid.css
  10
+   * Sets up an easy-to-use grid of 24 columns.
  11
+
  12
+   By default, the grid is 950px wide, with 24 columns
  13
+   spanning 30px, and a 10px margin between columns.
  14
+
  15
+   If you need fewer or more columns, namespaces or semantic
  16
+   element names, use the compressor script (lib/compress.rb)
  17
+
  18
+-------------------------------------------------------------- */
  19
+/* --------------------------------------------------------------
  20
+
  21
+   settings.less
  22
+   * Here's where you set your column specs.
  23
+
  24
+   By default, the grid is 950px wide, with 24 columns
  25
+   spanning 30px, and a 10px margin between columns.
  26
+
  27
+    Defaults:
  28
+    @column_width: 30px;
  29
+    @gutter_width: 10px;
  30
+    @column_count: 24;
  31
+
  32
+   If you need fewer or more columns, go ahead and add them here,
  33
+   the defaults will remain at the top of screen.less.
  34
+
  35
+-------------------------------------------------------------- */
  36
+/* A container should group all your columns. */
  37
+/* Use this class on any .span / container to see the grid. */
  38
+/* Columns
  39
+-------------------------------------------------------------- */
  40
+/* Sets up basic grid floating and margin. */
  41
+/* The last column in a row needs this class. */
  42
+/* input.column causes a rendering error */
  43
+/* Add these to a column to append empty cols. */
  44
+/* Add these to a column to prepend empty cols. */
  45
+/* Border on right hand side of a column. */
  46
+/* Border with more whitespace, spans one column. */
  47
+/* Use these classes on an element to push it into the
  48
+next column, or to pull it into the previous column.  */
  49
+/* Misc classes and elements
  50
+-------------------------------------------------------------- */
  51
+/* In case you need to add a gutter above/below an element */
  52
+/* Use a .box to create a padded box inside a column.  */
  53
+/* Clearing floats without extra markup
  54
+   Based on How To Clear Floats Without Structural Markup by PiE
  55
+   [http://www.positioniseverything.net/easyclearing.html] */
  56
+/* Regular clearing
  57
+   apply to column that should drop below previous ones. */
  58
+#page_wrap {
  59
+  width: 950px;
  60
+  margin: 0 auto;
  61
+  display: block;
  62
+}
  63
+#page_wrap:after {
  64
+  content: "\0020";
  65
+  display: block;
  66
+  height: 0;
  67
+  clear: both;
  68
+  visibility: hidden;
  69
+  overflow: hidden;
  70
+}
  71
+.heres-a-box {
  72
+  width: 270px;
  73
+  float: left;
  74
+  margin-right: 10px;
  75
+  /* TODO: a variable should store this width, for legibility
  76
+           but something's broken with scoping in less.js */
  77
+
  78
+  padding-right: 24px;
  79
+  margin-right: 25px;
  80
+  border-right: 1px solid #eeeeee;
  81
+}
  82
+.another-box {
  83
+  width: 310px;
  84
+  float: left;