Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Negative offset for source ordering? 2.0-wip #1215

Closed
andregriffin opened this issue Jan 25, 2012 · 35 comments

Comments

@andregriffin
Copy link

commented Jan 25, 2012

It would be nice if we could use negative offsets to allow presentation order to be independent from source order. For example, to have the first sidebar to come after the content in the source, but be presented still to the left of the content.

For example, we could use something like in mixins.less:

.inset(@columns: 1) {
  margin-left: 0 - ((@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1))); 
}

Then in scaffolding.less

// Inset column options
.inset1    { .inset(1); }
.inset2    { .inset(2); }
.inset3    { .inset(3); }
.inset4    { .inset(4); }
.inset5    { .inset(5); }
.inset6    { .inset(6); }
.inset7    { .inset(7); }
.inset8    { .inset(8); }
.inset9    { .inset(9); }
.inset10   { .inset(10); }
.inset11   { .inset(11); }
.inset12   { .inset(12); }

Thoughts on adding something like this? Is this already possible, and I just missed it?

@mdo

This comment has been minimized.

Copy link
Member

commented Jan 28, 2012

Unsure how widespread the use case here is—anyone else interested or have an idea on how they'd use this?

@andregriffin

This comment has been minimized.

Copy link
Author

commented Jan 28, 2012

Unless source ordering is no longer an issue nowadays, I think this would be good for layouts, especially left sidebars, as well as showing different block orders between desktop and mobile views.

Zurb Foundation is a good example of another framework that has this option for layouts - http://foundation.zurb.com/docs/grid.php

@andregriffin

This comment has been minimized.

Copy link
Author

commented Jan 28, 2012

Here's the commit I made on my Bootstrap fork (not sure how else to post this code here)
https://github.com/andregriffin/bootstrap/commit/e2d094f9e32a46ea52a6c4c089daf00afd4f2a29

But yes, let's see if anyone else would find this useful. Thanks for considering!

@mdo

This comment has been minimized.

Copy link
Member

commented Feb 11, 2012

So far this seems like less of a use case since no one has opened similar issues or commented here. I'm going to close it out for now and will revisit if necessary down the line.

@mdo mdo closed this Feb 11, 2012

@ben-s

This comment has been minimized.

Copy link

commented Feb 15, 2012

I agree with andregriffin : source ordering should be available : it's very important for SEO.
As long as this feature is not included in twitter bootstrap, I will keep working with the Foundation framework which gives less features than Twitter bootstrap, but recently implemented this feature.

@mikeker

This comment has been minimized.

Copy link

commented Mar 17, 2012

I'll add one more vote for better source ordering support as andregriffin suggests. While no one really know what voodoo Google uses to weight keywords on a page, I'm fairly certain that those words that appear near the top of the source gets higher weight than those at the bottom.

In the dark days of Web design, we would use right-hand sidebars for fear our main content would be scrolled off to the right on smaller width screens. Since a responsive design can push sidebars below content when widths get too small, being able to have left-hand sidebars that appear after the content in the source would be great!

@jayhoytt

This comment has been minimized.

Copy link

commented Mar 29, 2012

As I briefly noted in another thread, I am surprised this has not come up more often, particularly with respect to responsive layout design.

#2861 (comment)

@landondurnan

This comment has been minimized.

Copy link

commented Apr 12, 2012

I needed something like this for a project I was working on and modified the existing offset mixin to create an inset mixin.

landondurnan@8523b59

This will do what andregriffin was trying to do in his commit, but in a slimmer way more compatible with the existing branch.

How I used it:
BigSushi.fm

The main navigation is the last in the source order since we wanted that to be less important for mobile users and SEO, but it's pulled over using the inset so at larger screen size it's positioned to the left.

@hynkle

This comment has been minimized.

Copy link

commented Apr 26, 2012

+1. We have a an element that is displayed as a right sidebar on large screens, but which should appear on top of our main content area for smaller screens (i.e. mobile). As far as I can tell, there's no pure CSS way to do this with bootstrap. If we could put the right sidebar first in the source order but keep it displaying on the right, this would solve our problem.

@sbarre

This comment has been minimized.

Copy link

commented May 5, 2012

@hynkle, @ben-s:

I solved this problem on a site I was building by setting the right-hand column to float:right explicitly and then re-declaring a few of the responsive rules to remove the float when we want the columns to stack. So in my HTML I have something like this (simplified for the example) where my right-hand sidebar is source-ordered at the top but shows up on the right:

<div class="container">
  <div class="row">
    <div class="span4 sidebar">
      <div>
        sidebar
      </div>
    </div>
    <div class="span8 content">
      <div>
        content
      </div>
    </div>
  </div>
