Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Float helper classes #1046

Closed
wants to merge 1 commit into from

4 participants

@mrpollo

I want to propose adding two new non-semantic helper classes

.left{
    float: left;
}
.right{
    float: right;
}

this helps you do things easier and quicker like:

<div class='clearfix'>
    <div class='item left'>

    </div>
    <div class='item right'>

    </div>
</div>

This helps you prototype faster.

@Warpten

1) better add them to non semantic helpers imo (im not a semantic freak though, i could be wrong)

2) you should try to avoid floating elements as much as possible.

@nimbupani

This has been suggested in the past but the structure of the document should not be impacted by what CSS layout method you use. This goes against the use of modular replicable CSS we recommend.

@nimbupani nimbupani closed this
@mrpollo

thanks, it was worth trying

@mrpollo

@nimbupani Is there such thing as a guide or written standard that the project is following? I would like to read and better understand so I can make better proposals, or at least some that make better sense.

@nimbupani

We do not have a guide, but the wiki page for css documents why these declarations are included. Searching over closed issues, would also help you find rationale for why some declarations did not make through.

@mrpollo

thank you @nimbupani I'll take a look

@aaunel

I'd never add non-semantic helper classes in place of a single style attribute. You might as well write:

<div class='clearfix'>
    <div class='item' style="float:left;">

    </div>
    <div class='item' style="float:right;">

    </div>
</div>

You're only made to believe that you're not applying inline styling to your markup by using classes. Construct your page with grids, anyway. ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
Showing with 3 additions and 1 deletion.
  1. +3 −1 css/style.css
View
4 css/style.css
@@ -269,7 +269,9 @@ td { vertical-align: top; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
-
+/* Float helpers */
+.left { float: left; }
+.right { float: right; }
/* ==|== print styles =======================================================
Print styles.
Something went wrong with that request. Please try again.