CODEWITHSUNDEEP
responsive-designmedia-queriescompass-sassfluid-layoutsusy-compass
Paul Graham
Paul Graham

Reputation: 13

How can I choose content layouts based on body class AND media queries?

So here's the problem. I'm kind of new to Susy so I'm not entirely sure the best way to accomplish this but I'm looking to apply a layout to the .hfeed div based on the body class AND the media query which is already set up below.

Here's why. I'm doing this for WordPress and there are different layouts which are styled by using the CSS class applied to the body. Specifically, the two classes are .full-width-content and .content-sidebar. I need the selector to either span the full container or sit in the currently defined area respectively. So the specific selectors I would want to style would be ".full-width-content .hfeed" and ".content-sidebar .hfeed". I've tried setting those up to include different containers but that does not work.

Should I perhaps simply break this section out of the defined grid and select by class THEN do the media query?

What's the best way to accomplish this in susy?

//susy grid definitions, footer sits outside the susy grid def

#wrap {
    @include container( $total-columns, $break-tablet, $break-desktop );

    @include at-breakpoint( $break-tablet ) {
        #header     { @include span-columns( $break-tablet omega ); }
        #title-area { @include span-columns( 5, $break-tablet ); }
        #header .widget-area { @include span-columns( 4 omega, $break-tablet ); }
        #nav        { @include span-columns( $break-tablet omega ); }
        .hfeed      { @include span-columns( 6, $break-tablet ); }
        #sidebar    { @include span-columns( 3 omega, $break-tablet ); }
    }

    @include at-breakpoint( $break-desktop ) {
        #header     { @include span-columns( $break-desktop omega ); }
        #title-area { @include span-columns( 5, $break-desktop ); }
        #header .widget-area { @include span-columns( 5 omega, $break-desktop ); }
        #nav        { @include span-columns( $break-desktop omega ); }
        .hfeed      { @include span-columns( 7, $break-desktop ); }
        #sidebar    { @include span-columns( 4 omega, $break-desktop ); }
    }
}

Upvotes: 1

Views: 242

Answers (1)

Jeremy Iglehart
Jeremy Iglehart

Reputation: 4479

To me this is a question of order of CSS Specificity. I know from sad experience with WordPress if you're making a child theme from something like Twenty-Eleven that you're going to be fighting this a lot. So if you're trying to make changes and that's not working - make sure you inspect your elements and see if your rules are getting applied or over-ridden by other styles. As I'm sure you have already figured our WordPress theming has a lot of this problem.

Depending on how you setup your CSS structure:

• Mobile First - Smallest screens to largest screens • Larger Screens to smaller screens

your code might look like this:

Default styles for large or small screen at the top of your css - so processed first > then > Media Queries to override those directives when your screen size changes > Any things that will change when that happens goes in here.

/* Default styles */ body {...}

/* Smart Phone Styles */

@media query {

body.class .container { ... }

}

I'm not sure if this helps you or not, I'm just trying to help give you some direction. I would be interested to see what others have to say about this.

Something to keep in mind by the way when working with WordPress themes and SASS is to make sure you understand the cost of CSS Specificity - the more specific you go the more it time it costs to generate your page. It is very easy to use SASS to get too specific.

Good luck my friend. Sorry if this doesn't help.

Upvotes: 1

Related Questions