rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

add stubbed out table for how to compile less

Browse Source
This commit is contained in:
Mark Otto 2011-09-10 21:50:12 -07:00
parent 6a74a313a8
commit 8130b113bb
1 changed files with 49 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
docs/index.html
View File

@ -1639,34 +1639,13 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
font-weight: @weight; font-weight: @weight;
line-height: @lineHeight; line-height: @lineHeight;
} }
.serif(@weight: normal, @size: 14px, @lineHeight: 20px) { ...
font-family: "Georgia", Times New Roman, Times, sans-serif;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
.monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
font-family: "Monaco", Courier New, monospace;
font-size: @size;
font-weight: @weight;
line-height: @lineHeight;
}
} }
</pre> </pre>
<h4>Gradients</h4> <h4>Gradients</h4>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
#gradient { #gradient {
.horizontal (@startColor: #555, @endColor: #333) { ...
background-color: @endColor;
background-repeat: repeat-x;
background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
background-image: linear-gradient(left, @startColor, @endColor); // Le standard
}
.vertical (@startColor: #555, @endColor: #333) { .vertical (@startColor: #555, @endColor: #333) {
background-color: @endColor; background-color: @endColor;
background-repeat: repeat-x; background-repeat: repeat-x;
@ -1678,16 +1657,11 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10 background-image: -o-linear-gradient(@startColor, @endColor); // Opera 11.10
background-image: linear-gradient(@startColor, @endColor); // The standard background-image: linear-gradient(@startColor, @endColor); // The standard
} }
.directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
... ...
}
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
...
}
} }
</pre> </pre>
<h3>Operations and grid system</h3> <h3>Operations</h3>
<p>Get fancy and perform some math to generate flexible and powerful mixins like the one below.</p> <p>Get fancy and perform some math to generate flexible and powerful mixins like the one below.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
// Griditude // Griditude
@ -1696,19 +1670,55 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
@gridGutterWidth: 20px; @gridGutterWidth: 20px;
@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
// Grid System // Make some columns
.container {
width: @siteWidth;
margin: 0 auto;
.clearfix();
}
.columns(@columnSpan: 1) { .columns(@columnSpan: 1) {
width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
} }
.offset(@columnOffset: 1) {
margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
}
</pre> </pre>
<h2>Compiling Less</h2>
<p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p>
<h3>Ways to compile</h3>
<table>
<thead>
<tr>
<th style="width: 120px;">Method</th>
<th>Steps</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<td>Node with makefile</td>
<td>
</td>
</tr>
<td>Javascript</td>
<td>
<p><a href="http://lesscss.org/">Download the latest Less.js</a> and include the path to it (and your Bootstrap code) in the <code>head</code>.</p>
<pre class="prettyprint">
&lt;link rel="stylesheet/less" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;
</pre>
<p>To recompile the .less files, just save them and reload your page. Less.js compiles them and stores them in local storage.</p>
</td>
</tr>
<tr>
<td>Command line</td>
<td>
</td>
</tr>
<tr>
<td>Less Mac app</td>
<td>
<p><a href="http://incident57.com/less/">The unofficial Mac app</a> watches directories of .less files and compiles the code to local files after every save of a watched .less file.</p>
<p>If you like, you can toggle preferences in the app for automatic minifying and which directory the compiled files end up in.</p>
</td>
</tr>
</tbody>
</table>
</div> </div>
</div> </div>