From 18a4082553e0ec86022ba76fddf413fbc5a8085d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 6 Aug 2013 21:00:12 -0700 Subject: fixes #8935: add gutter width param to grid mixins --- css.html | 61 +++++++++++++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 49 insertions(+), 12 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 6c760dd03..26b8f1d3f 100644 --- a/css.html +++ b/css.html @@ -388,26 +388,36 @@ base_url: "../"

Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

{% highlight css %} // Creates a wrapper for a series of columns -.make-row() { - // Negative margin the row out to align the content of columns - margin-left: (@grid-gutter-width / -2); - margin-right: (@grid-gutter-width / -2); +.make-row(@gutter: @grid-gutter-width) { // Then clear the floated columns .clearfix(); + + @media (min-width: @screen-small) { + margin-left: (@gutter / -2); + margin-right: (@gutter / -2); + } + + // Negative margin nested rows out to align the content of columns + .row { + margin-left: (@gutter / -2); + margin-right: (@gutter / -2); + } } // Generate the columns -.make-column(@columns) { +.make-column(@columns; @gutter: @grid-gutter-width) { + position: relative; + // Prevent columns from collapsing when empty + min-height: 1px; + // Inner gutter via padding + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); + + // Calculate width based on number of columns available @media (min-width: @grid-float-breakpoint) { float: left; - // Calculate width based on number of columns available - width: percentage(@columns / @grid-columns); + width: percentage((@columns / @grid-columns)); } - // Prevent columns from collapsing when empty - min-height: 1px; - // Set inner padding as gutters instead of margin - padding-left: (@grid-gutter-width / 2); - padding-right: (@grid-gutter-width / 2); } // Generate the column offsets @@ -416,6 +426,33 @@ base_url: "../" margin-left: percentage((@columns / @grid-columns)); } } +.make-column-push(@columns) { + @media (min-width: @grid-float-breakpoint) { + left: percentage((@columns / @grid-columns)); + } +} +.make-column-pull(@columns) { + @media (min-width: @grid-float-breakpoint) { + right: percentage((@columns / @grid-columns)); + } +} + +// Generate the small columns +.make-small-column(@columns; @gutter: @grid-gutter-width) { + position: relative; + float: left; + // Prevent columns from collapsing when empty + min-height: 1px; + // Inner gutter via padding + padding-left: (@gutter / 2); + padding-right: (@gutter / 2); + @max-width: (@grid-float-breakpoint - 1); + + // Calculate width based on number of columns available + @media (max-width: @max-width) { + width: percentage((@columns / @grid-columns)); + } +} {% endhighlight %}

Example usage

-- cgit v1.2.3 From a8d95d4721e714a7e1d683e14e997faa5ccddaff Mon Sep 17 00:00:00 2001 From: adamjacobbecker Date: Tue, 6 Aug 2013 21:25:36 -0700 Subject: Improve accessibility (Section 508, WCAG) This PR significantly improves Bootstrap's accessibility for users of assistive technology, such as screen readers. Some of the these changes add additional markup to the source examples, but we believe that the sacrifice in readability is worth achieving more widespread usage of accessibility best-practices. What was done - Added lots of [WAI-ARIA attributes](http://www.w3.org/WAI/intro/aria) - Added `.sr-only` helper class, that is only readable by screen readers (and invisible for all other users). This lets us - make progress bars and paginations accessible to screen reading users. - Advised users to always use label elements. For inline forms, they can hide them with `.sr-only` - Added 'Skip navigation' link - Added "Accessibility" section to getting-started.html. What *wasn't* done - Contrast issues (twbs#3572) - Tooltips (twbs#8469) - Documentation re: usage of icons, since they now live in a separate repo Major props to all that contributed: @bensheldon, @jasonlally, @criscristina, and @louh. Feel free to chime in, guys, if I've left anything out. --- css.html | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) (limited to 'css.html') diff --git a/css.html b/css.html index 26b8f1d3f..17e1deae6 100644 --- a/css.html +++ b/css.html @@ -1300,9 +1300,15 @@ For example, <section> should be wrapped as inline.

Requires custom widths

Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.

+
+

Always add labels

+

Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only class.

+
- - + + + +