</div>
.sidebar {
  float: right;
}

then below that rule, you just have to re-declare your responsive adjustments for smaller screens (or stick the float:right rule before your responsive stylesheet, whatever works for you):

EDIT: I also had to re-declare the float:right for the intermediate landscape-tablet sizing in order to prevent the span* rules from overriding the float.

@media (min-width: 768px) and (max-width: 979px) {
  .sidebar {
    float: right;
  }
}

@media (max-width: 767px) {
  [class*="span"],
  .row-fluid [class*="span"] {
    display: block;
    float: none;
    width: auto;
    margin-left: 0;
  }
}

It's not a catch-all solution but if you need to do this in a simple way for a master site layout (which was the case for me) this accomplished it for me.

Hope it helps!

@mauricesvay

This comment has been minimized.

Copy link

commented Jun 28, 2012

+1. Need negative offset too.

@raydale

This comment has been minimized.

Copy link

commented Jul 6, 2012

+1. I use source ordering on all websites.

The use case is a strong one for SEO, but not only SEO. Source ordering is particularly useful when templating / theming in CMS's. Specifically where you want to allow the user to change the order of sidebars and content regions on a page. In this case simply adding 1 class to a content and sidebar wrapper gives users a good deal of flexibility that is difficult to achieve without source ordering.

@englebip

This comment has been minimized.

Copy link

commented Jul 18, 2012

+1 for this. In 960.gs, there are pull_X and push_X (equivalent to offsetX in Bootstrap) available, that solve this issue.

@markroyko

This comment has been minimized.

Copy link

commented Jul 25, 2012

This is Definitely Needed. There are plenty of use cases I can think of where you need to change ordering based on viewing size.

@rizkysyazuli

This comment has been minimized.

Copy link

commented Jul 26, 2012

+1 from me as well

@yanaku

This comment has been minimized.

Copy link

commented Aug 8, 2012

+1 for me too. That's why I'm currently staying with the Zurb Foundation framework instead of switching to Bootstrap.

@vinorodrigues

This comment has been minimized.

Copy link

commented Aug 21, 2012

+1 - I also need this, please...

@jmartsch

This comment has been minimized.

Copy link

commented Sep 11, 2012

+1. Please add this. I really have use this right now. Please see my issue #5073 for an actual use case and it´s problems.

@nathanpitman

This comment has been minimized.

Copy link

commented Oct 30, 2012

+1 for this, would be handy for applying negative offsets to images in body copy (for a more interesting layout) knowing that it will collapse down correctly at the various breakpoints.

@nathanpitman

This comment has been minimized.

Copy link

commented Oct 30, 2012

Something like this would also need to be responsive, dropping any inset when the screen collapses below a certain size. :)

@matt-dns

This comment has been minimized.

Copy link

commented Nov 2, 2012

+1! This would be immensely useful.

@nathanpitman

This comment has been minimized.

Copy link

commented Nov 8, 2012

I wrote some responsive insets for a site I'm working on, just incase anyone needs the same:

https://gist.github.com/4038248

EDIT: Put the CSS in a Gist. :)

@iamstarkov

This comment has been minimized.

Copy link

commented Nov 13, 2012

I made one more solution — bootstrap.neg-offset.css

You can see usecase in my article
twitter bootstrap negative offset

@nathanpitman

This comment has been minimized.

Copy link

commented Nov 14, 2012

That's 404-ing for me... :?

@iamstarkov

This comment has been minimized.

Copy link

commented Nov 14, 2012

@gtrufitt

This comment has been minimized.

Copy link

commented Nov 25, 2012

+1

@nathanpitman

This comment has been minimized.

Copy link

commented Nov 26, 2012

Any chance of getting Negative offsets rolled into 3.0???

@jaseemabid

This comment has been minimized.

Copy link

commented Dec 18, 2012

+1, a good feature. I wanted to do this today and google took me here.

@gdekadt

This comment has been minimized.

Copy link

commented Jan 8, 2013

+1, it's a great feature that's been available in the other grid systems I've used previously (960 and Blueprint)...

@pale2hall

This comment has been minimized.

Copy link

commented Feb 21, 2013

I'd like to see this too.

@ptbello

This comment has been minimized.

Copy link

commented Feb 21, 2013

+1

3 similar comments
@boh1996

This comment has been minimized.

Copy link

commented Feb 21, 2013

+1

@JayBizzle

This comment has been minimized.

Copy link

commented Feb 22, 2013

+1

@rasummer

This comment has been minimized.

Copy link

commented Apr 11, 2013

+1

@cvrebert

This comment has been minimized.

Copy link
Member

commented Jul 4, 2013

Implemented in v3; see #3137 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.