Added +float-left and +float-right as mixins

In order to include fixes for IE's double-margin bug universally, floats
were implemented as a utility mixins.
This commit is contained in:
Andrew Vit 2009-03-22 00:18:22 -07:00 committed by Chris Eppstein
parent 43fc3be14b
commit b36e2d2622
10 changed files with 71 additions and 19 deletions

View File

@ -39,7 +39,6 @@ h2
:padding 2px
:line-height 22px
:white-space nowrap
#tag-cloud
+column(8)
@ -66,4 +65,22 @@ h2
+alternating-rows-and-columns(#F9E5A7,#CEFBB3,#222)
+table-scaffolding
+outer-table-borders(2px, #151A99)
+inner-table-borders(1px, #151A99)
+inner-table-borders(1px, #151A99)
#floats
+column(16)
.clearfix-example
:background #ddd
:border 2px solid black
:text-align center
+clearfix
.float-left-example, .float-right-example
:border 1px solid black
:padding 10px
:margin 0 20px
:width 25%
:background #F9E5A7
.float-left-example
+float-left
.float-right-example
+float-right

View File

@ -139,3 +139,25 @@
%td.numeric.even 15.5
%td.numeric.odd 16.0
%td.numeric.even 17.5
#floats
.example
%h2 Floats
%p
Floated elements will extend beyond the bottom boundary of their
parent container unless a
%code.mixin +clearfix
is applied to the parent.
%p
The float mixins add fixes for the double-margin float
bug, so you don't need to remember.
.clearfix-example
.float-left-example
This div is styled with
%code.mixin +float-left
\. It is taller than its parent and it should be 20px from the left edge.
.float-right-example
This short div is styled with
%code.mixin +float-right
and it should be 20px from the right edge, even in IE6.
This div is styled with
%code.mixin +clearfix

View File

@ -15,7 +15,7 @@
// * subtraction.com/archives/2007/0318_oh_yeeaahh.php
// --------------------------------------------------------------
@import compass/utilities/general/clearfix.sass
@import compass/utilities/general/float.sass
// Main layout grid, override these constants to build your grid and container sizes.
!blueprint_grid_columns ||= 24

View File

@ -31,7 +31,7 @@
// @import blueprint/modules/liquid.sass
// -------------------------------------------------------------------
@import compass/utilities/general/clearfix.sass
@import compass/utilities/general/float.sass
// Main layout grid, override these constants to build your grid and container sizes.
// The width shown gives the right floored percentage values.

View File

@ -1,5 +1,5 @@
@import compass/utilities/text/nowrap.sass
@import compass/utilities/general/clearfix.sass
@import compass/utilities/general/float.sass
// Most of these utility classes are not "semantic". If you use them,
// you are mixing your content and presentation. For shame!

View File

@ -1,4 +1,4 @@
@import general/reset.sass
@import general/clearfix.sass
@import general/float.sass
@import general/tag_cloud.sass
@import general/inline_block.sass

View File

@ -1,11 +0,0 @@
// Clearing floats without extra markup
// Simple Clearing of Floats
// [http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/]
=clearfix
:overflow auto
:overflow -moz-scrollbars-none
// This makes ie6 get layout
:display inline-block
// and this puts it back to block
&
:display block

View File

@ -0,0 +1,24 @@
// Clearing floats without extra markup
// Simple Clearing of Floats
// [http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/]
=clearfix
:overflow auto
:overflow -moz-scrollbars-none
// This makes ie6 get layout
:display inline-block
// and this puts it back to block
&
:display block
// Implementation of float:left with fix for double-margin bug
=float-left
+float("left")
// Implementation of float:right with fix for double-margin bug
=float-right
+float("right")
// Available as alternate syntax with just +float
=float(!side = "left")
:display inline
:float= !side

View File

@ -1,6 +1,6 @@
@import bullets.sass
@import compass/utilities/general/reset.sass
@import compass/utilities/general/clearfix.sass
@import compass/utilities/general/float.sass
// A list(ol,ul) that is layed out such that the elements are floated left and won't wrap.
// This is not an inline list.

View File

@ -1,7 +1,7 @@
// This is a port of YUI Grids version 2.6.0
// Note: This is not really tested yet. Use at your own risk.
@import compass/utilities/general/clearfix.sass
@import compass/utilities/general/float.sass
@import fonts.sass
=yui-grids