0

I'm trying to learn about the 960 grid, and was looking at Skeleton.

http://www.getskeleton.com

If you visit the page, you will notice that while the right side of the page scrolls up and down, the left side is fixed (sidebar) always remains in place. If you shrink the browser window passed a point, the sidebar disappears.

I've looked at the css, and can't find anything about how this sidebar works. How did he do it?

Rahul Iyer
  • 19,924
  • 21
  • 96
  • 190

1 Answers1

0

The sidebar uses position:fixed; to stay where it is. The responsive side (re-sizing the browser) is most likely the use of media queries. Example:

@media only screen and (max-width: 999px){
   //if screen is less than or equal to 999px (just a random number) execute this code
}

@media only screen and (min-width: 1000px){
   //if screen is greater than or equal to 1000px (just a random number) execute this code
}

UPDATE

RESIZE THE BROWSER

jmore009
  • 12,863
  • 1
  • 19
  • 34
  • I understand the right side - what I don't understand is how he gets the sidebar to disappear. – Rahul Iyer Jan 24 '14 at 03:22
  • easy, using media queries. Assuming the sidebar is in some container when the screen is smaller then, say, 1000px just set that container to `display:none`. I'll update my answer with an example. – jmore009 Jan 24 '14 at 03:24