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:
parent
43fc3be14b
commit
b36e2d2622
@ -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
|
||||
|
@ -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
|
||||
|
@ -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
|
||||
|
@ -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.
|
||||
|
@ -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!
|
||||
|
@ -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
|
||||
|
@ -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
|
@ -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
|
@ -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.
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user