Question

I’m searching for a CSS framework that is responsive, large (more than 1000px), and where I can do the folowing :

Large design :

Normal design :

Mobile design :

Any suggestions ? I have tried 960.gs, Titan framework, 1140 css grid, and the Golden Grid System, but I’m not sure I can do everything I want in any of them.

Answer 1

You want to serve different css by detecting the screen size.

This tool does it: Adapt.js (Take a look at Less too)

With Adapt.js you can do stuff like 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'
  ]
};