kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

Use scss option instead of css for better highlighting

This commit is contained in:
Mark Otto 2014-01-31 13:12:31 -08:00
parent 4b194471b0
commit 1802cedbc1
5 changed files with 46 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/assets/css/docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/css/pygments-manni.css
View File

@ -4,7 +4,7 @@
.err { color: #AA0000; background-color: #FFAAAA } /* Error */
.k { color: #006699; } /* Keyword */
.o { color: #555555 } /* Operator */
.cm { color: #0099FF; font-style: italic } /* Comment.Multiline */
.cm { color: #999; } /* Comment.Multiline */ /* Edited to remove italics and make into comment */
.cp { color: #009999 } /* Comment.Preproc */
.c1 { color: #999; } /* Comment.Single */
.cs { color: #999; } /* Comment.Special */

4
docs/components.html
View File

@ -1574,7 +1574,7 @@ lead: "Over a dozen reusable components built to provide iconography, dropdowns,
<div class="bs-callout bs-callout-danger">
<h4>Body padding required</h4>
<p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the top of the <code>&lt;body&gt;</code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
{% highlight css %}
{% highlight scss %}
body { padding-top: 70px; }
{% endhighlight %}
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>
@ -1618,7 +1618,7 @@ body { padding-top: 70px; }
<div class="bs-callout bs-callout-danger">
<h4>Body padding required</h4>
<p>The fixed navbar will overlay your other content, unless you add <code>padding</code> to the bottom of the <code>&lt;body&gt;</code>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.</p>
{% highlight css %}
{% highlight scss %}
body { padding-bottom: 70px; }
{% endhighlight %}
<p>Make sure to include this <strong>after</strong> the core Bootstrap CSS.</p>

76
docs/css.html
View File

@ -89,7 +89,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<h3 id="grid-media-queries">Media queries</h3>
<p>We use the following media queries in our Less files to create the key breakpoints in our grid system.</p>
{% highlight css %}
{% highlight scss %}
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
@ -103,7 +103,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
@media (min-width: @screen-lg-min) { ... }
{% endhighlight %}
<p>We occasionally expand on these media queries to include a <code>max-width</code> to limit CSS to a narrower set of devices.</p>
{% highlight css %}
{% highlight scss %}
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@ -449,7 +449,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<h4>Variables</h4>
<p>Variables determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.</p>
{% highlight css %}
{% highlight scss %}
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;
@ -457,7 +457,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<h4>Mixins</h4>
<p>Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.</p>
{% highlight css %}
{% highlight scss %}
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
@ -593,7 +593,7 @@ lead: "Global CSS settings, fundamental HTML elements styled and enhanced with e
<h4>Example usage</h4>
<p>You can modify the variables to your own custom values, or just use the mixins with their default values. Here's an example of using the default settings to create a two-column layout with a gap between.</p>
{% highlight css %}
{% highlight scss %}
.wrapper {
.make-row();
}
@ -2433,7 +2433,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="pull-left">...</div>
<div class="pull-right">...</div>
{% endhighlight %}
{% highlight css %}
{% highlight scss %}
// Classes
.pull-left {
float: left !important;
@ -2462,7 +2462,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% highlight html %}
<div class="center-block">...</div>
{% endhighlight %}
{% highlight css %}
{% highlight scss %}
// Classes
.center-block {
display: block;
@ -2483,7 +2483,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<!-- Usage as a class -->
<div class="clearfix">...</div>
{% endhighlight %}
{% highlight css %}
{% highlight scss %}
// Mixin itself
.clearfix() {
&:before,
@ -2511,7 +2511,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="show">...</div>
<div class="hidden">...</div>
{% endhighlight %}
{% highlight css %}
{% highlight scss %}
// Classes
.show {
display: block !important;
@ -2539,7 +2539,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% highlight html %}
<a class="sr-only" href="#content">Skip to main content</a>
{% endhighlight %}
{% highlight css %}
{% highlight scss %}
// Usage as a Mixin
.skip-navigation {
.sr-only();
@ -2552,7 +2552,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% highlight html %}
<h1 class="text-hide">Custom heading</h1>
{% endhighlight %}
{% highlight css %}
{% highlight scss %}
// Usage as a Mixin
.heading {
.text-hide();
@ -2821,7 +2821,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="color-swatch gray-lighter"></div>
</div>
</div>
{% highlight css %}
{% highlight scss %}
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@ -2838,7 +2838,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<div class="color-swatch brand-danger"></div>
</div>
</div>
{% highlight css %}
{% highlight scss %}
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@ -2847,7 +2847,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
{% endhighlight %}
<p>Use any of these color variables as they are or reassign them to more meaningful variables for your project.</p>
{% highlight css %}
{% highlight scss %}
// Use as-is
.masthead {
background-color: @brand-primary;
@ -2862,7 +2862,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="less-variables-scaffolding">Scaffolding</h3>
<p>A handful of variables for quickly customizing key elements of your site's skeleton.</p>
{% highlight css %}
{% highlight scss %}
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;
@ -2870,7 +2870,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
<h3 id="less-variables-links">Links</h3>
<p>Easily style your links with the right color with only one value.</p>
{% highlight css %}
{% highlight scss %}
// Variables
@link-color: @brand-primary;
@link-color-hover: darken(@link-color, 15%);
@ -2890,7 +2890,7 @@ a {
<h3 id="less-variables-typography">Typography</h3>
<p>Easily set your type face, text size, leading, and more with a few quick variables. Bootstrap makes use of these as well to provide easy typographic mixins.</p>
{% highlight css %}
{% highlight scss %}
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@ -2918,14 +2918,14 @@ a {
<h3 id="less-variables-icons">Icons</h3>
<p>Two quick variables for customizing the location and filename of your icons.</p>
{% highlight css %}
{% highlight scss %}
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";
{% endhighlight %}
<h3 id="less-variables-components">Components</h3>
<p>Components throughout Bootstrap make use of some default variables for setting common values. Here are the most commonly used.</p>
{% highlight css %}
{% highlight scss %}
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@ -2959,7 +2959,7 @@ a {
<h3 id="less-mixins-box-sizing">Box-sizing</h3>
<p>Reset your components' box model with a single mixin. For context, see this <a href="https://developer.mozilla.org/en-US/docs/CSS/box-sizing" target="_blank">helpful article from Mozilla</a>.</p>
{% highlight css %}
{% highlight scss %}
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
@ -2969,7 +2969,7 @@ a {
<h3 id="less-mixins-rounded-corners">Rounded corners</h3>
<p>Today all modern browsers support the non-prefixed <code>border-radius</code> property. As such, there is no <code>.border-radius()</code> mixin, but Bootstrap does include shortcuts for quickly rounding two corners on a particular side of an object.</p>
{% highlight css %}
{% highlight scss %}
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
@ -2992,7 +2992,7 @@ a {
<p>If your target audience is using the latest and greatest browsers and devices, be sure to just use the <code>box-shadow</code> property on its own. If you need support for older Android (pre-v4) and iOS devices (pre-iOS 5), use the <strong>deprecated</strong> mixin to pick up the required <code>-webkit</code> prefix.</p>
<p>The mixin is <strong>deprecated</strong> as of v3.1.0, since Bootstrap doesn't officially support the outdated platforms that don't support the standard property. To preserve backwards-compatibility, Bootstrap will continue to use the mixin internally until Bootstrap v4.</p>
<p>Be sure to use <code>rgba()</code> colors in your box shadows so they blend as seamlessly as possible with backgrounds.</p>
{% highlight css %}
{% highlight scss %}
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
@ -3001,7 +3001,7 @@ a {
<h3 id="less-mixins-transitions">Transitions</h3>
<p>Three mixins for flexibility. Set all transition information with one, or specify a separate delay and duration as needed.</p>
{% highlight css %}
{% highlight scss %}
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
@ -3028,7 +3028,7 @@ a {
<h3 id="less-mixins-transformations">Transformations</h3>
<p>Rotate, scale, translate (move), or skew any object.</p>
{% highlight css %}
{% highlight scss %}
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
@ -3084,7 +3084,7 @@ a {
<h3 id="less-mixins-animations">Animations</h3>
<p>A single mixin for using all of CSS3's animation properties in one declaration and other mixins for individual properties.</p>
{% highlight css %}
{% highlight scss %}
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
@ -3117,7 +3117,7 @@ a {
<h3 id="less-mixins-opacity">Opacity</h3>
<p>Set the opacity for all browsers and provide a <code>filter</code> fallback for IE8.</p>
{% highlight css %}
{% highlight scss %}
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@ -3128,7 +3128,7 @@ a {
<h3 id="less-mixins-placeholder">Placeholder text</h3>
<p>Provide context for form controls within each field.</p>
{% highlight css %}
{% highlight scss %}
.placeholder(@color: @input-color-placeholder) {
&:-moz-placeholder { color: @color; } // Firefox 4-18
&::-moz-placeholder { color: @color; } // Firefox 19+
@ -3139,7 +3139,7 @@ a {
<h3 id="less-mixins-columns">Columns</h3>
<p>Generate columns via CSS within a single element.</p>
{% highlight css %}
{% highlight scss %}
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
@ -3155,21 +3155,21 @@ a {
<h3 id="less-mixins-gradients">Gradients</h3>
<p>Easily turn any two colors into a background gradient. Get more advanced and set a direction, use three colors, or use a radial gradient. With a single mixin you get all the prefixed syntaxes you'll need.</p>
{% highlight css %}
{% highlight scss %}
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);
{% endhighlight %}
<p>You can also specify the angle of a standard two-color, linear gradient:</p>
{% highlight css %}
{% highlight scss %}
#gradient > .directional(#333; #000; 45deg);
{% endhighlight %}
<p>If you need a barber-stripe style gradient, that's easy, too. Just specify a single color and we'll overlay a translucent white stripe.</p>
{% highlight css %}
{% highlight scss %}
#gradient > .striped(#333; #000; 45deg);
{% endhighlight %}
<p>Up the ante and use three colors instead. Set the first color, the second color, the second color's color stop (a decimal value like 0.25), and the third color with these mixins:</p>
{% highlight css %}
{% highlight scss %}
#gradient > .vertical-three-colors(#777; #333; .25; #000);
#gradient > .horizontal-three-colors(#777; #333; .25; #000);
{% endhighlight %}
@ -3181,7 +3181,7 @@ a {
<h3 id="less-mixins-clearfix">Clearfix</h3>
<p>Forget adding <code>class="clearfix"</code> to any element and instead add the <code>.clearfix()</code> mixin where appropriate. Uses the <a href="http://nicolasgallagher.com/micro-clearfix-hack/" target="_blank">micro clearfix</a> from <a href="http://twitter.com/necolas" target="_blank">Nicolas Gallager</a>.</p>
{% highlight css %}
{% highlight scss %}
// Mixin
.clearfix() {
&:before,
@ -3202,7 +3202,7 @@ a {
<h3 id="less-mixins-centering">Horizontal centering</h3>
<p>Quickly center any element within its parent. <strong>Requires <code>width</code> or <code>max-width</code> to be set.</strong></p>
{% highlight css %}
{% highlight scss %}
// Mixin
.center-block() {
display: block;
@ -3219,7 +3219,7 @@ a {
<h3 id="less-mixins-sizing">Sizing helpers</h3>
<p>Specify the dimensions of an object more easily.</p>
{% highlight css %}
{% highlight scss %}
// Mixins
.size(@width; @height) {
width: @width;
@ -3236,7 +3236,7 @@ a {
<h3 id="less-mixins-resizable">Resizable textareas</h3>
<p>Easily configure the resize options for any textarea, or any other element. Defaults to normal browser behavior (<code>both</code>).</p>
{% highlight css %}
{% highlight scss %}
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
@ -3247,7 +3247,7 @@ a {
<h3 id="less-mixins-truncating">Truncating text</h3>
<p>Easily truncate text with an ellipsis with a single mixin. <strong>Requires element to be <code>block</code> or <code>inline-block</code> level.</strong></p>
{% highlight css %}
{% highlight scss %}
// Mixin
.text-truncate() {
overflow: hidden;
@ -3265,7 +3265,7 @@ a {
<h3 id="less-mixins-retina-images">Retina images</h3>
<p>Specify two image paths and the @1x image dimensions, and Bootstrap will provide an @2x media query. <strong>If you have many images to serve, consider writing your retina image CSS manually in a single media query.</strong></p>
{% highlight css %}
{% highlight scss %}
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");

8
docs/getting-started.html
View File

@ -483,11 +483,11 @@ bootstrap/
<h3 id="support-ie10-width">Internet Explorer 10 in Windows 8 and Windows Phone 8</h3>
<p>Internet Explorer 10 doesn't differentiate <strong>device width</strong> from <strong>viewport width</strong>, and thus doesn't properly apply the media queries in Bootstrap's CSS. Normally you'd just add a quick snippet of CSS to fix this:</p>
{% highlight css %}
{% highlight scss %}
@-ms-viewport { width: device-width; }
{% endhighlight %}
<p>However, this doesn't work for devices running Windows Phone 8 versions older than <a href="http://blogs.windows.com/windows_phone/b/wpdev/archive/2013/10/14/introducing-windows-phone-preview-for-developers.aspx">Update 3 (a.k.a. GDR3)</a>, as it causes such devices to show a mostly desktop view instead of narrow "phone" view. To address this, you'll need to <strong>include the following CSS and JavaScript to work around the bug</strong>.</p>
{% highlight css %}
{% highlight scss %}
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@ -563,7 +563,7 @@ if (isAndroid) {
<h3 id="third-box-sizing">Box-sizing</h3>
<p>Some third party software, including Google Maps and Google Custom Search Engine, conflict with Bootstrap due to <code>* { box-sizing: border-box; }</code>, a rule which makes it so <code>padding</code> does not affect the final computed width of an element. Learn more about <a href="http://css-tricks.com/box-sizing/">box model and sizing at CSS Tricks</a>.</p>
<p>Depending on the context, you may override as-needed (Option 1) or reset the box-sizing for entire regions (Option 2).</p>
{% highlight css %}
{% highlight scss %}
/* Box-sizing resets
*
* Reset individual elements or override regions to avoid conflicts due to
@ -704,7 +704,7 @@ if (isAndroid) {
<p>To implement this, in the custom stylesheet, add the following CSS:</p>
{% highlight css %}
{% highlight scss %}
/* Custom button
-------------------------------------------------- */