Helper CSS Classes #88

modestkdr opened this Issue Jun 19, 2012 · 5 comments


None yet
5 participants

I have used the Skeleton boilerplate for a couple of projects and, it would be great to have the following classes,

.fright { float:right; } /* Float a column towards right /
.full-container { width:100%; } /
A full width container for a global header or footer .. */


I have been using .clearfix for header, is there a reason why you can't use it?

.full-container would be helpful to create sections like a global header or footer, the width being 100% and not 960px.
I am not sure how .clearfix would help in this case?

fpereia, this may be kind of late, but .clearfix has the following definition

.clearfix:before, .clearfix:after,
.row:before, .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden; /* visibility hides an element but preserves it height and width */
      width: 0;
      height: 0; 

So what you're seeing is a blank spot where your element used to be. You're better off just clearing the element anyway rather than adding another sibling in your DOM tree. For consider:

<div class="columns five ele left"><p>Text</p></div>
<div class="columns five ele2"><p>Text</p></div>
.right { float: right; }
.ele2 { clear: left; }

If you clear .ele2 right then the element will basically act like it's width is 100% of its container. Hope this helps

JoahG commented Dec 11, 2014

move to close - v2 addresses with utilities


dhg commented Dec 11, 2014

<3 @JoahG is on the case. Closing with the addition of a few utility classes.

dhg closed this Dec 11, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment