Skip to content

Commit

Permalink
follow up to #9963 and #10005: update docs to use .screen-*-min vars,…
Browse files Browse the repository at this point in the history
… update customizer as well; run grunt to adjust raw files
  • Loading branch information
mdo committed Aug 24, 2013
1 parent adac269 commit ddd594c
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 20 deletions.
2 changes: 1 addition & 1 deletion assets/js/raw-files.js

Large diffs are not rendered by default.

14 changes: 7 additions & 7 deletions css.html
Original file line number Diff line number Diff line change
Expand Up @@ -80,20 +80,20 @@ <h3 id="grid-media-queries">Media queries</h3>
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm) { ... }
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md) { ... }
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg) { ... }
@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 %}
@media (max-width: @screen-phone-max) { ... }
@media (min-width: @screen-sm) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg) { ... }
@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) { ... }
@media (min-width: @screen-lg-min) { ... }
{% endhighlight %}

<h3 id="grid-options">Grid options</h3>
Expand Down
24 changes: 12 additions & 12 deletions customize.html
Original file line number Diff line number Diff line change
Expand Up @@ -471,16 +471,16 @@ <h3>Media queries breakpoints</h3>
<p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p>
<div class="row">
<div class="col-xs-6">
<label>@screen-xs</label>
<input type="text" class="form-control" placeholder="480px" data-var="@screen-xs">
<label>@screen-sm</label>
<input type="text" class="form-control" placeholder="768px" data-var="@screen-sm">
<label>@screen-xs-min</label>
<input type="text" class="form-control" placeholder="480px" data-var="@screen-xs-min">
<label>@screen-sm-min</label>
<input type="text" class="form-control" placeholder="768px" data-var="@screen-sm-min">
</div>
<div class="col-xs-6">
<label>@screen-md</label>
<input type="text" class="form-control" placeholder="992px" data-var="@screen-md">
<label>@screen-lg</label>
<input type="text" class="form-control" placeholder="1200px" data-var="@screen-lg">
<label>@screen-md-min</label>
<input type="text" class="form-control" placeholder="992px" data-var="@screen-md-min">
<label>@screen-lg-min</label>
<input type="text" class="form-control" placeholder="1200px" data-var="@screen-lg-min">
</div>
</div>

Expand All @@ -490,18 +490,18 @@ <h3>Container sizes</h3>
<div class="col-xs-6 col-sm-4">
<label>@container-tablet</label>
<input type="text" class="form-control" placeholder="728px" data-var="@container-tablet">
<p class="help-block">For <code>@screen-sm</code> and up.</p>
<p class="help-block">For <code>@screen-sm-min</code> and up.</p>
</div>
<div class="col-xs-6 col-sm-4">
<label>@container-desktop</label>
<input type="text" class="form-control" placeholder="940px" data-var="@container-desktop">
<p class="help-block">For <code>@screen-md</code> and up.</p>
<p class="help-block">For <code>@screen-md-min</code> and up.</p>
</div>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-4">
<label>@container-lg-desktop</label>
<input type="text" class="form-control" placeholder="1170px" data-var="@container-lg-desktop">
<p class="help-block">For <code>@screen-lg</code> and up.</p>
<p class="help-block">For <code>@screen-lg-min</code> and up.</p>
</div>
</div>

Expand All @@ -524,7 +524,7 @@ <h3>Grid system</h3>
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-4">
<label>@grid-float-breakpoint</label>
<input type="text" class="form-control" placeholder="@screen-sm" data-var="@grid-float-breakpoint">
<input type="text" class="form-control" placeholder="@screen-sm-min" data-var="@grid-float-breakpoint">
<p class="help-block">Point at which the navbar stops collapsing.</p>
</div>
</div>
Expand Down

1 comment on commit ddd594c

@cvrebert
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice catch!

Please sign in to comment.