capitalize Less instead of using all caps

This commit is contained in:
Mark Otto 2011-08-17 22:40:50 -07:00
parent 8ba5a29456
commit 799a14d1cb
1 changed files with 11 additions and 11 deletions

View File

@ -33,7 +33,7 @@
<li><a href="#navigation">Navigation</a></li> <li><a href="#navigation">Navigation</a></li>
<li><a href="#alerts">Alerts</a></li> <li><a href="#alerts">Alerts</a></li>
<li><a href="#popovers">Popovers</a></li> <li><a href="#popovers">Popovers</a></li>
<li><a href="#less">LESS</a></li> <li><a href="#less">Less</a></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -46,7 +46,7 @@
Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.<br /> Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.<br />
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br /> It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.<br />
</p> </p>
<p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with LESS">built with LESS</a> and was designed to work out of the gate with only modern browsers in mind.</p> <p><strong>Nerd alert:</strong> Bootstrap is <a href="#less" title="Read about using Bootstrap with Less">built with Less</a> and was designed to work out of the gate with only modern browsers in mind.</p>
</div> <!-- /container --> </div> <!-- /container -->
</div> </div>
</div> </div>
@ -62,8 +62,8 @@
</form> </form>
</div> </div>
<div class="span5 columns"> <div class="span5 columns">
<h6>Use it with LESS</h6> <h6>Use it with Less</h6>
<p>A fan of using LESS.js? No problem, just clone the repo and add these lines:</p> <p>A fan of using Less? No problem, just clone the repo and add these lines:</p>
<form> <form>
<textarea class="copy-code" rows="2">&lt;link rel="stylesheet/less" type="text/css" href="/path/to/bootstrap.less"&gt; <textarea class="copy-code" rows="2">&lt;link rel="stylesheet/less" type="text/css" href="/path/to/bootstrap.less"&gt;
&lt;script src="/path/to/less.js"&gt;&lt;/script&gt;</textarea> &lt;script src="/path/to/less.js"&gt;&lt;/script&gt;</textarea>
@ -1145,25 +1145,25 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
<section id="less"> <section id="less">
<div class="page-header"> <div class="page-header">
<h1>Using Bootstrap with LESS <small>Supercharge your CSS with variables, mixins, and functions</small></h1> <h1>Using Bootstrap with Less <small>Supercharge your CSS with variables, mixins, and functions</small></h1>
</div> </div>
<div class="row"> <div class="row">
<div class="span4 columns"> <div class="span4 columns">
<p>Bootstrap was built with <a href="http://markdotto.com/bootstrap/">Preboot</a>, an open-source pack of mixins and variables to be used in conjunction with <a href="http://lesscss.org" target="_blank">LESS</a>, a CSS preprocessor for faster and easier web development.</p> <p>Bootstrap was built with <a href="http://markdotto.com/bootstrap/">Preboot</a>, an open-source pack of mixins and variables to be used in conjunction with <a href="http://lesscss.org" target="_blank">Less</a>, a CSS preprocessor for faster and easier web development.</p>
<p>Check out how we used Preboot in Bootstrap and how you can make use of it should you choose to run LESS on your next project.</p> <p>Check out how we used Preboot in Bootstrap and how you can make use of it should you choose to run Less on your next project.</p>
</div> </div>
<div class="span12 columns"> <div class="span12 columns">
<h2>How to use it</h2> <h2>How to use it</h2>
<p>Use this option to make full use of Bootstrap's LESS variables, mixins, and nesting in CSS via javascript in your browser.</p> <p>Use this option to make full use of Bootstrap's Less variables, mixins, and nesting in CSS via javascript in your browser.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
&lt;link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /&gt; &lt;link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /&gt;
&lt;script type="text/javascript" src="js/less-1.0.41.min.js"&gt;&lt;/script&gt;</pre> &lt;script type="text/javascript" src="js/less-1.0.41.min.js"&gt;&lt;/script&gt;</pre>
<p>Not feeling the .js solution? <a href="http://incident57.com/less" target="_blank">Try the LESS Mac app</a> or <a href="http://lesscss.org/#-client-side-usage" target="_blank">use Node.js</a> to compile when you deploy your code.</p> <p>Not feeling the .js solution? <a href="http://incident57.com/less" target="_blank">Try the Less Mac app</a> or <a href="http://lesscss.org/#-client-side-usage" target="_blank">use Node.js</a> to compile when you deploy your code.</p>
<h2>What's included</h2> <h2>What's included</h2>
<p>Here are some of the highlights of what's included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.</p> <p>Here are some of the highlights of what's included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.</p>
<h3>Color variables</h3> <h3>Color variables</h3>
<p>Variables in LESS are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you're set.</p> <p>Variables in Less are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you're set.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
// Links // Links
@linkColor: #8b59c2; @linkColor: #8b59c2;
@ -1191,7 +1191,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
</pre> </pre>
<h3>Commenting</h3> <h3>Commenting</h3>
<p>LESS also provides another style of commenting in addition to CSS's normal <code>/* ... */</code> syntax.</p> <p>Less also provides another style of commenting in addition to CSS's normal <code>/* ... */</code> syntax.</p>
<pre class="prettyprint linenums"> <pre class="prettyprint linenums">
// This is a comment // This is a comment
/* This is also a comment */ /* This is also a comment */