0

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

Cool Guy Yo
  • 5,910
  • 14
  • 59
  • 89

2 Answers2

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.

David Brainer
  • 6,223
  • 3
  • 18
  • 16
  • Im not exactly sure what you mean So I can still use adapt.js and have it choose which css file to load based on the screen size? – Cool Guy Yo Nov 10 '11 at 22:26
  • @AndersKitson That is correct. There is no reason why every single stylesheet needs to be combined and/or linked in the way you describe. – David Brainer Nov 10 '11 at 22:29
  • So my problem is actually with getting wordpress to recognize the styles at all, I need to do some php to get them to see them normally, this is beyond my scope. – Cool Guy Yo Nov 10 '11 at 22:42
  • @AndersKitson I have provided an example of the exact configuration you need for adapt.js which simply needs to be inserted into your header.php should not require any additional php. I am not entirely sure what you mean by "getting wordpress to recognize the styles at all". Can you elaborate? – David Brainer Nov 10 '11 at 22:45
  • ok that's where I was falling short not wrapping the path in php tags, thanks for this. – Cool Guy Yo Nov 10 '11 at 22:49
1

If you are creating your own theme you can use the Roots Theme, http://www.rootstheme.com/

They include an "adapt" option as one of the CSS frameworks, along with bootstrap and some others.

Keep in mind that this is basically a blank theme, and you would have to style it yourself. But provides an excellent foundation with adapt as well as other responsive best practices including HTML5 boilerplate.

Thomas
  • 11
  • 1