Question

I want to use 960 gs adaptive.js script which allows you to select different stylesheets based on the users screen size in px. However I am using wordpress and my css files are all linked in one main css file. I am wondering if this still will work properly. I don’t think it will here is the script below & below that is the css file top portion. I am not sure how to approach this.

// Edit to suit your needs.
var ADAPT_CONFIG = {
  // Where is your CSS?
  path: 'assets/css/',

  // false = Only run once, when page first loads.
  // true = Change on window resize and page tilt.
  dynamic: true,

  // Optional callback... myCallback(i, width)
  callback: myCallback,

  // First range entry is the minimum.
  // Last range entry is the maximum.
  // Separate ranges by "to" keyword.
  range: [
    '0px    to 760px  = mobile.css',
    '760px  to 980px  = 720.css',
    '980px  to 1280px = 960.css',
    '1280px to 1600px = 1200.css',
    '1600px to 1920px = 1560.css',
    '1940px to 2540px = 1920.css',
    '2540px           = 2520.css'
  ]
};

Linked style sheet

@import “css/reset.css”; @import “css/typography.css”; @import
“css/layout.css”; @import “css/960.css”; @import “css/mobile.css”: so
on…

Answer 1

It will not work, but there is nothing stopping you from using media queries or using adapt.js and simply keeping those files out.

Adapt.js works by using javascript to call a css file dynamically. You can keep all of your primary styles in the linked file that you referenced, and only leave out the css files which create the grid layout for each screen size. Your path will need to look something like this:

<?php bloginfo('template_directory'); ?>/css/adapt/

Which assumes your adapt.js stylesheet files are stored in the /css/adapt directory inside your template root and your adapt.js javascript file is stored in the /js directory inside your template root. You will not need to tell WordPress to include the files because that is what the script is for.

The full code might look something like this:

<noscript> 
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/adapt/mobile.min.css" />
</noscript> 
<script> 
// Edit to suit your needs.
var ADAPT_CONFIG = {
  // Where is your CSS?
  path: '<?php echo get_template_directory_uri(); ?>/css/adapt/',

  // false = Only run once, when page first loads.
  // true = Change on window resize and page tilt.
  dynamic: true,

  // First range entry is the minimum.
  // Last range entry is the maximum.
  // Separate ranges by "to" keyword.
  range: [
    '0px    to 760px  = mobile.min.css',
    '760px  to 980px  = 720.min.css',
    '980px  to 1280px = 960.min.css',
    '1280px to 1600px = 1200.min.css',
    '1600px to 1920px = 1560.min.css',
    '1920px           = fluid.min.css'
  ]
};
</script> 
<script src="<?php echo get_template_directory_uri(); ?>/js/adapt.min.js"></script>

If you choose to use media queries instead you can embed them directly into your css files. If you do this you will want to define the bare-bones styles first (typically referred to as “mobile-first”) and then selectively enhance the site based on wider and wider viewports. See Ethan Marcotte’s article Responsive Web Design for a good explanation.