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

Projects
None yet
@andregriffin

andregriffin 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.

Show comment
Hide comment
@mdo

mdo Jan 28, 2012

Member

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

Member

mdo 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.

Show comment
Hide comment
@andregriffin

andregriffin 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 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.

Show comment
Hide comment
@andregriffin

andregriffin 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!

andregriffin 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.

Show comment
Hide comment
@mdo

mdo Feb 11, 2012

Member

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.

Member

mdo 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.

Show comment
Hide comment
@ben-s

ben-s 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.

ben-s 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.

Show comment
Hide comment
@mikeker

mikeker 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!

mikeker 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.

Show comment
Hide comment
@jayhoytt

jayhoytt 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)

jayhoytt 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)

@robotsarego

This comment has been minimized.

Show comment
Hide comment
@robotsarego

robotsarego 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.

robotsarego@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.

robotsarego 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.

robotsarego@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.

Show comment
Hide comment
@hynkle

hynkle 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.

hynkle 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.

Show comment
Hide comment
@sbarre

sbarre 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!

sbarre 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.

Show comment
Hide comment
@mauricesvay

mauricesvay Jun 28, 2012

+1. Need negative offset too.

mauricesvay commented Jun 28, 2012

+1. Need negative offset too.

@raydale

This comment has been minimized.

Show comment
Hide comment
@raydale

raydale 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.

raydale 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.

Show comment
Hide comment
@englebip

englebip 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.

englebip 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.

Show comment
Hide comment
@markroyko

markroyko 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.

markroyko 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.

Show comment
Hide comment
@rizkysyazuli

rizkysyazuli Jul 26, 2012

+1 from me as well

rizkysyazuli commented Jul 26, 2012

+1 from me as well

@yanaku

This comment has been minimized.

Show comment
Hide comment
@yanaku

yanaku Aug 8, 2012

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

yanaku 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.

Show comment
Hide comment
@vinorodrigues

vinorodrigues Aug 21, 2012

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

vinorodrigues commented Aug 21, 2012

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

@jmartsch

This comment has been minimized.

Show comment
Hide comment
@jmartsch

jmartsch 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.

jmartsch 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.

Show comment
Hide comment
@nathanpitman

nathanpitman 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 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.

Show comment
Hide comment
@nathanpitman

nathanpitman Oct 30, 2012

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

nathanpitman 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.

Show comment
Hide comment
@matt-dns

matt-dns Nov 2, 2012

+1! This would be immensely useful.

matt-dns commented Nov 2, 2012

+1! This would be immensely useful.

@nathanpitman

This comment has been minimized.

Show comment
Hide comment
@nathanpitman

nathanpitman 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. :)

nathanpitman 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.

Show comment
Hide comment
@iamstarkov

iamstarkov Nov 13, 2012

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

You can see usecase in my article
twitter bootstrap negative offset

iamstarkov 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.

Show comment
Hide comment
@nathanpitman

nathanpitman Nov 14, 2012

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

nathanpitman commented Nov 14, 2012

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

@iamstarkov

This comment has been minimized.

Show comment
Hide comment
@iamstarkov

iamstarkov commented Nov 14, 2012

@gtrufitt

This comment has been minimized.

Show comment
Hide comment
@gtrufitt

gtrufitt commented Nov 25, 2012

+1

@nathanpitman

This comment has been minimized.

Show comment
Hide comment
@nathanpitman

nathanpitman Nov 26, 2012

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

nathanpitman commented Nov 26, 2012

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

@jaseemabid

This comment has been minimized.

Show comment
Hide comment
@jaseemabid

jaseemabid Dec 18, 2012

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

jaseemabid 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.

Show comment
Hide comment
@gdekadt

gdekadt 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)...

gdekadt 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.

Show comment
Hide comment
@pale2hall

pale2hall Feb 21, 2013

I'd like to see this too.

pale2hall commented Feb 21, 2013

I'd like to see this too.

@ptbello

This comment has been minimized.

Show comment
Hide comment
@ptbello

ptbello commented Feb 21, 2013

+1

@boh1996

This comment has been minimized.

Show comment
Hide comment
@boh1996

boh1996 commented Feb 21, 2013

+1

@JayBizzle

This comment has been minimized.

Show comment
Hide comment
@JayBizzle

JayBizzle commented Feb 22, 2013

+1

@rasummer

This comment has been minimized.

Show comment
Hide comment
@rasummer

rasummer commented Apr 11, 2013

+1

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jul 4, 2013

Member

Implemented in v3; see #3137 (comment)

Member

cvrebert 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