SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    May 2006
    Posts
    436
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Arranging CSS for a responsive site

    When doing a responsive site I'm sold on putting all the CSS into a single file. However, how do you arrange your CSS? For example, you could have core CSS first and then do something like:

    Code:
    @media only screen and (max-width: 480px) {
    
        /* Mobile styles */
    
    }
    
    @media only screen and (min-width: 481px) {
    
        /* Desktop styles */
    
    }
    Or you could do either the mobile or desktop style without a media query and then simply have one media query per breakpoint that overrides the old styles where necessary. Even though CSS is made to cascade in this way, I don't know if it's just me, but I find the first way cleaner. However, I am thinking while I still support IE 8 if I do the desktop style first and then override for mobile, tablet, etc doing the desktop style, it will work on IE 8 without the need for conditional statements.

    I know there's no right or wrong answer here, just interested to hear people's approaches.

    Finally, am I right in saying the if you have something like this…

    Code:
    div.element { background-image: url('/img/desktop.jpg'); }
    
    @media only screen and (max-width: 480px) {
    
        div.element { background-image: url('/img/mobile.jpg'); }
    
    }
    …most browsers won't download both images if they don't need to?

    Thanks.

  2. #2
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,826
    Mentioned
    73 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by DrQuincy View Post
    When doing a responsive site I'm sold on putting all the CSS into a single file. However, how do you arrange your CSS? For example, you could have core CSS first and then do something like:
    ...
    ...
    ...
    I have been using this style for quite sometime and have had no problems so far
    Code:
      #pageWrapper      {width:94%; min-width:40em; max-width:78em; margin:0 auto 1em}
      #columnWrapper    {overflow:hidden; width:100%; text-align:left}
      #contentWrapper   {float:left; width:100%;}
      #content          {margin:1em 14.9058em 1em 0; padding:0 1em}
      #sideBarWrapper   {float:left; width:11.9058em; padding-top:1em; margin-left:-14.9058em}
      #firstSideBar,
      #secondSideBar    {margin:0 -3em 0 2em; padding-left:0.5em;background-color:#fff}
    @media only screen and (min-width:64em)
    {
      #pageWrapper    {max-width: 78em}
      #content        {margin:1em 14.9058em}
      #sideBarWrapper {float:none; width:auto; margin:0}
      #firstSideBar,
      #secondSideBar  {position:relative; float:left; 
                       width:11.9058em; min-height:12em;
                       padding:0 0.1em 0 0.5em; border:solid 1px #fee }
      #firstSideBar   {margin:0 0 0 -12.9058em}
      #secondSideBar  {margin:0 -14.9058em 0 0; left:-100%}
      }
    
    @media only screen and (max-width:40em)
    {
      #pageWrapper    {min-width:12em; width:100%; padding-top:3em}
      #content        {margin:3em 0 1em;border:0}
      #sideBarWrapper {float:none; width:auto; margin:0}
      #firstSideBar,
      #secondSideBar  {background-color:#fff; min-width:25em}
      #firstSideBar   {float:left}
      .fs2            {font-size:xx-small}     
      .smiling        {/*font-size: .55em*/}
      .pinkOct img,
      .pink888        {height: 50px}
      }

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,172
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    There are many approaches, and there's no right way as such. You tend to change over time. I's starting to favor the method where you go mobile first. That is, you create styles (with no @media rules) that will suit small screens and perhaps older browsers that don't recognize @media (as long as you're OK with IE8 and under getting a plainer, linear small screen layout ... which they deserve, IMHO!)

    I sued then to have blocks of @media rules under all that. But these days I'm leaning twards inserting @media rules where they are needed amid the default code. I find it easier to keep track of the variations that way, rather than having rules spread all over the place. Yes, it means you end up with more @media {} blocks, but I find it better overall.


    Quote Originally Posted by DrQuincy View Post
    am I right in saying the if you have something like this…

    Code:
    div.element { background-image: url('/img/desktop.jpg'); }
    
    @media only screen and (max-width: 480px) {
    
        div.element { background-image: url('/img/mobile.jpg'); }
    
    }
    …most browsers won't download both images if they don't need to?
    Unfortunately, tests have shown that you can't rely on that being the case. Many devices download background images even if not for them.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I prefer to mix in the media queries with the rules (or sections) to which they apply.

    If I'm constructing a nav then I will code the nav styles and then immediately follow with a media query (if needed). In that way when I make changes to the nav at a later data (as you always do) then the media queries are right there and don;t get forgotten about. Otherwise you would have to go and look every time you made a change to see if there was also a media query for that rule; very time consuming.

    RWD isn't about creating separate pages for various screen widths (unless you are still tied to old school fixed width designs) its about adjusting element by element when that element needs to change. It's usually a couple of small tweaks here and there to make designs compress/expand nicely so the idea of separate style sheets for media queries would make things really awkward.

    I don't use any set breakpoints but just open and close the window and decide at which point the design starts to look bad or doesn't work and then I will set the breakpoint and adjust the element that needs adjusting. I find that this approach is much more intuitive although it does lead to more media queries than other methods but I find it so much easier especially on large sites.

    Quote Originally Posted by ralph.m View Post

    Unfortunately, tests have shown that you can't rely on that being the case. Many devices download background images even if not for them.
    I'd like to see an updated version of those tests as I would hazard a guess that very few (if any) modern devices will load the background image twice these days.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •